Professor: I’ll make a quick announcement. There are no lectures today. You’ll work on your projects this morning.

It’s been fun teaching you. In case you’re worried about your files on the server, the server will still exist after the class is over and your files will still be there. There is a new class starting in late September and that class will have access to the files. They may overwrite your files accidentally. So it’s the same setup — the hazards that exist in this class will still exist in the next class. So make sure you always backup your files.

My blog and info will all still be online, too. I will be changing the setup of the server and delete the files at some point. I’m not sure when that will be, but I’ll send out a message if I do that in the near future.

I’ll send an email about the mailing list, too. If you haven’t received a notification about the mailing list already, let me know. That’s a mailing list for past classes. It’s a good reference for posting questions and asking for help with debugging and coding, etc.

Besides that, let’s work on our projects until 12:30 and the lunch break. If you have questions, just ask me. After the lunch break at 1:30, you’ll give your 10- to 15-minute presentations. It’s up to you what you want to talk about, but I’ll give an outline of what you might want to say. If you have any questions, just ask.

[Students working.]

Professor: It’s 12:30. You have an hour to eat lunch or get your project working. I posted something on the blog that’s a list of questions you may want to use as guidelines for your presentations. It’s up to you what you want to talk about. These are just suggestions. I’ll outline what they are so you can think about them over lunch.

First, talk about you. I’m sure you don’t know each other that well. So name, background, if you had previous experience.

The second thing is what the site is about. Give a brief description of your work, why you made it, who you made it for if it’s yourself or someone else. Why did you make the site, and why did you take the class?

Information architecture — how did you structure it. What links link to what? How did you decide to make it the way you did? For example – why did you put the category links on the site? How does the user get from one page to the next? How many pages are on your site and what is the content of each page? Are they all broad information or specific? There’s no right answer just tell us how you organized the site.

Did you think about design? This isn’t a design class but if you did think about it what techniques did you use? Did you steal ideas from other sites, which I recommended.

Next is development process. Did you use PHP templates? Is your data stored in the database. Did you use JQuery? These are questions that make it interesting for the rest of the class to tell how you made your site work technically. The next section are your plans. Will you continue web development? Did you like JavaScript or PHP? Some people like HTML — just tell us what interested you. Are you planning on launching this site for real? So that’s the question – if you’re taking this as a practice or serious concept. That’s about it.

That’s it for the presentations. No longer than 10 minutes each. We’ll start at 1:30. Any questions? I’ll leave you for the next hour and we’ll continue at 1:30 PM.

[Lunch]

[The beginning of the presentation was cut off due to computer linking issues.]

Presenter 1 –

[In progress.] –decided to do because I didn’t really have a purpose I made something up. Sometimes you’re tired and your brain is fried so I thought it would be nice in my imaginary world to find brain parts, like an auto parts store. [Joke/joking.] I took some auto parts websites and copied their ideas. That’s what this is. The name is Temporary Lobe Center because of the play on words. Anyway — doesn’t matter.

What else?

Student: Did you make the logo?

Presenter: I did. I took this image from the Internet and put the thing on stop and made it my own. This is an image template. You’ll see … [On screen.] This is not an image but a div but also a template. So the header and footer are everywhere. For most of the pages this is the case. I’ll shoe you the exceptions. This isn’t functional because I don’t have information on the database to work with. But I made it look like you COULD look for something somewhere. We tried to put the Google search but it didn’t work for some reason. It just wouldn’t take us anywhere. So this is just for looks. I don’t know if I’m following the list

Professor: You don’t have to follow it exactly. Just use it if you need something to refer To.

Presenter: This is the home page. You see ads that are funny. So I made this thing. It’s a JQuery sort of thing. [Class laughing.]

This takes you to the part that’s under construction. It also has all these links here because I really don’t have those pages. Although I do have the “contact us” page where you put your information and email and it says “Success!” Everything uses the same template. So then with this, I had a lot of problems. There were different ideas about how to approach this.

First I want to use the brain as a background image and then on top some divs with colors or links, but because the container is bigger than the image, the image sat to the left. It kept going where it wanted and it wasn’t looking good. I decided against that.

The other way I did it was to center the image. The image had all the titles “popular by age”, etc. I used a map tag kind of thing where you tell it the coordinates for the link. So the links build on top of that. You see where it begins. It’s a rectangle.

Professor: Click and hold down on it it’ll show the shape.

Presenter: Really? Nothing really works on mine. Anyway, these go nowhere really. It’s under construction. But these go to their own pages. You see they all have the template on the top and bottom. Here I used a widget from JQuery where it changes and looks cute. The frontal lobe is the only one I populated with information.

Then there’s brain performance, brain manual, testimonials, etc. The others have their own pages but they really don’t have any information. That’s it!

[Class laughing.]

Student: Good.

Professor: After each presentation do you have questions?

Another volunteer?

We can start in the back and wind around the room. If anyone doesn’t want to present that’s fine.

Presenter #2 –

Presenter: I was so happy just to get to the level to know PHP. I didn’t have hardly any experience in this area. In terms of getting me ahead I am grateful and happy. I always see myself in this area as being in communication. But it was nice to be behind the nuts and bolts of it.

The idea behind my little site is something easy for any artist. This is for a musician. We can have a song here like we saw yesterday. You can do the JavaScript — I was so happy to get this down. Then there’s inspiration. So the audience would be partially the musician because the musician would also be using this.

But more important is the feedback. This is so important because the concepts in my head are about human relationships and how it relates to what we study. These details that we’re learning will effect how an artist can display their work or get feedback. What was fun is the rating. For example “Jimi Hendrix Reincarnated.” I thought “maybe you should take up accounting” was fun.

It was hard to get down the HTML and CSS. I was happy to get to know that. The database for this section [On screen.] This is just one section. Within one table I had two fields. This is the PHP from that database. My initial idea was to make it so it would submit to the database and on a separate page. So you have one song by an artist on a separate page that would populate these links where people can comment on them. This is Class 7. My marathon was in mile 17, I could use to learn PHP better.

All these are blank here in the download music. But I got a shout out to [name deleted for security] and Jack. His band page is here. I thought that was cool.

Professor: Great.

Presenter: In terms of the future I plan to take more classes. I feel like PHP is where it’s at. This is a nice sprint in terms of a marathon.

[Class laughing.]

Professor: Questions?

In the end you didn’t get the MP3 working?

Presenter: No.

Professor: I’ll have to figure out the code. There may be something wrong with it.

Next victim?

Presenter 3 –

Presenter: I’m Jenna and this is Samantha. I had no background in this whatsoever. I was curious.

Presenter: We were both looking for another career option other than the one we’re in now. We were born with computers. You play with computers since you were 12. It’s natural and easy and fun. This is our site. It’s called “one finger typing.com.” I named this in honor of my mom because she types with one finger. It’s to make technology easier — people throw around these big words and you don’t know what the product does or if you need those features. So you overpay for things you don’t need. So this site in the future we plan on launching it. It’s a resource for the older generations to get a better grasp on technology.

Presenter: Now we focus on cell phones and TVs, but hopefully we can branch out to computers.

Presenter: It’ll keep growing. We made the “hello and welcome” to explain the site. When you click on the photos you get these drop down screens that re-orient you to other parts of the site. They’re not active now but eventually it’ll link you to the right page. Then we have a “did you know” which is a tip every week. Right now you can zoom into web pages which is useful to the older generation with glasses. My dad sits close to the screen. So these are also pretty active.

Professor: Resize the browser. It’s hard to see. Pull up the bottom too.

Presenter: What?

Professor: The bottom edge.

There you go!

Make it fit on the projector

Presenter: Like that?

Professor: We can’t see the bottom links.

Presenter: You can’t see them at all. I see.

Presenter: These are the bottom links. This bottom tool bar and top tool bar are on every page. The logo is on every page. We want it to search this site and not Google. If you move to the cell phone page, we have a lot of fake text.

Eventually this will be an intro to cell phones. It’ll explain what your needs are. Do you need CDMA? Can you go with Verizon or AT&T, etc.? There’ll be some product reviews. They’ll show the product and what we think of it. We’ll give real specs and then bottom line the product.

The bottom of this page is the same as the other one.

Presenter: The television one is the same thing. We also have a glossary. That way you’ll understand any of the vocabulary in the pages.

Presenter: There’ll be the actual definition and then a bottom-line definition of what these words actually mean. That’s pretty much it. We have a “contact us” page which actually works. It was a lot of help yesterday. You now can’t leave a field blank and you have to put an actual email address. If you try without an address, it pops up the appropriate pop-up message.

Professor: Very nice. [Applause] Any questions? You didn’t use any database stuff?

Presenter: We didn’t get that far back. Right now the glossary is just a table. But I want to make it a database eventually. I think I’ll take the PHP class for that. Eventually it will be a database with a search through our website versus Google. That’s it.

Presenter 4 —

Presenter: Hi, my name is Mark. I’ll pull up my site. Does that fit? It fits pretty good. I have a background in producing and journalism. It’s hard to find a journalism job in the US. It was easier in the Netherlands. So I may want to switch careers.

My first site is for my dad. My dad is an artist, a sculptor. I thought I might give them this site to sell more of his art. But there’s still a lot of work to do.

I’ll start at the top. I made a menu. There are two layers. There are two different divs on top of each other for the two layers. If you mouse over, you get another list inside the first list. So I created another level that way.

The basic navigation and architecture of the site is for an artist site. So the most important thing is the work itself. So that’s why I kept everything as small as possible and the pictures very large. It’s a little out of proportion on the screen but it looks nice on my computer screen.

My idea was if you see this image passing by (it’s way too fast now) but you’ll have something that you can click on and navigate to the next page with more images of that particular sculpture. I wanted to create an extra slider on top of that one.

This was already complicated because this image is moving and then the right-hand description is moving, too. [name deleted for security] helped me get that working. I couldn’t figure it out myself. You can click on one of these images. I think the first one has a link. Then you get an overview page of the picture. I thought the light box was a good feature to use for these images. You can click on an image and then you can use the “prev″ and “next” buttons.

This is as far as I got. There are some content boxes on the bottom that I need to fill in.

I have a link up here with “collection” too. This is an overview page of all the artwork. Right now you only see one sculpture. But my dad has plenty of artwork, so I can populate this page with lots of different images.

I want to make an inspiration page. I also want to add a blog but that will be very complicated. I also made a logo. I like my logo. That’s the artist’s name. It’s Zannas. You won’t find it anywhere online.

Any questions?

Student: Very nice. [Applause]

Professor: Just to point out, you’re using two different JQuery libraries, right?

Presenter: Yes.

Professor: So you use the slide or cycle?

Presenter: It’s cycle.

Professor: So cycle makes the pictures move back and forth. And then the light box does the popup screen. It’s very nice.

Anyone else? Heidi?

Presenter 5 —

Presenter: My name is Heidi. I’ve been in IT for a while but never web development. So I’m trying to shift my career. I’d like to do freelance stuff and work from home.

My site is for my friend Clementine who is also a sculptor. She dictated some of the formats. I asked her to look at things. She changed the color scheme because she wanted gray because it’s apparently a sculptor thing. She asked for specific functionality.

She wanted the promo page at the beginning versus a “home site” page. She sent me the images. I just kept them the same size. I used the rounded edges. I did some animation on the menu bar. I gave props to the photographer.

There’s also an image gallery of her pieces. She wanted different images of the same piece to come up when you click on the image. I did two different kinds. I did one with a fade in/fade out. And another piece, I did the sliding images so there’s some variation.

Everything else is typical of an artist’s website. She requested links to other artists. I also did the contact boxes. I didn’t go as far as making sure the email addresses had to be inputted.

But her email is hardcoded in the site so you can’t put her email address in. I did test it with her and she got the email!

That’s about it. I put the slideshow in. But it was kind of what Mark had done with smaller images. My friend will give me actual images when she decides what sizes she wants. When Clementine gets her domain name set up, then this site will actually go live. So that’s exciting.

I have a lot of artist friends. I’d like to do various things but mostly get a portfolio of my own started so I can freelance. That’s it. [Applause]

Professor: Doug?

Presenter 6 —

Presenter: What am I missing?

Student: Do you need a slash after your name?

Presenter: Right. I’m glad I was surrounded by IT specialists all around. My name is Doug. I have zero background in computers. Unlike Deb and Samantha, I was not using a computer at age 12 because it didn’t exist. The Apple II came out when I was a senior in high school.

Student: I heard about that on the History Channel. [Joke/joking.]

Presenter: I wanted to do this for personal development. I thought this would be a good place to start. With my schedule, I could take two weeks of vacation. So that goes to my inspiration for this site. I run into people for work. I’m an airline pilot. I go to JFK once or twice a week. I run into people who are always lost.

My inspiration was to make a “keep it simple, stupid” for how to get to JFK from New York City and what to do when you get here.

I would recommend if you want to use template, start with a template first. I used a template in the header section. But I did it after the fact. When you do that, they don’t work because they’re HTML. So you should use the template first. Each page has the same header. So it would have made sense to do it from the beginning. When you go back, it takes twice as much time to correct your link problems.

The home page is an introduction on being in New York. This is how I would recommend to get to JFK. And then there are five things I would do in New York.

On the left, I have this menu. If you go to the site and find something you like, two months later you remember something from this site, you can go to any page and get a link to a restaurant or something like that. It opens another page when you click on it and you stay on my site.

You read through this. It tells you to take the Air Train to Manhattan via the E subway because it’s faster and cheaper for anybody in Manhattan. This gives your Air Train basics. I’m trying to make the train look like it’s moving fast.

Then I have instructions for how to get to Manhattan, how to pay, and where to pay. You pay to get off the train and that can be confusing.

Then I have my top 5 list. I have the cycle slideshow, which I like the effect there. These go through pictures of my top 5 items plus a couple more.

On the top 5 here, I have my list. You can click for the link to that item, which opens to another window, or a map. I like Google Maps but they didn’t have a compact link. So I used MapQuest. They allow the same function but you can save the link rather than use a whole map that takes up so much space.

So this shows the Top of the Rock. [On screen.]

I guess that’s about it unless you have questions. Like I said, I had a lot of links on there. That’s a problem when you go from HTML to PHP if you don’t do it right away. I want to work on the contact boxes. I didn’t get to that yet. I also need to spell check. I haven’t spell checked yet!

Professor: Are you carrying a business card with this website?

Presenter: If I know anybody coming to the city, I’ll tell people to look at the website. Unless you have a smart phone, you can’t do this on the run. But you can use this site as a prep.

Professor: You’re going to publish this on your own server? You can leave it here, but are you going to launch and promote this site?

Presenter: I might. I don’t know. I have a lot of friends in Europe. I’ll give them the link to this and have them tell their friends. Most Europeans want to use mass transit and it’s more confusing here than over in Europe. But that’s an idea.

Professor: It’s great. Any questions?

Student: Where are the pictures from?

Presenter: I grabbed some from the website. I grabbed the ferry picture from the website. I grabbed a restaurant picture from New York magazine.

Student: When you did the Google map …

Presenter: MapQuest.

Student: Did you pass the address?

Presenter: Go on MapQuest and search where you want to go. In the navigation bar it says “link/embed” and it’ll give you a cut and paste. It’ll give you HTML text but the map is as big as these pictures in Google and it wouldn’t work.

Professor: Google Maps does have a link section. It’s buried. I’ll show you where it is. Bring it up. It’s not obvious where it is.

[On screen.]

Presenter: Your computer is slow.

Professor: I’ll show you some other time. There is a link icon.

Presenter: I saw the embedded one but not the link.

Presenter: I think you do that after your address.

Professor: There it is.

Presenter: Oh. This is what you grab? Ok. Because … this one you can customize the map. But even small is …
Student: You can type in the height.

Presenter: But it smashes the graphics. The navigation bar sticks out. But this is where you cut and paste if you want to embed it in the site. It pops up the map but I didn’t have space for that.

Professor: Great.

[Applause]

Presenter 7 –

Presenter: Hi. My name is Luka. My website is simple. It’s mostly copied from everyone. But I made a basic home page. And you can see what that’s going to be … I’m working on a personal project. This is for travel. It’s support for people traveling in a specific location.

You can see it translates. You see here Chinese. It’s important to be in the right language. Everyone can speak English. But I want in my site to have languages. Some are easier than others. This way everyone can get in touch from all over the world. Here you have Korean, Japanese, German, French. It’s pretty cool.

For example Spanish. You know exactly the translation —

Student: The link on Google?

Presenter: Google flag translation. Here is the blog … [On screen.] And so I wish I had this sponsor page. I wish I had more time for Flash photos on the picture page. I blogged some photos for travel and the second page is maps. In Google here you see the location. You write your location here you’re looking for and it shows the map from Google.

New York [On screen.] It’s a service — everyone can go to Google maps, but it’s nice to have on your site.

The meaning of this .. I want to create a business of my own. It’s similar to Wedding Planners. People are looking for hotels and they travel. It’s for people who look for support when they choose one specific location. I realize a lot of people don’t get the service they want or don’t find what they’re looking for. So I provide them with the best location.

I’m still starting. But once I create it here … in reality … this is the basic idea. On the left is the logo made with Photoshop. And I built a search engine. Here also I created the logo on the left. So that’s it. I didn’t find a lot of time.

Student: Very cool.

[Applause]

Student: I was thinking of doing that myself. But just thinking about it hurt my head.

Presenter 8 –

Presenter: My name is Andras [sp?] I was 17 and working for technology support. I upgraded modems. In 2000 I moved to Hungary and picked up a job working in Flash for tutorials. Like the advertisements on TV. But in 2001 I went back to school full time and I’m in the restaurant business. So the economy is bad so I’m looking for a job change. I don’t have a graphics background. You’ll see my site isn’t the prettiest. But it’s functioning. It’s an online portfolio which will go live. I have my own site and I’m switching it over to this site.

First, the entire thing is in PHP templates. So it calls in header and footer. I used AJAX load up with div on the right. That goes with everything. You can send me an email. I have several sections. “About me” is about my experience. The hardest part for me is that it’s all set up with JQuery, Java, etc. I had to come up with examples. I have CSS hover and this is PHP stuff.

I have examples of my Flash work. This explains it. Don’t worry about the spelling or grammar. I just did it fast. This is something I helped with for the Thomas Engine. This is for Candies and the popup ad. The JavaScript section I used JQuery plug in. I used drag and drop. Simple. This is a start of a memory game. I have everything up. Lovely cat. It’s Photoshopped. I have this working but I didn’t get to the nitty gritty stuff. I did the light box using pictures to Sri Lanka. This is a preschool. The way they actually weighed the kids is to put them on a meat hook.

[Class laughing.]

That’s my favorite picture. So simple light box plug in. That’s sewage and trash where I was staying in the shacks. It’s a life change for sure. For PHP I did a simple register log in. So you go and register and pick a user name and password with a message. The registration is complete. The username is unique. So I have already test registered in. So if you register a name it’s taken and you would have to log in again.

For log in — you use your user name and password. The message shows up “Hello.” If you type in the user name or password incorrectly it’ll say “user name is not correct try Again.” I want to set up sites maybe for my cats, etc. If you use AJAX to load the pages from one side to the other be careful. In this area [On screen.] here you can’t use any links to CSS or script styles. All you can use is HTML. I rigged the light box and PHP. This loads automatically to the right. But this is a new page [On screen.] The problem with the PHP sequel is that this came up but when you hit “submit” the page pops up with no headers so I had to rig it.

So I had to rig the PHP and light box. There’s a way to go around that but I didn’t have time.

[Applause]

Professor: That’s a good example of why to use templates. You had to use more pages than you needed so …

Presenter: If you go to the code you see that something’s not right. But for the average person you won’t know the difference.

Professor: Nice.

Presenter: Questions?

Presenter 9–

Jeremy: Hi, my name is Jeremy. My background is in management. I got laid off because of the economy. So I’m looking in switching into designing and development. This is my first website. This is my website. I plan to use a portfolio web site to help me get hired by a firm. So I’ll be putting this on my résumé so that when people see my resume they can see what I’ve done. I want to keep it simple because I don’t have a lot of information to show. So it has to be one page. I could have 30 pages of nothing. [Joke/joking.] So I wanted to do a JQuery accordion so that when you click something it pops up.

So I have my information here and my bio. Then I have my work section and “contact Me.” I downloaded the JQuery.

You can see a bunch of effects that you can download. This is the one I got, the accordion. There are different options. You can have it so it opens up one way, but I didn’t want that. I wanted to click on it to open up.

I used JavaScript to complement. When you click on the header, it opens the main section. I put rounded corners on the picture to use the accordion style.

I have another JQuery plugin where I click on this and it opens up. I also have a query that lets you mouse over the image and the image fades up and down. I have a basic contact section.

I didn’t want a confirmation page because I want people to stay on the same page. So when you enter your information and click submit, there’s a pop-up window that then goes away. I just wanted the window to pop up very quickly and then disappear. By default, after that pops up, the first section of the accordion opens up so you’re not stuck. That way you feel like you’ve accomplished something and then you go back automatically.

It works on most of the browsers except Internet Explorer. Hopefully anybody who wants to hire me doesn’t use IE. [Joke/joking.] This is a very simple and easy website, but I kept having to change things every time I added things. When I added rounded corners, it screwed up the accordion. I finally got it all working 30 minutes before lunch today! [Joke/joking.]

This is my website. Thank you. [Applause] Any questions?

Professor: I have a comment. It looks like you honed in on the user experience. That seems to be the focus of your website which is nice. You’ve carefully designed what happens.

Presenter: I won’t wow them with my non-existent portfolio, so I want to wow them with my website.

Professor: Very nice.

Presenter 10 —

Presenter: My name is Katherine. I work in publishing. I came here to try to find ways to earn more money. It may be a career change or it may be a move in the publishing industry. I just want to make more than minimum wage!

I’m in the process of getting my citizenship. I moved here when I was three months hold but I still need to be a citizen. We go through a process where you memorize tons of questions. The test isn’t too hard but instead of index cards, I used the final project as a quiz sort of thing.

I set this up so that this is useful to more than just me. I kept the language simple so that people who don’t speak English could use it easily. I wanted the design simple, too.

The stuff at the top is a slight variation of what the government says on the study questions themselves. It lets the user know I wrote it instead of the government.

I wanted the divs that have the question. When you scroll over the, the answer appears. This was a bigger deal than I thought. It involved a lot of PHP and [name deleted for security] helping me a lot. We have two databases, questions and answers. And we wanted the ability when there was more than one answer to call them both up.

So this is an answer on top and an answer on the bottom. So it determines how many answers to put in based on the question ID from the question box. If you want to know how that happened, I put the code up so you can see it. This is a useful quiz tool.

That’s the front page. There’s a footer at the bottom of every page. The header and footer are both templates. It’s a four-page site.

The first section is American government. You ask the question and mouse over for the answer. It goes through the questions. There are a bunch of questions with more than one possible answer. I picked two questions that I thought were good examples.

Then you click for the next page and go through the next set of questions.

The final page takes you back to the beginning if you want to start over. So that’s the idea. Yay! [Class laughing.]

Student: Looking at the questions, I’m glad I was born here. I don’t know what what the supreme law of the land is.

Presenter: When I looked at the questions I thought I’d know all of them, but then they were hard.

Professor: I took the test without studying and it was fine. It’s easy.

Presenter: I think the new test is a little bit more PC and more difficult. I’m not worried.

Student: 6 out of 10 is pass?

Presenter: They pick 10 questions out of 100 and then you just need 6. They should be easy questions. If anyone wants to study for the test, this is where you go.

Professor: I like your site because the complicated part is database-driven. All the questions and content and answers are from databases. That was complicated. Because you’re using JavaScript on each question, you have to make the JavaScript dynamic coming from the database because it’s the content that’s coming from the database had to be dealt with by JavaScript, too. That’s an interesting part of your site.

David, you’re last but not least.

Presenter 11 —

Presenter: Hi. My name’s David Thomas. I am also looking to advance my career. That’s why most of us are here. A little background, I was working for a market research company. The company basically went under because it was a market research company. They were getting responses for their research. They were using hard copies and snail mail.

They had upgraded their software to a new one, but no one knew how to use it. As they were going under, I was working with one of the guys to reprogram some of the software to work for the company. But it took me forever and I couldn’t get it done in time. It would have been so much more effective.

So I’m looking for a new job. I made this site. [On screen.] That’s a picture of me when I’m dressed better. This took me two weeks. I made this site because I was tired of sending my résumé out all over. I wanted to be more distance. I thought a website would achieve that.

I’m part of that computer generation. I thought it would come naturally to make my own site. I’ve done music recording and worked with computers for music production. I’ve done a lot of gaming in my day. I’m a nerd. So I figured it would be second nature.

This first page took me about two weeks. I couldn’t figure things out like why I couldn’t change the font color on these buttons. This site is Flash. My first attempt was on DreamWeaver. I tried that and it was not even funny. It was a total mess.

It was a mess because I made it on my screen. At the time my PC was hooked to my big screen 1080p screen. So when people saw it on the computer, it turned into crap. Plus DreamWeaver isn’t that great.

So out with the old and in with the new. Sorry for being so slow. This is still a work in progress. [On screen.]

As you can see, there’s a new and improved site. I used JQuery to do little fade-in effects. Let’s see that again.

I want to use this in real life. I still had this logo that I made. I didn’t know what color that was. Professor Bloomberg helped me out quite a bit. I used an application from Firefox called ColorZilla. It’s really great. You can click on it and scroll over anything on the Web and you’ll see what color it is in the hex code. So I was able to work with that.

There’s some rhetoric about myself on the site. Under the line it should say “web development.” I don’t know what happened to that. I’ll be talking about HTML and CSS, etc., and how to do Web design through HTML and CSS. I know these images are a little obtrusive. I’ll resize them later.

I also had a link that was working earlier today. It’s not working now. The link went to one of our assignments. I plan on improving that to show off how to use CSS to do some design.

In these boxes, I used some code from Class #4. I did this mainly for two reasons. One, we were running out of time. Two, I’m hoping that the résumé will be all encompassing. I don’t want to just apply to graphic design firms. One reason I chose web development over design was if you have a grasp of all these concepts that you could apply it to a broad range of occupations.

I felt like this and probably something else could show a certain business something specific about copying text. I might have to hit up my friend for the translating code. That would be very interesting for a lot of businesses.

As you see, I have PHP and MySQL here. [On screen.] I didn’t get to that. I don’t regret not getting to those because — I do know exactly what happened. My div has cut off a little early and pushed some other divs off the page. So I know what’s going on now.

What’s interesting, and now the picture is messed up with too much space. What was interesting, I was glad to really indulge in the CSS aspect and HTML aspect of this because once you have a really good working understanding of divs and everything and they’re sectioned off, you can plug your code into that. And you don’t have to worry so much. You still have to worry, but not so much about them affecting each other as when they’re separated from each other.

So I spent a lot of time. And I’m really upset that this happened. Also, my main container div, I had assumed that if I didn’t assign a height to the container div, that it would just continue to go down. But the container div automatically ends where the resolution of the monitor ends.

It was kind of weird. The div would end at the end of the page. So I had to make my container div extremely long so the other divs within it weren’t pushing up against each other. In my final revision it was just a bit too short and had 100 pixels too long and made it too short for this example. If this were longer there would be much less …. it’s surprising that making sure the divs is so important.

Here I have a .. what do you call these? …. I put this … anyone remember? Iframe. I put an iframe from Prof. Bloomberg’s example. Later on — my goal is to have an email thing where you put in your information and it sends an email to you to display that you have competency with database management. Unfortunately I didn’t have time for that so I used the iframe.

Great class. Prof. Bloomberg — there’s enough brown nosing — but it’s a good class, I learned a lot. I don’t have a COMPLETE grasp of everything. You showed us where to find information to practice on things at a later time. That’s valuable. I’m still going to be using that. That’s about it. That’s my presentation.

Professor: Questions for David?

You get an A for the brown nosing. [Joke/joking.]

Thanks for all your work. It’s amazing that in 2 weeks you can make a website, to tell you the truth. This takes time. From my perspective there’s no way you can learn EVERYTHING so I hope this leads you to the right direction and you have concepts and links, etc. So that’s it. That’s a class wrap. If you have questions?

[Jeremy's question about finding jobs.]

Sure. Good question. I think it’s no different than any other industry. People in the industry give each other jobs. There’s a network to it. Most 100% of my jobs are from people I know. I randomly get cold calling jobs. That almost never happens. My business runs almost entirely on recommendations. There are people constantly coming into the industry.

Network as much as possible with web developers or anyone you know or any company you know with web presence. Almost everyone you know needs web presence. Some people need more complicated sites than others. I don’t have a specific answer.

Jack – I disagree – the postings on Craigslist — I don’t see great jobs there for web developers. I’m not sure why that is. There’s so much junk on Craigslist. I think only a few of those jobs are good.

Student: Junk?

Professor: People looking for work for free basically. Jack says he finds work there so it’s a place to look. Don’t trust everything you read in those ads. I’m sure there are valid jobs there. A lot of people ask “how much should I charge for my first job.”

Make yourself affordable to start and don’t think you’ll make a million right away. Some people can go out immediately and make a lot of money — go for it if you’re that person. I recommend taking jobs for free if you can to build your portfolio. A starting rate would be 20 – 25 dollars an hour. If you’re relatively comfortable with it. The top people are $150 per. hour. So there’s a range in the hourly rates. Anywhere from 20 -150. $150 is rare. So I recommend to make as much as you can. It never hurts to ask for more right? So ask for what makes you comfortable and be willing to negotiate.

Student: I can add to that. It was crazy for me to hear that a junior developer costs over $1,000 per day.

Professor: There are some people like RGA that hire people like factories. [On screen.] They’re located downtown I think. They’ve been around for a long time. They started doing video commercials. Then when web came around they started developing. They pump out huge websites for Coca-Cola. They’re one of the top people in the market. They constantly need people. But it’s a factory. There’s nothing wrong with that and gives you great sites for your resume. This may be a good way to go to learn about how to work in the industry professionally. You can get a ton of experience there.

Let’s look at the job descriptions. They have a huge range. I made a post about this. Web development for an agency or a professional setting is like an assembly line. There are information architects, developers, quality assurance testers, server people, there’s all ranges of job descriptions. You’ve learned in this class about 10 jobs in one.

But in an agency like this this is a stream line place to work. If you look at the job descriptions you can get an idea of what people do there. Producers. There’s a lot of HTML coders, graphic designers, those are the poor jobs. HTML, JavaScript … they have dozens of people doing those jobs. You would be on a day to day basis writing code and HTML if you’re a programmer.

There’s a lot of Flash in a place like this. I think based on the skills you learned here you have a global view of the process and what goes into making a web site. So you can be a producer. You can manage the overall project rather than the code, that’s a higher level but actually they get paid less.

It’s a hierarchy of jobs. So there are a range of jobs. Not all of you are programmers. I would check out the local agencies if you’re looking for experience. I know everyone is looking for jobs. There’s a lot of supply and not a lot of demand. This still may be hard to find work in this agency. Meet people, get your name out, I’m constantly selling myself. I bring up in conversation what I do and make sure people know I’m available.

I guess that answers your question.

Student: Where would we go next to learn more?

Professor: Depends on what you’re interested in doing. If you want to be a PHP developer. I’m not selling these classes. But there’s a PHP class. I can’t tell you if the class is good or not. But that’s a place to go to learn PHP and URL. There’s an AJAX course here that just focuses on AJAX. I showed you some examples but they’d go more in depth.

There’s a JavaScript class, PHP class which is a technical class. For those of you looking for an overall job I would work on making sites. If you’re able to do this on your own then using what I’ve posted can help you. Depends on how independent you are and what position you want.

Student: This is a different topic ….

Professor: That’s ok.

Student: In my case, all the websites that NYU has they’re all ASP. With HTML and CSS would that be valid throughout. It doesn’t matter the server?

Professor: Yes. The output will always be HTML and CSS. The client shows you the thing on the page. CSS and HTML is the only thing people will be looking at. You’re looking at the same code in the browser.
I want to bring up one point. That’s the reason I started talking about RGA.

A company like RGA and any company may charge based on an hourly rate which would be $150 per. hour. That’s the rate for a web developer. They don’t pay you the developer $150 per. hour. They pay you half of that maybe. What you charge will be far less than these companies. No matter how high you go you’re still charging less than RGA. So it’s important to know what other companies charge. That’s one way for you to sell your services and be competitive.

Student: What is a rough estimate?

Professor: It’s hard to say. For a developer who knows what they’re doing there are some that charge 50 dollars per. hour. But then people charge more than that. Depends on you and who your clients are.

Student: What do you recommend for servers?

Professor: Yes. The one we’re using if you want the same set up is “dreamhost.com.” This is the one we’re using. You can set up a website easily. You can create a database with a couple clicks of a mouse. They have instant software like WordPress. It’s instantly set up. And it’s relatively affordable. A host name is $5.99 a month. You can’t go wrong with that. So this is a standard set up. What I like about Dream Host is they have easy installation with software. The one downside is that the servers are sometimes bogged down because they’re a big company. If one user is running a lot of processes at once it’ll slow it down. That’s a problem with them. They’ve gotten better at it recently.

I also use Lunar Pages. They provide the same services, there’s not much difference between them. I’ve had good support from them. My set up is more sophisticated with them. It’s $4.95. It’s priced better. It’s not as easy for the installation software. But if you check the specs they offer similar products.

I don’t like GoDaddy. Jack and I disagree with this. It’s not great customer service, but it’s the cheapest around, I believe. That’s the tradeoff. The information here is very misleading to make you think it’s cheaper than it really is, but they DO offer cheap service.

Student: It’s the top left.

Professor: There we go. Thanks. The economy plan is $4.99 a month if you sign up for three months. It has a lot of promotions. There’s not a huge difference in price from the other sites.

The nice thing about GoDaddy is registering domains. I use them for this. Registering and hosting are two separate things. If I want to get [server name deleted for security].com, that’s my site. Registering names is just getting the name registered. Then I host the site on DreamHost. It’s often easier to register and host at the same site, but you can divide the two. The sites will try to convince you that it’s very complicate to switch your hosting. But it’s really not that difficult.

If you sign up for DreamHost, I have a coupon. I’ll try to find it and post it on the blog. There’s a promo code. I would recommend DreamHost for a testing account. I use it for testing sites out. I don’t use it for commercial sites because it can get bogged down. But that’s the site I use for practicing.

I have my own server with LunarPages for commercial sites. I don’t recommend you do this when you’re starting out. You can have a dedicated server. I have a computer in their facilities that’s just my computer. The cheap hosting options are shared servers. So everyone at LunarPage who shares a host, use the same computer to process stuff. The pricing for this starts at $99 a month. It usually ends up being from $150 to $300 a month for a dedicated host server. That’s just when you’re ready to start running websites commercially.

If you’re doing simple stuff, there’s no reason you can’t host it on the cheaper sites.

Student: You make a website for someone. Do you have them get the server or do you offer your own?

Professor: I don’t host websites or manage websites. I develop them and then hand them off. I don’t like to maintain sites. That’s not my strength. I hand off the website and use my clients’ servers. If they have a server, I make sure the files are all on their server so I don’t have to keep managing them.

There’s a lot of money to be made in administrating sites.

Student: You charge on a monthly basis?

Professor: There are all sorts of ways to do it. You can get in the business where you manage all the websites and control your own personal server. On the shared server sites, you’re stuck with the server that the host provides you.

Student: What NYU does is they have a yearly contract with someone that does the maintenance. Two days a month they will do whatever work your website needs and that’s it. That’s the base contract they have. It’s a lump sum for a year. If you don’t use it, it’s NYU’s loss.

Professor: So they make their resources available if you need it. It’s a big business. Everyone has websites. Websites constantly change. There’s a huge market for that. Other questions?

Student: Could you help me with some code?

Professor: I’ll make sure there are other questions.

Student: When you go to [server name deleted for security], there’s Russian text. What is that?

Professor: I didn’t want anyone to access the site. I wanted it to be hidden. I was practicing my Cyrillic for that.

Student: I thought there was a purpose.

Professor: No, I’m just practicing some coding. I didn’t want anyone to see any of our files since these are test files. You don’t want them to be public or have search engines find them.

Student: This might be beyond the scope of the class, but when you’re using MySQL, can you tell it how to order the stuff coming in to the arrays.

Professor: I’ll point you in the direction of that answer on my blog. There’s a particular post on MySQL of my blog and then search “select.” There’s a post about that. It’s Class #8 and select statements in MySQL.

Student: The database thing, you have to buy a database?

Professor: You buy hosting. So DreamHost, for example, let’s look at their hosting plan. For $5.95 you get disk storage, MySQL databases that are unlimited. They have a control panel you go in and enter the name of the database. So I make one for this class. It built the database for me and put it up on MySQL for [server name deleted for security]. So you don’t have to buy these things separately. Any of these commercial hosts will offer the same services. They offer Web file structures, database server that may offer different levels of limitation. You can build as many email accounts as you want.

They offer discussion lists. There are all sorts of tools that come with the service. There’s PHP 5. There’s server technology that you would expect. All the things we’ve seen already and database administration and email administration, are all handled through the basic service.

So if you are interested in continuing with this, you should sign up for one of these services. Jack also recommend startlogic.com. I don’t have any experience with them, but they’ll offer similar services. He looks their customer service, so that’s why he recommends them. It’s up to you to pick one. You can’t go wrong with any of them. You’re usually not stuck with them more than a month, so if you don’t like them, you can switch.

Don’t be too turned off by the process. If you want to try it, sign up with a service. If you don’t like the service, go somewhere else. As long as you host on a month to month basis, you’re not stuck with one particular site.

Any other questions?

Student: Would you use other programs in conjunction with your own HTML CSS programming like DreamWeaver to complement things?

Professor: No. Everything is hand coded, 100 percent. There’s no replacement for that. You can’t do the same things you do with DreamWeaver. It won’t replicate the code the same way. Whether I work for myself or have people working for me, I insist that everything is hand coded. Otherwise it becomes a nightmare to manage.

Any large or successful design firm will be using the same hand coding process. I don’t think there are any large interactive design firms that use DreamWeaver. Those kinds of products are for companies that don’t have the a Web department and just have one person to quickly create sites. It won’t be a great site, but it’ll work.

I also want to point you toward some popular CMSs and content management systems. More people are using these systems. So drupal.com is a CMS site that has all this web functionality built in. It runs things for you and you can customize it to fit your own site. It’s extremely complicated to learn how to customize. You have to learn how to take the stuff that the product has and then fit them into how you want them to look.

There are more and more web developers who create sites using a tool like Drupal to quickly throw together something sophisticated because they don’t have to create everything from scratch every time. The tools are well tested. You don’t have to worry as much about bugs and syntax because it’s all built in. You still use the PHP but some things are built into it further. Look into it if you want to know more about what I’m talking about. There are more modules. It’s like adding JQuery to your website.

I’ve heard that a lot of people have problems with Drupal because it’s so complicated. Wordpress.org is another CMS. [server name deleted for security].com is a WordPress blog. It allows me to post content without entering code. I click submit and the new post shows up on my blog. I don’t have to code each post.

You can code some forms on WordPress to make your blog look more like a website. My [domain name deleted for security] website is a WordPress blog. There are some pages that look like a blog but some pages look less like a blog. You can browse around WordPress sites. You’ll see how people have customized the product to look less like a blog and more like a website. You don’t have to code as much. You just have to worry about customizing it.

If you go to my website and you view source, that’s the first step. You may see indications in here that it’s been created by WordPress. That’s a directory on my file structure that is always automatically created by WordPress. You’ll see that all over the place.

That’s one main way to tell. Sometimes it says in a comment created by this product or that product. Let’s look at the Drupal website. Let’s see examples. So you view the page source. There’s drupal.js. That’s some kind of JavaScript. You have to detect it throughout the code. You get used to recognizing sites that use WordPress.

They kind of all look the same when they use Drupal or WordPress. They all have the same kind of header and clearly marked columns and boxes on the page. There are modular style boxes that indicates it’s a kind of CMS. CMS makes easy to get those things on the page. It’s not always as easy to tell what kind of CMS was used. You just have to look at more and more sites to get used to it.

Any other questions?

So that’s the class wrap. Thanks for putting up with me for two weeks. [Class laughing.] I hope you’re happy with your projects. You’ve all done great work in the class. Feel free to contact me after class. I’m available by email. Please work with the mailing list. There are 50 developers on that mailing list that are happy to share information about how to get started. So don’t hesitate to use that mailing list.

I hope to hear from all of you soon. Thanks. [Applause]

If anyone has coding issues, I’m here until 5:00. I’m happy to help.

Student: At $150 an hour.

Professor: Exactly. [Class laughing.]

[End of class.]

Professor: Good morning, everyone. I want you to read the latest blog posts that are up there. There are two new posts. We’ll be covering four examples and the two discussions. You have until 9:30 to read through this and then we’ll go through them.

[Students reading blog.]

Professor: Has everyone gone through this stuff? I’m bringing some examples up on the screen. First I want to talk about adding “search.” There are two options for basic search.

One is creating your own search using SQL or using Google’s search which is a custom search. There is a Yahoo! version of the same idea that’s a cut and paste search. There is a third option but it’s the same as the Google search. The Google search – if you click the link here [On screen.] you’ll be taken to the Google search link. You create this custom search and it asks you the name you want to give it.

I’ll say Web Dev Custom Search. You can name it whatever you want. You all have Google accounts?

Student: I do.

Professor: Ok. So search engine description. An example “example for class.” Only search in this case for the site I selected meaning I only want to search my own site. Not the whole web. [On screen.] Let’s put destination as [server name deleted for security].com. The first is the blog and [server name deleted for security] is the web server. You can pay to get the ads removed. Read the terms of service. Ok. So here we test it out. Let’s test for PHP. There should be a lot of “Stuff” there.

Ok. They have a few. They have one site which is the home page. Not such great results. I know why this is. I have a setting to prevent indexing the server. This would normally work on another server.

Click “Finish” and in here is the code you should copy and paste. If you click “custom search element.” I’ve set this up for a class before so my version is different. If you click on the right most link you’ll see the code you can copy and paste to your site. So you take the code, copy, go to your HTML code and paste it. It’ll show up like the example I showed for the blog.

Student: You put that in all your templates?

Professor: If you want a search box in your heading then you can do that. If you want to repeat the image you can put that in the header. Same idea as that here. You can include that in your templates.

So that’s Google custom search. Let me bring up what I did on the file system to prevent a search engine from showing results. If you search for [server name deleted for security].com in Google you’ll get some results.

Student: Domain … [Can't hear/can't understand.]

Professor: You would expect we would get more hits for the projects we’re doing on the server. You have a lot of files on there but they’re not listed. The blogs listed that link to the server. But the server itself – none of these links connect to the server. That’s because on the server itself I have a folder called “robots.txt.” Robots.txt is a special file name that Google checks before it lists your site. Google still can index this and not publish it. But this is an instruction to ask Google not to publish it. They can ignore this and publish it if they want. But for now they’re not publishing and respecting this file.

Don’t allow indexing from the start of the server. Don’t index any of these pages. Google has robots that try to index every file of every website. But when they see this [On screen.] they won’t publish this file. So this file you can just copy and paste. I can also say don’t search my personal folder. But it’ll still search for other folders. You can specify and allow and disallow specific folders. You can have different permissions for different folders.

For this server — we don’t want to publish to the world everything we’re doing in class. The blogs are not on our own server so we can’t control whether or not Google hits them or not. The Yahoo! search engine does a lot of the same thing.

For their new product which hasn’t been published yet — I believe they’re more discreet about the logo they put on your search. So Yahoo! will look a little more nice than the Google one.

Student: There’s Yahoo! and Google?

Professor: In terms of service there’s a clause for the search box otherwise why give it away for free. So it takes you to their site. You’re taken to Google.com. For some web developers that’s a problem. You maintain your users for as long as possible. The reason why we design information is to keep people on your pages. So you want patrons on your site. You’re running ads and the more money you get from Google. So by taking users away from your site, Google is doing a disservice to your site. So it’s your job to try to bring them back.

I don’t recommend you use Google for a custom site. But for testing it’s fine.

I would never suggest to a client to have Google host the site. There are companies that do more elaborate search engines on a professional site. One was a client of mine actually. It’s transparensee.com. It’s not a good website. They have headquarters down the street. They create search engines. Like dating sites for example. They allow you to search by multiple categories. It’s usually way out of the budget of small clients. Unless your client has a big budget

Student: What’s the cost?

Professor: Probably 100,000 a year. It’s a yearly fee. I’m sure they make deals for budgets.

But this is actually an interesting product. If you click around there are examples I’m sure of how their engine works. There are other companies that do the same thing. You would need to license a product like this. I believe there are PHP companies that do search functions for you so you don’t have to write it all from scratch. Writing a search engine is taxing. So if you’re interested in doing a search look into these third party tools. The PHP or the full fledge package. For our purposes in this class the MySQL and Google are the only options. Let’s go to MySQL.

Those two examples in the folder I uploaded on the server are here. So go to [server name deleted for security]/[name deleted for security]bloomberg/summer2009. You see MySQL search at the bottom. So this is the first way you can do a search in MySQL. But I’ll show you what it looks like. You can control what this looks like. This is all YOUR own code. This is not copy and paste. This is searching the blog post from the examples I showed yesterday.

We can create more blog posts and more results will show up. For now, that’s the only post in there. This is a crude way to show that I’ve done a search and I’m showing the results. You’ll need to customize this for your own sites.

If I search for “sad,” it’ll pop up the results. These are both fine for using against MySQL databases. But this will never index every single word on every single page unless every single word is on a MySQL database. If you have hard coded XHTML, this search will be useless. Your options are really limited.

You only have these two options. Google custom search has more features. But the MySQL are totally customizable but only search what’s in the database. That’s the tradeoff.

Let me bring up the code for the LIKE type of search. That’s a MySQL search. In my folder in the account there is the SQL search folder. You can check out the code there. Go to index.php and open that in your text editor or just look on the screen. You’ll see that I’m connecting to the database at the top. I’m including two libraries. One has all the information about connecting to the database. The other one has all the tools we use to sanitize user data. That’s from yesterday’s example.

Then we look to see whether a search term has been submitted for in a form field. That means this page has been requested along with data you want to search for. So remember there are two states that this page can run in. The first time you load it and haven’t done anything, that’s the default state. There’s no search term that’s submitted yet.

The second state is when you enter a search term and click “submit.” That reloads the page but has the request for the search term. This is then sanitized. Remember from yesterday how we sanitized the code. This is how you do it. [On screen.] You’re sanitizing against HTML and SQL. You can check that from yesterday’s example.

Then we ask if there’s a search term actually submitted. One state there is a search term; one state there is not yet a search term. If there was a search term, we create these two SQL queries. The first query says get all the fields from the blog post table where the title of that blog post — the title is a field in the database — where the title is LIKE that variable name.

Whatever the user entered in the form, if the title is like that, it’ll show up in our results. I’m surrounding the search term word with % signs which indicate wild cards. That means the search term doesn’t have to be a full word. If I search for “sad,” it would match not only “sad” but also “sadness,” “unsad,” etc. That’s because there’s a wild card before and after the search term. If I only had a wild card after the search term, it would only match “sadness,” etc. Wild cards match terms.

So it’s searching all the fields in the table of blog posts where the title field is like that search term. That’s the command. It’s just like this SQL commands that get all the rows in a table that’s WHERE 1. That gets all the blog posts. This command limits the results.

Then we make another variable. I want to search more than one field. I want to search the title of the post as well as the body. I want to search the body field, too. So I say select all the fields from that table again. This time I say where the message is like that search term. It’s the same query but searching a different field.

Then I can run these two together by saying run that query and then union (which joins the two queries together) the second query. This is the final SQL command we run. It’s the entire first query, union, and the entire second query. We can run two queries at once and the results are sent back together.

We get the results. We put them into an array called “posts.” Then we include a view which is the HTML file that displays the results in my post. The view goes through the array and outputs the results row by row.

We can look at that. It’s a simple file. There’s a regular HTML file. It doesn’t have anything especially interesting in it except for that loop. [On screen.] If there was a search term, it says you searched for whatever the search term you entered back.

And this is the loop that goes through each row of the array we created of results. It then outputs a row in this table. [On screen.] I’m flying through this quickly. I’m scrolling up and down, but I want you to get the idea that we’re doing a search by running a query which is a series of two queries joined by the union command. We put it in an array and then spit it out in an HTML code.

If you’re interested in this, I’ll come around and help individually. So that’s all I’ll show for this example.

The other example is almost identical with slightly different queries. So instead of searching all the titles with the like search term, we’re going to search multiple fields with one search query. That’s the only big difference.

That’s it for this example. If you’re interested in this for your site, I’ll come around and help you set it up.

The next example I want to go through is the next post down on my blog. It’s about spiffing up the browser address bar with favicons and Fancy URLs. A favicon is the little image that shows up next to your site. If you go to any major site, like the New York Times, they put the little “T” up at the top. A lot of sites have this. It’s a nice addition. There’s no reason you can’t have that, too, so I recommend you have it up there.

So this post tells you how to do that. Click on the “what is a favicon.” There’s a post about that topic. The image needs to be 16×16 pixels. That’s a constrained space. Let’s look at an example of that. I’m going to pop open Photoshop to show you how to start the process.

Go to All Programs. Photoshop should be there. I’ll give you a second to do that. That’s Photoshop and how it starts out. There’s nothing on the screen. When you first create any image is go “file” and “new” like any other program.

This page asks you how big you want your image to be. So we want our image to be 16×16 pixels. So set the width and height to 16 and make sure that the size is pixels instead of inches. Choose transparent for the background. That’s probably the best option.

We have a 16×16 transparent image set up now. We click “ok” and that pops a box which is your space to work in. You can go to “view” and zoom in. Control-plus does the same thing. It might help to view a bigger size. This is where you create a favicon. Maybe I just want some text. I can select the T icon on the right-hand panel. This allows you to write text.

How many of you are familiar with Photoshop? Most of you have seen some of this. I’ll run through the very basics. You select the T to write text. There are different options. You can select the square to create a box. You can also use other shapes by holding down when you click the square.

Right now we’ll just do text. I click on the T. I click and hold and draw the space I want my text to be in. I’ll select the whole space. So now you have your text container created. Now you can write something. I’ll just write a word. I’ll write O. It doesn’t show up very well. It’s a pale blue because my foreground color is pale blue. Someone else using this program set this as pale blue.

So I’m going to change my foreground color to black. There’s a shortcut to set the foreground as black and the background as white on the palette. So I’ll click that and rewrite O. I’m just going to put an O and a P. That didn’t fit. We have limited space.

I’ll move the O to the center. You can just click off of it and click any other tool. That will select your text. Clicking any other tool makes it so you’re no longer typing text. The icon with the arrow is for moving things on the page. So I can select that arrow with the crosshair next to it and move the O around somewhere on the page.

I won’t go into any more design other than just typing text for now. But there’s a lot more you can do in Photoshop. We just can’t cover all that in this class. This isn’t the most exciting logo, but you can play with your own. There are a lot of tutorials online for this sort of thing. I’ll save it.

I go to File, Save As, save it in my folder as favicon and save it as a type PNG. PNG is a standard format for images on the Web. There are three formats that work on all browsers. There’s PNG, which is becoming the industry standard. There’s JPG, which is for more realistic photos. And then there’s the crude animation or graphic design format which is GIF. Those are images you made from scratch.

They each have different compression mechanisms by compressing the data. The JPG compresses so photos look better. The GIF format isn’t so good for photos. PNG is actually good for both types of images. That’s why it’s becoming more the standard.

I’ll save it as thefavicon.png. You don’t want it to be interlaced. So click ok. Then we have a 16×16 PNG image file. The browser doesn’t use PNG files for favicons. So we have to convert that into a format the browser understands.

So go to my blog. There’s a link to a page that someone made that you can upload your image file and it will convert it to ICO file. Upload the image you created by clicking on the favicon generator page. Then click “create icon.” They give us a preview down here. This is my O. Hopefully you will make something more interesting.

I can click the download button and save it to my computer. It’s now in the correct format. We can click ok. We save it. And now it’s saved to my desktop.

Then go to back to my blog post and make sure you have on your code and HTML a code that looks like what I’ve highlighted. This is just like a style sheet. You tell it the relationship. This is another link tag. But you say the relationship is a shortcut icon. That’s what they call this favicons. You give it the location of the file. So we’ll add that file to the server.

I’ll put this at the root folder since this is the favicon for [server name deleted for security]. You find where you downloaded the file, upload it to the server folder. In this case I upload to the root folder.

I’ll put it in the SQL search folder. That’s the example I’ll use. So I’ll drag it into the folder and click copy. Now it has the favicon in the folder. I’ll include the link tag. Go to the HTML in that folder.

That’s not my HTML file … [On screen.] … so in the header you want to do another copy and paste job from my blog. Copy this whole line and paste the link tag in your own head. So as long as the favicon is the root it should show up. So I’ll save that and re-upload it to the server.

Now it should show up. Web browser … [On screen.] … there you go!

Up at the top we have that little icon. So I used this as an example in the search. I had this file already. You can do this with any HTML file and it’ll load the icon. It doesn’t HAVE to be special. It doesn’t have to be a fancy icon. It’ll give you more of a slick look. This doesn’t have a slick look. [Joke/joking.] Any questions about that? Anyone have problems getting that done?

Student: I can’t get it to load

Professor: Let’s go through step by step.

Student: Go back to Photoshop. My problem is that I want to set it to be transparent

Professor: This is my default view. Go to “Window” and click “layers” they say they’re selected but they don’t show up on my screen. It’s on top there [On screen.] No that’s not right. Let me figure out what’s wrong here. [professor programing.] I have two monitors that hid one. This is what yours looks like right?

You can go to window and select which one you want to view. I want to look at “Layers.” That shows you can have multiple layers in Photoshop. If you want to make a background make a new layer. You can create a new layer here. There’s a folder … like this [On screen.] like a new page. There’s an icon that should say “create new layer” when you mouse over it. Then you fill the layer with the color black.

Student: That’s what I did.

Professor: So you see the gradient? If you hold down on that you see there’s another option, the paint bucket, that’s what you want. The foreground – that’s the color you want your icon. So if you click on the color pallet you’ll see. If I want the background red, I’ll “Fill” it with the color red. That covered the text. The text is still there but in another layer. So I click and drag the text to superimpose it on the background.

Student: My text is on the left and yours is centered.

Professor: If you have the text selected – click the move button and you can move the text where you want.

Student: Ok.

Professor: So let me walk through the setup in case your setup isn’t showing up. First, make sure in your HTML code you have this [On screen.] thing in the code. This is critical. If it’s not there it won’t show up.

So you want to make sure that EXACT code is copied from my blog and put in your style sheets. So that’s the first step to make sure the code is accurate. Then make sure that you understand the favicon is in the same folder as the HTML file. So look for the favicon. If it’s NOT in the same icon in the server it won’t show up. So go to “file Manager” and make sure the favicon.ico file is in the root folder for this project. That’s the second step.

Make sure first that your HTML has the file in it is the first step. If these two things are correct, when you view that in the browser it should always show up unless there’s a problem with the file or your HTML code. So check those two things now. There’s not much room for error. If the file is converted to an ICO file it should be ok.

Student: Mine doesn’t convert.

Professor: I’ll go through that. If you don’t have Photoshop you can still create icons by using this link. You go to image to create icon from selection. Make sure you select PNG file. And click create icon

Student: It gives an error.

Professor: Be careful. I’m not sure but when you’re in Photoshop you save your file as and it’s easy to save it as PNG but unless you tell it to read PNG in the format drop down you may have problems.

Maybe that’s why it says that it doesn’t understand the file because you didn’t tell Photoshop to read the type of format it is in the save as menu.

[Bell ringing]

Professor: Don’t worry. We’ll burn with the building. [Joke/joking.]

So if you did save that correctly it should work.

So we go now to the blog again. Where is it? I’ll let you play with that on your own. I just want to bring up fancy URL’s. Any questions about the favicon?

The fancy URL’s are what you see — remember we tried to find sites that had dynamic content? Remember how we talked about how PHP indicates the same header but the content is different from day to day? I used Amazon.com as an example of templates. I clicked on “Books.” If I click on any of these books here like the “Shanghai Girls Novel” you see it says Amazon.com/gp/product and the product identifier. I’m guessing this file doesn’t really exist on their site.

This is a Fancy URL that hides the fact that there is no such file. It uses this as a unique identifier that loads content. Most sites won’t show you the actual file names. This makes it seems like there are separate HTML files for each product. Amazon has millions of products so there’s no way there’s a separate file for each product. I’m assuming this is a fancy URL’s or a “fake” URL.

Let’s see another example. Anyone have a favorite blog?

Student: Engadget.

Professor: Ok. That’s a tech blog. All blogs are similar relatively. If you click on the articles like “Rubik cube” you’ll see it says 2009/23/rubix/ … that’s the title of the article in the URL. That makes it easy for search engines to index this site to say “this page is about the Rubik.” If the URL had some number in it it would be harder for the search engine to understand that this page is about the Rubik.

So fancy URL’s are useful not only for you to see what the page is about by name but also for search engines. The search engine understanding what the page is about is the same as you understanding what the page is about. I don’t think there’s a folder about “Rubik.” It’s unlikely they created that folder.

Student: The header …

Professor: Header?

Student: In the header there’s an article and they have something that …

Professor: It’s not a real URL. Exactly. That’s the point. So we can go to the example on my blog. Go to the blog. There’s a post here and a link to a post to read what I mean by fancy URL’s and how to create them. There’s a description of the technology and how to make them. You can go through that post on your own.

If we click “example of fancy URL’s ” That example pulls data from the table we made with the animals in it. Remember that table? We selected those rows and showed them. This does the same thing. But the URL is class 9/mod/animals. This is the example folder for this example. If you go to the class 9/mod_rewrite folder you see there’s no such folder called “Animals.” That folder doesn’t exist even though it’s shown here.

Since we have access to the server you see there’s no such folder. I just wanted to make this URL look pretty and interesting. If this were a shorter address it may look like [server name deleted for security]/animals. You can make a fake URL anywhere but to keep this example short I put it at the end.

I’ll now show you an XHTML access file. It’s sometimes hidden. Any file with a dot in it … I’ll show you what is in these file. Dot HTML access. This is code for mod_rewrite. This is technology that is used on Apache servers which is the software we use to respond for different websites. Most websites use Apache to handle requests for certain websites and sends the data back to the browser.

This is turning on the future called mod_rewrite which is a module within a patch. This is just a technicality to how to deal with links. You copy and paste these two lines and don’t have to change them in rewriting. The second thing I’m doing is saying “all URL’s are going to start with this backslash/2009/mod_rewrite” [On screen.] That’s the URL we’re dealing with.

We’re not dealing with any other URL’s in other folders. The pound signs are comments so you can leave notes for yourself. The next line of code says “if the user requests the folder “animals” send them to PHP.”

This carat sign (^) says that’s the beginning of the folder name. And the dollar sign ($) means that’s the end. This is a regular expression which only matches an exact piece of text. It only matches “animals/” If I didn’t have the carat in the beginning, it could match words other than animals. So I would recommend using the carat at the beginning and the dollar sign at the end. That ensures the right match.

So this says to match “animals/,” and instead of responding with the contents of that folder and getting an error, send the browser back to the contents of this file at index.php. So far so good?

Any questions?

Each of these links I’ve set up. I’ll click on lion. Each of these links is taken from a row in the database. All the rows in the database have unique identifiers for each animal. So I’ve linked not to some meaningful URL but to this “animals/” and then the ID. There’s no animals file. So this is a totally fake URL. But it’s useful for us and we link it up to the one animal. I’m getting the information of what animal is being clicked on even though I’m not using the long query string.

Behind the scenes, the query string is being attached the URL but it’s hidden from the user. Does that concept make sense? That’s the idea. So this second rule is responsible for that number system.

So if the user is requesting the word “animal/,” and this is any number, this indicates a regular expression code to match any number. It matches any number in the space. Then there’s the end. There’s no text after the number. So this matches any animal/ and any integer. So it responds with the contents from index.php and the query string of the animal matching that same number. So this looks like a PHP variable. So this is a regular expressions way of matching this piece of text, in this case a number, and using that text for this position.

This takes you from what you requested, meaning you requested a folder named “animals/ plus some number” and then gives you whatever the response would have been if you had requested it in index.php. We’re converting this fake URL into a URL that looks like animal_id=2. So this makes it look prettier. You don’t have all the other technical looking stuff that exposes the internal workings of your site. That would make it easier for people to hack into your site. You might not want people to know you’re running PHP code.

If you just say “animal-2,” they can’t tell what language you’re using. That adds another layer of difficulty for hacking. So do that as much as possible on your sites. These two rules will cover most cases that you may have for different URLs that your system might be expecting. I can help you set that up.

It’s not critical for a site, but it’s a nice extra feature.

Student: Does that only work with Apache?

Professor: The mod rewrite library only works with Apache. Most servers on the web are Linux or Unix servers. If you have a Windows ASP IS [sp?] site, it won’t work on that.

That’s it for this example. Why don’t we take a 10-minute break? It’s 10:30. Since today’s the second to last day, we’ll actually take a 10:30 break. [Class laughing.]

[Break.]

[Bells ringing.]

Professor: They’re testing the system in the building today, so this is nothing to worry about.

Student: What were they doing the other days?

Professor: Apparently the system isn’t working yet.

Speaker: These inspections . . .

Professor: It might go for a while? They have an inspector in the building. So this will be on for a while to see if it works. We’ll just have to continue with that under these hazardous conditions. [Joke/joking.] We’re still waiting for David. So we’ll go in a few more minutes.

Let’s move back to the examples I’ll show you today. I just want to get you into this folder on my server called Class9 so we can continue with examples that aren’t as easily found on my blog.

Go to the blog to start with and on the right. As I mentioned, all the blog posts are categorized. I’m trying to keep them organized and categorized according to topic. RSS is one I want to look at as well as AJAX. Before we do that I want to show you something related to JavaScript which is how to put audio or video onto your pages. Some of you are interested in this. There’s an example in the Class 9 folder called Media_ player. That has two examples of putting media files in your HTML documents. Let’s go through that example.

Go to the browser [On screen.] you get to this page that has text with the media player. I made this page the full width. What I’m showing here is how to put on a popular media player. There are third-party libraries that you can buy or use free versions. This is a popular free version called the JW FLV media player. This is using Flash which is an animated media file which handles media files in a more consistent way. So if you have a window’s computer your computer won’t play QuickTime files. So this Flash file supports more media files than your default does. Almost anything on the web uses Flash to make sure they can show the media to as many users as possible. Almost everyone has Flash so they can guarantee they’re reaching as many people as possible.

There’s a link here to that player. I’ll show you the set up but there’s more information. This has an audio file. We can’t hear it but if you click play it plays back a file

Student: Is the volume muted?

Professor: Mine’s not. I have speakers but I’m not sure they’re plugged in. It’s playing, trust me. So we’ll assume that’s playing. You see it’s counting the seconds so it indicates it’s working. This media player has a customized tool bar. You can customize these buttons. The website has instructions to make the tool bar suite your needs.

There are two example files related to this file. The first uses an “embed tag.” It’s built to include other types of programs in your web page — in this case Flash, but you can use other files too. Most of the time it’s used for Flash but can be used for other things. The other version of the file — you don’t put the embed tag – you use a JavaScript function that automatically puts the tag on your page. This is the proper way to embed. I think there was a patent dispute and they patented the technology that when you first open the page it plays so that anyone using it has to pay a licensing fee. This is no longer is considered to be violating the patent to play the file when you open the website. The official website of the JavaScript function is on the website. This is the one I’m showing you. All I’m doing really is writing an embed tag.

The embed version – the end result of the JavaScript will be similar to this. It just puts the embed tag here to get the application to play. I won’t focus on this. I want to focus on the JavaScript version but this is just an example of what the JavaScript version does (Embedding).

This is called the SWFObject example. That’s the name of the JavaScript library. Here [On screen.] you’ll see that we include a script like in JQuery. With the SWFObject script we want to include that script in the head also. So we include a tag in the header. You just use this the way it’s meant to be used and you don’t actually have to see how this is coded unless you’re interested in JavaScript. It’s object orientated so it’s meant to be used without really knowing how it’s coded.

Right before the body we create in the JavaScript section a new variable called “SO.” We’re creating an object from this — if you’re interested in knowing what that means it’s not important but it’s on the blog. The first thing is the location of the file that is this Flash file that does the video. It’s called Media player.swf. It lives in the same file as the XHTML file. This is the flash application that tells the location of the file. This is like an image. You say where the image is found. This is similar.

The second thing is a name you want to give to your media player unless you want to reference it in your JavaScript code somewhere else. These are the width settings. I’m saying take the 100% width. This is the height. 20 pixels high. I can’t remember what the last one is. This is all about sizing.

Student: It’ll be long and narrow

Professor: Yes. I’m not showing a video. It’s an audio file. I can remove that top so it’s JUST the tool bar without any of the black stuff. If I made it bigger, 520 tall for example. You upload that … [On screen.] … so if you want a video to play that is this large you increase the height. We don’t have video in the file so I decreased it. Let’s see what happens when we make it 10.

Looks like it cuts off a bit at the top. Play around with the numbers. I’ll leave it at 20 for now. So that’s HOW you control the size of the object. The parameters are — you copy and paste the code except the width and height. This code is going to be the same. But I recommend you use the same file name and in the same folder. Change the height and width to the size you want. I’m not sure what the last line is but it’s not necessary to change it.

The second line of code creates a parameter for the object saying “this is the audio/video file we want to load.” So first it runs the Flash application then the file we want to run. The file parameter references the file. Remember I discussed URL and coding. You have to get rid of special characters. This is the code for colon slash slash (://). Remember to not take that out in the example and replace the www.ms …. with your site. That’s the part you change.

Student: Can you put a file name there?

Professor: Sure. If we have a local file I can replace this with media/example_video1.mp4 [On screen.] That’s the video file. That’s my way to tell it to load the file media/mp4. The other parameter mp=true tells it to play. If I set it to false it wouldn’t play. Let me check that the file is on the server. I’ll update this. This is video so I’ll change the height to 100 pixels. It has video now, not just audio. So I want the height to be taller.

So it’s loading. See it has the icon for loading? I think it’s a large file so it’s loading that file now.

Still doing loading …. it’s transferring data at the bottom [On screen.]

It’s taking some time. But this SHOULD load the video. I may have crashed my computer.

Depending on how big the file is depends on the time. On a professional video site you want to do “progressive downloading” where you would buy a video player that allows you to play the video and not have to download the whole thing. It plays a little at a time while it’s downloading. This is the limitation of using a free software.

Student: Where did you put the video?

Professor: In the code.

Student: Link?

Professor: Yes. I told it to look in the folder “media/file example”

Student: The media player needs to be in the folder too?

Professor: Yes. When you run the code you create the object and supply the SWF. So I downloaded this video from the Internet so maybe something’s wrong with it. Change the height of the player in video — that’s the only difference from audio to video.

Ok. So that’s a popular player called the JW FLV player. That’s it. Make sure you have the file in the folder, set the height and width, tell it which file to load, follow the coding system in the example.

That’s all I want to show you about this. You’ll get the hang of it. It’s pretty straight forward. I recommend you try it out. Let’s move onto RSS. Go back to the blog in the category section click “RSS.” I mentioned RSS the other day. It’s the technology that blog readers like Google Reader use that shows you the latest information — they read RSS code not HTML code. Most blogs publish RSS versions of the site.

Just like this is the HTML version of the site, I can see the RSS version by clicking on the orange icon. It gives me several varieties of RSS possibilities to view. It doesn’t matter which one you pick.

So now we have the RSS view of the same site. There’s one in HTML and one in RSS. This is what the RSS one looks like in the browser. It’s meant to be viewed in a blog aggregator like Google Reader. There are many pieces of software that does the same thing.

So now I can see all of the posts of all of your blogs put into one place. That’s a blog aggregator. This works because Google Reader is going to each of your blogs and looking for this RSS version of the site. If it finds it, it downloads the information from the RSS version and converts it into HTML that I see on this page.

Behind the scenes, Google Reader is sending out requests to our server for the RSS version of each of our sites and converting it into HTML. So that’s the technology behind the scenes.

We have access to a free library. I’m using mostly free libraries because you can practice on them. This free library does the same thing. We go through this RSS category link and there’s a post about XML. You don’t have to read it, but it’s interesting.

I’ll skip to the second post down which is simplifying an RSS Parser for library for PHP. This is how to do what Google Reader does for your own pages.

This has a description of how to SimplePie. There’s an example of code which I’ll pull up right now. It’s in the folder simplepie. That’s in Class 9/simplepie. The first thing to notice is there’s the media player.swf file in there. That’s the same file as the Flash player. An RSS feed, which is the RSS version of any website, may have attachments for each article or blog post, etc. Those attachments in a podcast would be audio files. Let me bring up an RSS feed for a podcast.

There’s a Science Friday podcast. This is the Science Friday podcast. You can view it in the browser. This is what it looks like. It has a title for each post. It only has one post for this past week. It has a description. It has a link and a media file attachment.

It has an MP3 that’s linked to this podcast. If you do load up a podcast in your RSS reader using SimplePie, it displays the podcast in the browser using the same Flash application.

I’ll grab the URL. You see what this page looks like. I’ll copy that URL and go back to our example file in the SimplePie folder. I enter in this RSS feed that it’s found and click enter. It has now taken the RSS feed and converted it into a simple HTML. But it puts the attachment in the FLV video audio player. So it’s running that attachment to the Flash player. Now I can play that podcast.

So this is how to get content from one site into your own site. Questions about the concepts here?

I’ll go through the code of how this works. This is a library called SimplePie that removes the details of how that works. It hides the inner workings of how to get this information. We just have to know how to call the right functions from the right places to get the information on our pages.

I just want to give you the idea of how to start these things. If you want them on your sites, I’ll help you with that individually. So go to SimplePie folder. I can open up index.php. The first thing to note is we’re including two files. One file is the SimplePie library, which is looking for it in the same folder. The second file is some way of converting different types of text. It’s necessary to make SimplePie work.

These two lines are necessary to use SimplePie. [On screen.] What this page does now is look for something in the URL, request that’s a feed URL. So whatever I entered in that form is what will be put into that request from the feed URL variable. That’s the form submission process we’ve gone over these last few days.

Then we create a new SimplePie object. None of this code will change on your version so far. We make sure there is a feed URL entered in the form. Make sure they did enter something in that box. Then we tell SimplePie to get that file and set up the inner workings of the SimplePie to access the information. You can copy/paste the code.

Then tell SimplePie to go and get the information. This is all commented in the code. The init function tells it to go get that file. Then we do internal processing of that content in case there are other non-standard characters. It does that automatically. Just copy/paste this entire code.

Then I tell it to include the view which is the HTML template we want to display the results in. Nothing in this code will change if you copy/paste this to your own page. Except maybe you just want to say my site shows the latest headings from newyorktimes.com. So I’m getting this example from a form but you can hard code the last ten headlines from newyorktimes.com. I’ll show you how that works. [On screen.]

Rather than asking someone to enter something in the form, it will load up New York Times latest posts by default. So this loads up the New York Times RSS feed. If you go to newyorktimes.com, the orange icon at the top shows they do have an RSS feed. So my site has gone the to New York Times and grabbed the contents of the file and converted them to HTML on my site. You can then see each of the headlines.

That’s the controller part of things and how to get the contents of the file. Now we move to the presentation aspect. We get the data the same way from a database. Then we hand off that data to a view. It’s the same as a database by looping through each article and outputting the article on the page.

Conceptually, this the reason people create RSS in the first place.

Student: If you wanted multiple sites in there and sort them by groups, how do you do that?

Professor: You would have to run this whole set of code for each feed independently. You would copy/paste the code twice with Feed 1 and Feed 2. They wouldn’t automatically aggregate. You’d have to do some processing of your own to get that to sort the right way. It’s possible, but you’d have to do that on your own.

My setup is feasible for one feed. You can modify it without too much work to do multiple feeds.

The reason people created RSS and why sites use it is that it was meant to make the entire Web into a big database. So you can request rows from a database but actually from another website. So it’s the same concept as asking for rows from a database. Then you use the same techniques for displaying that data.

So we look at the index view.php. That’s the HTML template we fill in with the details of the information we got from the New York Times. This is my code for the form of the information. You might not want a form.

So we check to see if there was an error. If they couldn’t find you URL you wanted and couldn’t download the RSS, that would show up here in a paragraph. I’m calling the error function of that simplifyObject. So that’s the template for how to display an error.

The next thing is making an image tag with a favicon. So I call the feed object to get a favicon function. It gets the file and displays it on the page. You can see the T from the New York Times example on the screen. You can structure your HTML however you want. I’m just showing you how to get different elements out of the feed onto your own page.

So then you can display the title of the feed. This is how I get the title. There’s a get_title function. It returns the title of the website automatically. So that’s what shows up there. [On screen.] I don’t have to do any more code than that.

I also get the link to the home page of the New York Times. If I click the title, it takes me to the relevant New York Times site. That gets the link to the address of the actual New York Times home page. This gets the title of the home page. And this will get the description of the home page. [On screen.] They may not publish a description and that would show up here. Apparently they don’t have a description, but some sites may.

That’s the setup for the actual feed. Now we loop row by row through the latest articles of the New York Times headlines. This should look familiar. This is similar to how to loop through your database rows results. So we’ll do the foreach loop. We’re calling this function getItems which returns an array of the items on the New York Times site.

In the database we had foreach row equals an array. This is the equivalent for RSS to get a list of the items from a website.

So I’ll go through the elements showing up in the template. This is the same bit of code repeated in the RSS feed.

The first thing we output is the title of the article. We call itemGetTitle which outputs the title of the article. The permanent link gets you the link to the article. Item get_date outputs an easy-to-read date. The New York Times is publishing a timestamp. So there’s a hard-to-read number that indicates the daet of that article. So my get command makes it a more readable form.

Here we have the main description of the article. That shows up here under the date. The New York Times doesn’t publish full articles in their RSS feeds. So they want you to click to go to their website. That way they get people to come to their website.

Some sites output the whole article in that content section. It depends on the site. Here we check for an attachment. If there is an attachment, we load the FLV player to output that video or audio. This copies the base code to output the Flash media player if necessary.

We’re checking for the enclosure. If that enclosure exists, it sets the embed tags with the proper variables set up. You don’t have to meddle with it.

Note, there are placeholder images. The placeholder image for an audio or video file is there while the video is loading. You can customize those by changing the image files in your applications. That’s the customization you can do for your own site.

That’s it. We end the loop there. We’re outputting a template for the article content.

Student: You would have to have available in your files a SWF in there just in case?

Professor: If you look in my files, I have the SWF media player.

Student: You would have it there just in case?

Professor: Right. So if there is an audio or video file, it automatically loads the media player. Here’s the SimplePie library. I told my code to look for the SimplePie library in the same folder. If you put SimplePie library-slash, make sure your tell your code what subfolder it’s living in.

So that’s all you need to know in 5 minutes for how to include an RSS file into your own sites. It can be very useful. I made a crude and ugly page. You probably don’t want to display it this way on your own sites.

But you could have just a list of headings or titles of the latest news from CNN or something like that. I just showed you how to include some more details if you wanted to. You can chop out parts of the template you don’t like by showing bits of data you want on your own sites.

Don’t feel like you have to make it look like mine. I’m just showing you how to access information. I’ll move on from this. If you have questions track me down when you look at this on your own.

Next we’ll move onto … I’m throwing some varied things at you today because this is the last day to really expand on these things. I want to show you the AJAX which is a term you may have come across as a web developer.

There’s an AJAX folder and if you go to the blog home page in the category section you’ll see AJAX and a description of some examples. These examples are in the class 9 folder. I’ll pull them up now.

I’m pulling up the simple AJAX example first.

So simple AJAX. AJAX is another way to load one file inside another. I’ll make a request for the folder and put the contents of the file in this data. This snippet2 will put the contents of the file into the current page. That’s what AJAX is. It stands for A. synchrnists JavaScript something … I can’t remember.

[On screen.]

People don’t use XML as much anymore. The information on Wikipedia is there for you to read. I’ll show you a practical way to use AJAX. I click load snippet 1 and 2 and it loads the contents of that file. Something happened to my site … [On screen.]

What happens when I click the link is that it takes the content of the file but you’re not reloading the whole page. You’re getting that information and putting it in the current page. If we look at snippets 1,2,3 – on the server — the actual code — it’s a small fragment of HTML. It’s not the full page like the body, head, etc.

[Fire alarm]

Professor: I’ll try to talk louder.

We have this small section that we want to show up in this box. So don’t include any more than you want to be displayed in the box. Clear? You only load a small section. Not the whole HTML document.

Student: To modify it, do you change the bigger page?

Professor: The outer page, the one that requests, has to have the style sheets to display the results. You can’t rely on CSS that is embedded in this snippet. This is the design page and this is the control page.

So again I’ll show you this loads bits of files from the snippets and puts it in the box. JavaScript is responsible for that request. Now let’s see how the code makes the request for the file. That’s in the index.html file, the main file. And JQuery. So this is again the document ready to make sure the page is ready. This is saying for any A tag with the ID snippets 1 link – when the user clicks that – run this command. This is the event handler we saw previously, the click function. And this is the command for an AJAX request. We tell it here to load snippets 1.html.

When the user clicks that link – once the browser gets that file – put that content in the div.snippet container. I think of it as right to left. Load the file and put the results of the file in this div. This is a JQuery style selector. Takes the ID and puts it in the box at the bottom of the page (results of the file). I could replace the whole body by using a CSS for the entire body. You decide where you put the results. It’s your choice as a designer. Questions?

Does this make sense? It’s a load function. Like any other JQuery function

Student: I looked in the snippet there’s no image there. Snippet 2.

Professor: There’s an image.

Student: There is?

Professor: It’s an image tag with an image from About.com

Student: Ok.

Professor: All the content that shows up will have to be there somewhere. That’s the content of AJAX. I think that’s all

Student: How did you get the first snippet to appear in black and the third to appear in red?

Professor: Good question. The first snippet is black and the second is black with image and the third is red. So let’s see the snippet files themselves. Three is red one. I’m including style in the paragraph. I could have given this a class. Like RED P and then find that that file has a red text.

Student: Ok.

Professor: I wanted to show you that it’s possible to dictate design in the style itself.

So this is repeated for each link – with slightly different files. It repeats the same code.

So to review. You add click with snippet 1 link. When it’s clicked it loads and puts the result in this ID with the ID of snippet retainer. This used to be hard to use before JQuery. This used to be a well paid job, now it’s only one line of code. You can still impress people with it. Not the majority of websites have it. It looks nice to swap out large chunks of your page so you can have a more manageable system for your files. It’s three separate files with bits of text in each. Let’s find an example of AJAX online.

Anyone think of an example? I’m blocked. If I go to Google and do an AJAX example search … [On screen.] I guess W3schools has an example.

You can go through these yourself to see what they say. AJAX for chat. That sounds nice let’s look at that.

It’s more technical. Let’s see if I can find another one. I’m having a hard time finding a good example. New York Times. If I go to the video section and click the thumb nails it’ll make an AJAX request so it swaps content. See how everything changed? The whole section was swapped out with a new video. That’s most likely used with AJAX. So you see things like this everywhere. I would have to poke around for better examples. But this New York Times site uses the same technique. It looks more dynamic and is easy to manage without writing much code.

Uh …. it’s not so easy …. using FireBug we see the CSS or HTML code. But there’s no easy way for the JavaScript code. It’s not as straight forward. I don’t know a good way to do that. Go to view page source and look at the code at the top.

So actually let’s view page source. I’ll do a search for JQuery. Let’s go to CNN.com. Find a JQuery. Many sites do use JQuery but they rename the file so it doesn’t show up. A lot of libraries use JQuery. So that’s the basic idea of AJAX. Let’s use another example where we do more with the content.

That’s the AJAX passing data. So just like when we have a link – you can have a link with a query string or data. We can do the same thing with AJAX. We can request snippets or pass data. This is what this example shows. Let’s open that example in the AJAX passing data folder.

Student: I can’t find the folder. It’s in class 9?

Professor: Yes. There’s simple_Ajax and there’s AJAX.

Student: I had that problem. You just refresh your site.

Professor: In the morning you looked at it you’ll need to refresh. The green circle icon to refresh the contents. WinSCP won’t reload unless you tell it to. So this passing information is what this is about. When we click the data we give it a value — 1,2,3. You give it a number zero. This is a sculpture. I can have image 1 and image 2 and it loads a different set of data depending on what is being supplied. This is the concept of the AJAX passing data folder. If I load the XHTML you see how it works. When you click the link with the ID link 1 we load processing file PHP but attach the query string at the end. I have two different ways to approach this with the same result. Then we put the result in the folder with the ID. That’s the same example from before but we attach the query string in this example.

In case you have a big list of data it may be easier to do the second way. When you click link 2 it loads the file process_data.php. This is how we pass the data in this case. In this bracketed section as a secondary to the load function. We can supply lists of data by separating them with a comma. You specify the names and the value of the field. Same as the query string but using a different way to code it. This passes the image and process ID. That’s how you pass multiple pieces of data. I’ll leave that in there.

So you’ll have a reference for how to do multiple parameters. That last parameter doesn’t do anything in our code, but it’s there as a reference for multiple parameters.

Is this clear? You’ll have to play with it on your own. You load the file and put the results in whatever div you tell it to put the results in. That’s what you think about for AJAX requests.

The next example is taking the same concepts and integrating them with a database. There’s nothing very new here. I’m just putting pieces together that we’ve done separately before.

When I load the page, the JQuery waits for the page to be loaded. Once the page is loaded fully, I make a request for a MySQL PHP page that returns a list of animals. That gets put in this div here. This div is a result of an AJAX query. The returned HTML is a list of animals.

If I enter a new animal, two thing happen. I click submit. First, this makes an AJAX request for a script that adds opossum to the list of animals in the database. That’s done by AJAX. It passes data from this page to the other page. After that has been done, another AJAX request is made to get the updated snippet with the new list of animals. I want to request that information again.

I click to submit and it sends the data to the server. Then it sends another request to the server to get the snippet to show in this section. Hopefully opossum shows up in the bottom. Is that idea clear? We’re adding new data and then refreshing this list.

The code to do that on the JQuery side is exactly the code we saw a second ago. It’s in index.php. I have the document.ready function. The first thing that happens when the document is ready is call a function called updateAnimals. That makes the request to get the list of animals. That’s defined right above. It loads the file process data.php and puts the results in the div with the animal list.

It’s getting something from process data.php and putting it into the div called animalLists. That’s what the process data returns was the big list of animals.

The second thing that happens is we add an event handler for the form. That’s what this chunk is. [On screen.] When someone clicks submit on the form, we are serializing form data. That enters data from the form and puts in the form elements. It converts those elements into a nice looking query string. You can then attach that onto a request.

This is something you can look up on the JQuery site. All you have to do is search for the function serialize. We then make an AJAX post request. I’m doing this very differently. I do that so you can see an alternate way of doing all of this.

I’m making a specific post request to processdata.php. I’m sending it the data we got from the form as well as the function to run when it’s done. It’s sending the form data that we serialized and converted to a long string. We send that script to process_data. Once that’s completed and the browser receives a response from the server, it calls updateAnimals and updates the animals on the page. Then we cancel the form from taking you away from the page.

Then once we take your submission and gotten a response back and updated the list, we remove that word you typed into the form. When I entered the word and clicked submit. The first thing it does is send the form data to the server. The list is updated. Then it requests the updated list. And then it wipes out the word I entered. The text disappears. I told it to make the value of the form field zero. That overwrites whatever I entered in the form.

This is another way of making AJAX requests by using the dot-post function. This is another technique to use the post type of request. This is the way you would supply parameters to that kind of request.

The third parameter is an optional function to call when the request is finished. It gives you more granular control over the request process. You can be really explicit about how the AJAX is working and control it better this way.

That’s the list of examples. I won’t go more into them. You can browse and ask questions as you look at them more. I think that’s all I wanted to show today. This is the core of the class. Everything we covered is what I consider to be the fundamentals of web development. So we’ll work on your projects for the rest of today and the first half of tomorrow.

Any questions so far about anything?

I’m sure you have questions, you can ask me individually. For the rest of the day we’ll work on your projects and get you in shape for your presentations tomorrow. Jack, the teaching assistant, will be here after our lunch break at 1:30. So you can get us to sit down with you and work out any problems or questions so you have something to present for tomorrow.

[Jeremy's question about presentation length.]

Professor: The first half of the day, we’ll be having emergency sessions to fix projects. After lunch at 1:30, we’ll get into the presentations. That gives us three and a half hours to do them. Or is it four and a half hours? Three and a half hours. So that means there are 15 people in the room. I’d say 10 minutes is more than enough time to present your project. That gives us room to have space between the presentations, too.

If it’s a one-page project, then it’ll be less time. But don’t go over 15 minutes. I’m interested in seeing what you did, why you did it, how you did the information architecture at the beginning and how it ended up. I want to know the process you went through as well as any interesting problems that you used techniques to get your site to work. You’re not required to present. So if you don’t want to, that’s fine. I think it’s interesting for us to see each other’s work and see how people are using the same technology for different things. So I’m asking you to present, but it’s up to you and it’s a free form presentation.

So let’s get to your projects until 12:30. Then we’ll have a lunch break.

[Students working.]

Professor: It’s 12:30, so you can take your lunch break. Just be back here by 1:30.

[Lunch break.]

[Students working.]

[End of Class.]

Good morning. I’m just going to bring your attention to some new blog posts.

I think we’re missing one person.

I will give you fifteen or twenty minutes to look these over.

[Repeating for the missing student.] There’s information on the blog I’m asking everyone to read.

Do you want a few more minutes to finish reading? It’s a lot of information to digest. You will give you until 9:30 then I will get into it.

[Students reading]

So I’ll get into a discussion about what you read. Any questions? Top to bottom the latest two postings.

The first is about uploading the files.
Click that link then the page looks like that. So this is an example of how you upload the files you name it then it’s transported to the server and it shows up.

Click browse files then click an image.
Like this button here, then it makes the request and passes the data. This proves that the file is uploaded and the new location. It’s in a folder called files sunset.jpg.

This code is in lowercase. If there were species you would use an underscore.

Then if you click it it takes you to the file. You see where it’s located. It’s on the server now. It’s off the machines and now on the server. This is how that process works

Then the first file is the HTML file. That was the first one you saw. There.

[On screen.]

Remember when you do the file uploading, view page source. The most important thing, is that the form tag has this ink type equals … so the server expects text but this says it’s getting binary form or a condensed form of data. So this warns the server about the data it’ll receive. But if you don’t put that in there it won’t work. So I need to remember this.

Student: If you upload an MP3, …

Professor: It’s the same thing. Let’s try it. So I’ll cut it up. Let’s download an MP3 first. I don’t know where I can get one …

I don’t think there are any on this computer. Well, 50 Cent …

Firefox is blocking this pop up. It’s harder than it seems.

Student: Do RCRD.LBL … [Giving him a new website to try.]

Professor: So I save the file to the hard drive. I’ll put it on the desktop.

I hit cancel!

There. It’s on the desktop. Then go back to the example file. Click upload then I’ll use the MP3. This should work. Click upload.

Student: There’s a way you could …

Professor: It’s more difficult that way, you would have to analyze the file. You don’t know what the file is. You would have to be more strict.

It’s been moved to files/1/ … [On screen.] So it’s there. The file should be there at least. This is the image tag. It’s trying to show it as an image since that’s what the code normally does.

Launch the Quicktime player. So you can upload the MP3 with the same code this says where it lives. But I think the Quicktime player just crashed. So it’s playing the file.

That’s how you upload any file you want to upload. It’s the same code.

Student: So is it different for downloading?

Professor: Yes. Uploading is the complicated part since there are restrictions on the server. But your computer when you go to any website you are downloading. That’s what a computer is meant to do. I can go to any file on the web and it downloads. It just pops up. So downloading is what you are used to doing.

When I click the download button it didn’t know what to do. The browser is not meant to play MP3s.

Back to the code. I’ll pull up the HTML. And NotePad++.

The important points were that you have the ink type section in the form tag. It must be exactly like this for all forms for upload. Then the method must be in post. Post does not stick the information in the address bar. But with a image file, it’s too much information to go in the address bar.

It will try to put all the image information in the address bar. I’ve never tried that before though. I’ll upload something not so big.

Click upload. I must refresh. Make sure the method angle changes to get …. but the browser didn’t even try. So there where built in error checks. The image file information was too big to get in the address bar.

So you have the ink type … the HTML tag, just like the ink type, it’s an input sub-variety and you must remember what it’s called. The name is critical to access the data on the server side. That’s it

The form tag and the input tag are the most important parts. Once it gets uploaded the server tells you where to get it. So let’s go there. That’s next.

So the first thing is this is in the PHP script. We made a post request and passed the data, and now we will store it permanently in a sub folder. This does the dirty work for us. The file has all the stuff to do it for us. It’s complicated but it’s well commented so you can read that if you want. We assume this works then we can just use this file.

So you upload the object. I won’t go into the detail about this but there’s more on the Blog and how you do the upload in PHP.

This is the object called “Uploader.” This has functions only to the object. This is one. It’s called “upload” that’s the upload function to the object. The function definition file is here too if you want to read it. It may not make much sense.

But to initialize the uploader object you need to give it a name attribute. In the HTML you had input type equals file. Name equals upload file. That’s in PHP. It tells you the data you want to upload. Then you name the parameter. It’s just a subfolder on the server. It’s called “files.”

On the blog you also need to be sure it’s writable by the browser. Some browsers don’t have that permission. Right click in WinSCP. On the server side right click. Properties in WinSCP and you see the pop up here. [On screen.]

You want the W checked. Some servers are set up for this or not. But be sure the W is checked. This allows people to write to the folder. It’s not score but that’s how you allow the people to upload files.

Now everyone has permission to upload files.

We initialized that upload object. Then we passed the limit of how big it can be. You could skip that too. That’s optional. That’s the initialization
In the form tag, the subfolder and the max size you can allow.

Then the upload function of the upload. We did all the settings and the initialization now we finish the job. This returns if it worked. This would say true if it ran the code. If it’s false then it skips the section. That’s the nature. If it’s true it runs the first part if it’s not true it runs the second part.

If it’s true it runs these lines. It’s getting access to where the file was moved to on the server. It stores that in the variable pack. Then you go to the success page. That’s what you saw with the upload.

Male Student: I think you changed it to post.

Teacher: I think I did. I can’t remember where the images are on this computer.

I’m going to pick any file. Upload it.

Maybe I didn’t.

Male Student: Process file php twice in a row.

Teacher: You guys are getting good at spotting these things.

It wasn’t an image. That’s why it don’t show up. The file did get uploaded. It was just a text file.

What was I showing you? We redirected from the page that was process file.php. That’s not what comes up in the browser. You are looking at success.php. I process the data and send the browser to another page.

I use that technique often. Two files to process and display. This is really doing an upload process, then passing the user on to another page. In this case it did work so we redirect to the file called success.php.

We did an example how to redirect in PHP Monday. This is how you do it. You say header. In parentheses header is a special function that passes http headers to the browser. You give it the name of the file you want to redirect.

We not only give it the name of the file, which looks like this, we are doing that and passing a query string on the end. This simulates a form of submission.

It says the path of the file equals the variable Path in a URL encoded way. If there is another question mark it will encode that so the browser doesn’t get confused. It will replace the space with a plus sign. It’s how the browser handles URLs without confusing them with the main part of the URL.

If I put another question mark you will eventually confuse the browser with all of these special characters that mean different things to the browser. The question mark means there is data being passed along. You will confuse the browser.

They accept URLs in a URL encoded way. You will see that on the computer, after you upload the file the file slash and file name have been replaced by a file%2f05… that’s because I’m running this URL encoded function on the variable. It puts it in a way that’s it’s friendly to stick up in the URL.

We are passing along the path. This is how we encrypt it to make it work.

We are passing to a file called success.php which looks like this [On overhead.] It’s almost entirely HTML. It’s a success, thanks for uploading your file. It also tells you where the file was uploaded to by outputting the request variable.

The request variable stories the data in an array. We gave it the name. We are also using that in the HTML image tag to be the source of the image tag. We put in the source attribute so the image shows up on the screen. It’s the same with the link.

Click the image. It will take you to the file.

This is a common technique for embedding bits of PHP code in your HTML. It has the source file. You use it where you want to show the image, this case in the image tag.

If this was an image it would have showed up. You can access the file directly by copying and posting the URL or clicking the link.

Let’s continue. That was if it worked. If the upload process was successful. If the function returns false we skip down the to L statement, which, instead of getting the path of the file gets an error message. It looks for an error message. This is built to locate errors and making them accessible.

You get the error and redirect to failure.php and pass along error equals, and the value of the error. You pass along the request you are making.

Failure.php is similar to success.php but it shows you the error message.

If I open up failure.php it says your image failed to upload. It outputs whatever you passed to this page for the request. That’s it.

There’s not a lot of code that’s different, but it’s the linking of these different elements that’s the critical part. How the data gets passed from one page to the next and how it’s uploaded.

Questions so far?

Scale of one to ten, one being easiest, this is?

Male Student: As long as you can cut and paste the code it’s not too bad.

Male Student: I figured that out.

Teacher: You start cutting and pasting, you go further as you go.

Well written code is easier to cut and paste. This code is pretty minimal. That’s indicative of good coding.

Just like JQuery you ran one line for the box. It’s a well written code.

If I open up uploader.php the file does all the hard work. It’s complicated code. It’s different from what we have done before in some ways.

There is a lot of code and a lot of comments so you understand. You don’t have to know any of this code to use this software.

I wrote this code from scratch.

It’s based on things I’ve picked up from php.net and other sites. I put it in a packed format that makes it easy to use for me. I took other people’s codes and put it in.

Male Student: Is all coding in English?

Teacher: I use a theme of Russian outsource. They create variables in Russian.

The character encoding, the letters available to programers is always Latin.

It’s not a good idea to program in other characters. Not all servers will support it.

It’s difficult for non-English speakers to program given that all the languages we run are based on the Latin characters.

They have to learn the letters.

Let’s go to the next bit of the blog post.

Any other questions about this example?

This blog post outlines everything I’ve just said. This is a good read if you are interested in pursuing uploading. This is meant to address some issues you will have in your projects.

If some part of your project is something you don’t know how to approach I will put stuff up on the blog to address your issues.

Sending email. This is directly addressable for those of you sending emails for your projects. Click the link.

You get to a page that has a form. I’m going to send an email. I’m going to call myself Rahm Emmanuel. Rahm@whitehouse.gov. I am going to send it to an address I can pull up quickly, which is a mailinator address. Subject? You are doing a great job, keep teaching web development. Thanks Rahm!

You can spam anyone you want with simple code. This is similar to the uploading example. We had form. We entered it. It said it worked.

If I go to mailinator and check the inbox for the email I used I seem to have gotten an email from Rahm saying I’m doing a great job. The point is you can pretend to be almost anyone by using some simple PHP code.

Sophisticated IT people can tell based on the headers that are you not really Rahm, you are probably spamming.

The average user doesn’t have the know how to figure that out. This is how spam works.

If you don’t have the technological capabilities you don’t know. You can get spam from just about anyone.

The code is only a few lines of code to do that. Let me pull that up. It’s in the email folder. I’m going to pull up the HTML first.

HTML is a simple form. There’s no special requirements. It’s the from. Method equals post. It could be get in this case.

The data gets sent to the file after you click submit. There are a few different fields. One being your name. One being the email address. The other being who you are sending it to. Subject. Then the message.

These are regular form fields. There’s nothing you haven’t seen several times before.

All the real processing happens in the script, which is where the data gets sent to. Let’s check that out.

Processemail.php. This does a simple creation of some variables to hold the data you sent. It looks for the names, emails, subject, etc. It’s collecting the data you submitted along with your request.

Then it puts together headers, like the browser sends headers behind the scenes. There’s a language communication behind the scene. Email has the same concept. Headers behind the scenes indicating who the message is from, who’s CCed on the message, who’s BCCed on the message.

This is the way you assemble the headers necessary for a normal email. You can copy paste.

There’s a from address. The name of who’s it’s from in greater and less than brackets.

If you see the mailinator example, the from is taken from the from header.

The reply to, you can sometimes ask someone to reply to a different address from where you sent it from.

This xmailer header is not required. It helps to avoid being labeled as spam. A spam detector won’t accept the mail from this place.

We are just indicating that it was sent from PHP. We are giving it the version of PHP used to send this email. You can pretend to send it from Outlook or another mail program. I’m being honest here.

You have to try to send it to know if you will be blocked.

We put together the headers in a variable called headers so we can use it later.

This is the command that does all the work. This is a simple PHP built in command called mail. The person you are sending to, subject, headers, etc. That’s it. It will send an email.

After it sends the email you redirect the user to success.php. We are passing along the data of who we sent the email to.

Questions so far?

Male Student: Can attachments be in the headers?

Teacher: It would be a more complicated header. There’s a boundary between the normal header and those related to attachments.

I should probably come up with an example of that at some point. This is general.

So now we send the browser to success.php. If you open up success.php. You see it’s a regular HTML file. You attach the data that you passed along the request and that’s been seen. Then you get the headers.

It comes down to using the mail function. It sets up the variables to call this mail function then the function does all the work.

You tell me! It’s easy! Instead of asking the user, you say here to Jeremy@wherever. If you hard code these the user can’t change them.

That’s what I wrote on the blog was an example like this. If you want a contact page then this is the example I reworked the example. It has the data in the drive already hardcoded. Then in the HTML you would … [On screen.] … take that — you don’t ask who they want to send the email to. Any questions?

Student: For the subject line, could you — in the actual code — do you have to … make a message so when the email is sent, I can tell if it’s from my website?

Professor: You put what they entered with some pre-form thing. Say subject equals from my website dot etc. That leads the word.

So you are in control and my modify them. You are not stuck with the data the user entered. Any questions?

Student: Like if it’s from my website that’s visible in the fields? It’s in the subject fields? It’s visible to all who view the page?

Professor: No. Think about what’s visible to the viewer on your page. What controls what they see? Where is it in the code?

Student: The input field next to subject.

Professor: In the HTML page. Index.html. So they see this when they come to the site the process email has not been submitted. So you would modify something in the index site.

I could say here’s the subject line then add a default value of for that site value = message from website colon … then the default message is in the field. Upload. Then it’s repopulated. The user could delete it but it’s not reliable nor user friendly. I would do it the other way with the PHP script. But that’s another option.

Any text field could have a default value. That’s in default attributes. Any questions?

Now we’ll move on to the question of sanitizing data and that’s not in the blog. You could search it, but it’s not updated search of “sanitize.” The second post down. I changed the sample code. The same concepts but the code in the example is slightly different.

I’ll pull it up. In the folder for class 8 there’s the sanitized folder. That’s the example I’ll show. So when you deal with data entered in the user form, you can’t trust that they haven’t tried to hack you. Most won’t but some do. It’s a surprisingly large number too. Maybe they just read it somewhere and tried it but I see it a lot.

You want to avoid HTML code in the message forms or text inputs. You don’t want anyone to write code. Like in a contact form or a blog you created that posts under the header, or a list of animals, etc. but you usually don’t want users entering HTML code.

What this example does, is it does not allow people to submit certain data. It DOES, but it ignores it or codes it so it’s safe. So you remove the malicious bits of code. When you sanitize any of this, this success page is the same process. You get redirected here.

It shows the original and then the sanitized version. You see the difference here. The original, dirty text is here. That’s the user. That’s valid. Then this is the “clean” data. The less thans have been converted. So it’s not functioning HTML. The characters were coded to just be text.

In the browser these look the same since the browser is trained to see it this way. But it’s been coded from HTML to just text.

But if I did this … [On screen.] Someone could try to enter a command. People can do that successfully. There are loopholes. But I click sanitize then you see the original query. Then you see the sanitized version. If you view the source, here’s the original that would’ve been run if you get the PHP to do so, and here’s the sanitized form. Many of the characters are converted into codes. The parentheses were changed to a not valid code. We’ve encrypted them to not be valid code. That’s the sanitized function which works for different codes too. It elements those harmful characters.

Any questions about sanitizing?

If I stored this I would want to protect my database from evil code so to speak.

That’s in the sanitized folder. The first page with all projects are the index.html page. This is a regular HTML page like the last ones it’s just a form with a text area field.

The form submits the data to process data.php. It sends in the post way behind the scenes. When someone entries this field it gets the name and data attached to it.

Processdata.php is the script on the server side doing the sanitizing. So with the upload example I have sanitze.class.php. You just have to know how to use it. If you want to see the code you can check in there. This is back to who writes this? It’s a combination of mine and others thrown together. There’s no originality here. I stole a lot of this. It’s linked through my code too.

These are the original people who wrote it. I repackaged the code for me to be more helpful with this class.

First, you get the dirty data, or the raw data from the form. That’s in the request “data” since it’s in the name in the form field.
This is just the notes for how to use the function. Then you decide what languages you want to protect against. Like prevent to remove characters with HTML. This is the list of the languages you could prevent the characters from being exposed.

Paranoid will clean out the characters of the text. That clans out the special characters.

Sometimes you want to allow a certain language, but Paranoid is best.

I’ll show you how to combine, is all you do is add the plus sign. These variables interfere [On screen.] You add the numbers. This indicates they are adding, but you don’t need to know that you just see the plus sign then put together the coding you want.

That’s set up and this is the type of sanitizing I want. And you store it in the variable called flags. Then you pass the data and how you want to clean. You store this in “clean data.” You send it through the function.

Then redirect to success.php and pass along the dirty data. Then pass the clean data to another part. It’s the get form here. You separate them with the %. It would automatically do this in some places.

When you get to the results page, at the top on the URL, you see there’s lots of data here. You have both the dirty and clean versions. This success page success.php echoes out the text area. The dirty and clean datas are in these boxes.

I could’ve just echoed to the page directly but it wouldn’t have been as good. If you echo it out that way it’s interpreted as HTML. The tag shows up on the page this way. If you view the source you see the differences.

That would be the first step to anything related to a database. When you store anything in the database from a user you should be paranoid and not let them put special characters in. That’s the general rule with databases.

Questions about this example?

I’m going to move on now to the last folder in this class 8 folder. The blog example. Some of you will be creating blogs for your project or some message board functionality. I want to show you an example of how to approach that problem.

This is a blog example. It doesn’t require someone to log in to setup an account. I don’t think you are ready for that complication. It allows anyone to post a message.

Go to that page. You can click create a new post. This takes you to a form that asks you to fill in the details for a blog post.

I’m going to say, this is the second post. You’ll see that it shows up on the main page after I click submit.

I’m entering in some data. I click submit. It does something with that post. Magically it shows up on the page.

I have these HTML posing that are relatively static and show you content.

I have the form allowing you to enter data. Clicking submit processes it. Redirects you back to the index where your data will show up.

Let’s go through step by step, how that works. Questions about the flow?

I’ve also included here the edit and delete links that allow you to edit and delete any post. Anyone on the web can edit any of these posts now. You probably don’t want that. This is to be thorough with the example.

Remember the MySQL query? We created rows. We updated using the update statement. Deleting with the deleting statement. This is a gateway to the command.

This is a content management system. We are allowing users to manage the content on the site without any code. This is a typical way to do that. I can call this title second post. Click submit. It doesn’t update commands for the second row. It overwrites what was there before.

I formatted the dates to show you how to date the rows. They look a little prettier here.

You can delete. It runs a delete MySQL path on this. Anyone on the web can delete anything on this blog.

Let’s go through that code.

I’m going to start with the index.html. You can see there are several files in here. Let me go through them.

The database folder has the information we are connecting to the database from yesterday.

Index.php. That the blog’s latest posts.

Create.php. Let’s start the index and go step by step.

I have divided this project up into, conceptually, an MVC concept. If you are interested in web development, if you go to the blog and search for MVC. There are several posts related to MVC architecture. This is the most advanced article. It explains the concepts behind the system.

I can show you, but that will be a good reference for reading more about it.

First we connect to the database. We do this with every database page. The last thing is to disconnect from the database.

Here I include MVC, model view controller. This is the controller. It’s the logic of how the page works.

The model would be all of the things related to running queries on the database. Updating, running, etc.

The view is the file that has the view, which is the HTML template we use to display the page. What you see here is the view.

The controller decides what to show you and how to get the information from the model. The model is the direct link to the database. The controller gets the commands from the model. It includes the view, which shows you the data in a nicely formatted way.

When you go in the browser to load your file, you are loading a controller. Index.php is a controller file. That controller file asks the model for a list the of the latest blog posts. It tells the view to display them. The controller issues the logical commands.

Male Student: What is the model?

Teacher: Let’s look at blog_model.php and you will see.

There’s a function here, get all posts, which is the main function we are using. It runs a query to get all posts from the table and put them in an array. It returns that array.

This function, get all posts, runs a select query on the database for all of the blog posts. It loops through each post and puts them in an array as a new element. When it’s done it returns that array.

From the controller, to get the blog posts, it says to run that function and put the results in this thing called posts. The posts now has a list of all the blog posts.

Does that make sense? Assume that this is not quite object oriented coding, but the idea is the same. It is encapsulated. We remove the functionality for the main script. It’s stored in another file. This is just the glue holding together the model in the view. The controller decides what to get and how to show it.

I have included another special thing which detects what view you want to load. A normal view or RSS view? I haven’t gotten into RSS yet. Probably tomorrow or early Friday.

I can say question mark, type equals RSS. It will load an alternate view on the same data. You can have different versions for different readers.

This is a piece of data submitted with a request for the file, in the get request. This code knows to look for that type. To put it in a variable called page type. If you entered the words RSS you get an RSS view file. If you enter no word you get the normal HTML view.

RSS is a different markup language. It’s used for something like Google Reader. Google Reader understands RSS, not HTML. It presents the same data, in a format suitable for Google Reader.

Every blog has a page like this. The way you load my blog is because there’s an RSS on this page.

When you see this orange icon on top it means there’s an alternate view, an RSS view.

Click that. You will be taken to the equivalent of what it created. This is the RSS view of my blog. If you view the source you will see that the page source is like HTML, but it’s not, it’s RSS. It’s the same data, same posts, presented in an alternate markup language. A language that blog readers understand.

There are tags like HTML tags, but they are different. This is also based on XHTML, which is any tag language.

This is another subvariety of XHTML that has a different set of tags. No head tags, body tags, etc., they are different. I will leave that to you to explore.

The point I’m trying to make is that you can apply different views on the same data. You separate the data on a different view.

There are some people who create views just for the iPhone. You can customize the view depending on how you put the presentation for one thing to another.

You can tailor make your site to fit one device or another. It presents it in a slightly different way.

You have alternate views. If I view the file you will see it’s mostly HTML with a 4H loop looping through each post.

If you open the RSS view, it’s the same exact thing, but it’s entirely in RSS code. This is how you would output RSS code like HTML. It’s not a div, but item tag for each blog post.

It’s interesting to go through here on your own. See how they are similar. The tag names are just different. The markup tags are different for the presentation.

I’m focusing on the HTML version. It’s possible to apply different kinds of views to the same data.

The controller gets the connection to the database. Loads the file with the information to access the database and get the data. That’s the model. It’s runs a function that returns a list of all the blog posts then decides which view to use to display the data.

We didn’t say type equals RSS so it will be the standard index_view.php. It’s a normal HTML file. It has a 4H loop down here. For each element in this posts array, this list of blog posts, it’s going to output a div like that. This is the template for each blog post.

It has a title in an H2 tag. The data. The message and links to edit and delete.

This is what I want to focus on. The rest is like what you did yesterday.

These two links link to update.php and delete.php. Look at it in the browser.

If I click edit it takes me to update.php. It also passes along the data saying post ID equals 76. It’ the ID of the blog post I want to edit. If I didn’t have that it wouldn’t know what to edit. It was passed automatically when I clicked that link.

This is explicitly that. It is used for a template. It works the same for any blog post. If there were any blog posts the template would be the same file. It loads different data depending on the ID.

To go back to the update.php is the link. Question mark, post ID is the post. This is number 76. For a different blog post it would be a different number. Same for deleting passing.

Let’s open up update.php. This is the controller for that update screen. This is the update page. What we requested is not the HTML file. It’s update.php which is the controller file and just has PHP code. The logic happens before that. The view is the dummy template. The logic and database processing happens before.

First we connect to the database. Then last is disconnect. Between we include blog model.

We get from the request field the piece of data we sent. We store it in the post id. Then we check to see if there’s something in the request field about the post title if they are empty they’ve been submitted.

This script loads the data to a form then it processes the form. It submits the data to itself. It shows that it’s been posted. Then it calls the update posted and it magically modifies and then redirects to the index. But if a title or message has not been submitted it displays you in edit form. You get the select statement. This takes the id of the post you wanted the data on.

The view is the presentation, HTML. Don’t get bogged down since you have the projects, but I want you to know the flow from page to page. That’s critical. How does the data get passed. I’ll leave the example as is. Then you may explore that code.

Any questions? The rest of the day I want you to devote to the projects and getting the HTML work done today. There are two more days to finish so the HTML should get structured solidly today. So you have 6 hours for that.

If you have issues over this, I would come around but I’ll leave all that on the screen. Any other questions? So get started!

[Students working or taking breaks.]

Don’t forget to take lunch. We’ll break until 2:05.

[Lunch.]

Professor: Good morning, everyone. I’m going to start. Any questions about anything from yesterday? We’ll be covering the same material. I’ll do a refresher this morning for some of the important points you’ll use today. We’ll also be doing some new stuff, so I want to make sure yesterday’s info has sunk in.

Let’s start from the blog. I just posted something we’ll cover later. This is information about managing a database.

Before we go over that, I want to review yesterday’s class. It’s Class 6 with the PHP examples. I’ll run through a couple of these things that will be very important when we’re dealing with databases. I believe towards the bottom there’s a page of data using forms with the get method, the post method, and links. This is critical to databases. That’s how we get data.

So where does data come from? It’s from a form or a link they click or some other trick we use to disguise how we store data or how we actually get the data.

I’ll run through these examples. We’ll use them today, so I want to make sure they make sense to you. We’ll start with the get method. Open that code in WinSCP. Remember to create your own folder for your own files. I’ll download that example from Class 6. That was in the “passing_data” folder.

So I have that open. I have to install Notepad++. So if you haven’t done that already, you should do the same thing. We have Notepad++. We have the files we’ll be dealing with. We have a folder you’ve created with your personal folders in it on your client side. I’ll open up the form_get.html. Let’s bring this example up in the browser.

This was an example where we entered in some data. [On screen.] This is what I got as the output. This page was proving we were sending data from what the user entered on one page to the next page where the information was extracted on the screen. Up at the top was some debugging left over from yesterday, so ignore that.

How did this work? We had this method equals get attribute. That was indicating to send the data up in the top section of the browser where it requests this file. It also adds data after a question mark. That section of the file name is the query string. You’re querying the server to give the file and a response to the data I’m submitting to the server. Anything after a question mark is the query string.

If you look at the data being submitted at the top, you can see it on your own screen, you’ll see the data is broken down to the first name equaling something and the last name equaling something else. There are two bits of information for the first name and the last name. Those are separated by an ampersand. I was saying yesterday that the word “first_name” in the name attribute of the input tag is critical for it being named first_name at the top.

If I named this “email_address” you’ll see email address at the top equals some value. So you have to know what you call this piece of data or you won’t know where to find the data. The name in the query string depends entirely on that input tag. That’s true for all input tags like radio buttons, checkboxes, etc. The name is exactly what that data looks like.

This is one page that’s just a regular XHTML page. I click submit and it submits the data by the “get” method. The next page receives that information. That file was process_data.php. It looks like this. [On screen.] There are three lines of code here. The third line is really just for debugging. The only interesting lines are the first two.

First_name is a variable I create in PHP. We’re setting it equal to the request variable that’s built in. It has all the data submitted to the server with any requests. When you’re loading something in the browser and asking for the file, I’m making a request to the server. Then the server makes a response. As part of my request, I’m saying that I’ve submitted data into the query string.

PHP, being a friendly language, has a built in request variable with all the data you may have submitted along with your request. So for this file I submitted the first and last name. So I know I can look for those two pieces of data in the request string. That’s what I’m doing. I want to look in the request and find the first name data and store it into my own variable called firstName. The same thing applies to the last name. So that’s the end of the PHP. The top section is PHP code. The bottom section is regular HTML except I have two PHP commands embedded in the HTML that prints out the variables for the first and last name.

Any questions?

That’s why you see the data you enter show up there. I mentioned yesterday that you can use one of three different variables that are built in. I can use “get” instead of request. That looks for the requests that are get requests where the method equals get on the form. Or I can look for “post.” That only looks for requests that have been made by the post. Post is a behind-the-scenes method of passing data.

I generally use request because I dislike having to remember the form I use. You just have to be careful not to have two requests with the same name happening at the same time. This form works for most practical purposes. I encourage you to use that. But you should remember that get and post exist that are more specific to the data requests.

This page I have here will accept any form submission and it shows what was put in the first and last name fields. So I have different forms that submit to the same page in different ways. Because this uses the request variable, it shows all the results of the form no matter what kind of request was made.

The other example was the form_post.html which was identical to the get one. But it uses the method equals post as its way of submitting data to the server. You can put in anything to the fields and click “go.” You don’t see the data in the address bar because it’s not a get request. The data has still been sent to the server but it didn’t show up in the address bar. That’s the nature of the post request.

Post requests are useful for larger chunks of data. If you’re uploading an image or video or a large file type to the server, you want to use the post form instead of the get. You don’t want huge amounts of data showing up in the query string of the address. Any questions about that?

That sounds nice but now we’ll get into more complicated stuff. Let me show the last example, which are the links. So this was the third way of passing data from one page to the next. When I click this link, the link has the file name I’m requesting and the data into the query string embedded within it. You can see it in the browser bar. So this link is also submitting data by a get request.

Student: A real-life application would be somebody logs in and then clicks on a link and then they remain logged in?

Professor: That’s more of a cookie example. I’ll show you examples today. If you have a dynamic website with all the same templates for your pages, it’s just one HTML file for every page on the site but loads different content. You then need to indicate to that page what content you want to look at, whether it’s the first page of content, second page, etc. So you pass that request from page 1, 2, 3, etc., in the query string.

Most dynamic sites with dynamic content, you use some kind of link form that’s passing data. There are ways to hide this thing from the user. But the technology is still the same. You may not see the query string but it’s there.

Let’s go back to the list of examples. I want to cover that last one, which we won’t deal with so much today which was passing data using cookies. I want to reiterate that point. It’s in the cookies folder. There was the get cookie and the set cookie page.

Getting a cookie, the page looks for the cookie variable. There’s a $_cookie variable. This looks for one of those. If there was a cookie on the site, you would see the value of that variable. There is no cookie for this site right now.

We can go to the set_cookie page. This script has commands to set a cookie for this site. So this page sets that. It doesn’t do anything else. If we go back to the get cookie page, you’ll see that the text shows up because that’s what’s been stored in the cookie variable. By going to one page on the site, we can store data that’s available for every page on the site. That’s stored semi-permanently in your client side.

We won’t deal with this today very much. I think that’s all the necessary stuff. You’re all familiar with include files from yesterday because you worked on them for half the day. We’ll get into databases now. What is a database? How do you use it? Those are fun things that go along with it all.

We have a database server set up for our class called mysql.[server name delete for security].com. This will be just like how we have a web server and now we have a database server. The credentials you need are the same as for the web server. Your username is [username deleted for security]. And the password is “[password deleted for security]“.

They’re the same credentials from the web server. So once you log in you should see a screen like this. This is a program called “phpMyAdmin.” It’s a software product that administers web bases. So if you want to update a database this is a good tool for that.

So we have first set up a class database called classdb. There are others but we’re not using them. On the left [On screen.] you can see the ones that exist. I’ll introduce the structure of the database. When you log in you see all the databases in the server. So we’ll click into get into classdb. Now you’ll be taken to the database page for THAT specific database.

So now you get to a page that has a list of the tables for the database. So every database server has multiple databases and every database has multiple tables. This is a list of all the tables for this database. There’s a list here on the left for more information for the table. Content is used for adding and deleting tables. If you want to access a table you would use the list on the left like a navigation bar. Let’s say I want to go to the “animals” table. I click that link now I see that table.

So this is a table that has three fields. You see here [On screen.] the field names.

So there are three bits of data in every entry — ID, name, and a created field which is the date that this data was entered. We log all the times that data was entered in the database. I’ll repeat how I got here. First I select the database server by going to mysql.[server name delete for security].com. That’s the first step. Then I select the database I want to administer. In this case, it’s clasdb. Then I select the table in the left tab section here. Then that brings me to a view of the table where the data is and where we’ll be spending our time. So I can browse the data in the table. I click the browse tab and that generates a list of the data that’s entered. You see there are rows of data, an ID and name, and the date it was created.

So this is how data is represented in a database. It’s a table and has rows. Every element is a row of data like an Excel sheet. Think of it as an Excel sheet of data. I can delete individual rows. There’s a duplicate of “alligator.” So I can click the X next to the “alligator” to delete it.

Feel free to delete animals if you want. If you want to edit any animal you can click the “edit” icon next to the row which takes you to an interface so you can modify the data. The ID is 17, name and date. So if I want to edit “striped bass,” that will edit the data. This will be SQL code called the sequel query. Don’t confuse that with the string. Now you see the results from the data.

Student: Is the ID automatic? Like the array has a 1,2,3. Is that the ID?

Professor: You can put it in if you want. But it’s automatic. We’ll set up the tables so they’re automatic. But you can override it if you want. It’s like the arrays.

So I’ll change that back to striped bass.

[On screen.]

Ok, so there are a couple of commands you can run. When you click the browse tab that shows the SQL command. You can run arbitrary SQL commands which allows you to run any command you want.

This is the command to select in the browse section to select all the rows in the section. I can change any of this code. I click “Go” and it returns the list of all the rows.

So another command I can do is “delete.” So if I go back to the list. What’s one you want to delete? Lemur. That has a unique ID. You reference it by the ID, not by the name. The ID is unique and the name could have multiple users. So use the ID for delete or modification.

I say “Delete.” Can you read that? Delete – from – then you give the table name. This is on the blog. Delete from animals where ID = 7. So we tell it to delete something from the table and the conditions for how to figure out which row to delete. That’s the where clause. This is the condition that specifies to delete a row or not. If the row has ID = 7, it’ll delete that row. Make sense? Now we know we’re deleting row 7. You hit “Go” and it asks if you really want to delete it.

Back to browse. You’ll see 7 is gone. So you may notice these aren’t stored in order. ID is not in order. The database has its own way of organizing the information. Don’t assume that the data is in any special order. So we sort the database. Let’s see a few other commands. Let’s say I want to change “Monkey” to another word through the code.

Student: Goldfish.

Professor: Ok. So if you want to change monkey to goldfish, you have to know the ID. So we have to know it’s ROW 4 or ID 4. So we’ll say here .. [On screen.] Update abloomberg_animal SET name = goldfish. This is on the blog. Don’t feel like you have to memorize it. Where ID = 4. So it’ll find row 4 and change the name and update the name to equal goldfish

Student: What’s the advantage for this?

Professor: You’ll be modifying this in the database and these are commands you have to run.

I click “Go” that updates 4 to goldfish. If I browse again …. sometimes it’s slow. So 4 is goldfish. We lost the monkey and gained the goldfish. Let’s insert a new row. I click the = tab again which allows me to run any command I want. The command is “insert.” Insert into given table name.

And here it’s different. You list the fields you want to add data for. So this I just want to add “name” for data. You give the values for the fields. We lost “monkey” right?

So I’ll put lemur. So you say “insert into” then the name. The fields are the columns in the table. The name field is the only one we’re dealing with. Strings are in quotes like in PHP. So I give it the value lemur.

It tells me I inserted one row. It took 0.0228 seconds

Student: Why wouldn’t you just edit the rows. Why wouldn’t you use “browse” and “delete or edit row” on each row? Why use code?

Professor: Same question as Doug’s question. We’ll do this automatically in PHP. So you won’t have your users modify your data. So you’ll have to protect your database and we’ll do this directly in PHP code which will run these commands

Student: Everything in PHP code will show up in the server.

Professor: Right.

Student: You can edit like this?

Professor: Sure. It’s faster to do that but you don’t want everyone to be able to do this

Student: They could delete everything.

Professor: Right. So we deleted a lemur. On page 2 – let’s go to the next page. It must be there somewhere.

There it is. So again it’s NOT in order. You can sort it by any field by clicking the field. Now it’s sorted in ascending order. Lemur is 62 on the next page. Those are basic commands for managing data in the database. That’s known as database CRUD. Programmers have a sense of humor ☺. CRUD stands for Create, Read, Update (modifying data) and Delete. So CRUD is all you’re going to be doing in your database. Questions?

I’ve outlined on the blog some of this stuff. There’s a tutorial for creating a table on the database. We’ll go through that on your homework later. For the assignment we’ll — scroll down to Class 5. This same assignment yesterday we converted it so it’s templates. Now we’ll get those products from a database. So we’ll move up. Rather than create a new page from scratch we’ll use this example. Bear that in mind. So back to this interface.

We’re done with this for now. We’ll move to PHP code.

So again the folder for Class 7 [On screen.] We have a couple of examples. The one we’ll go through now are basic SQL examples. There’s create, read, update, delete files, CRUD. Create has a form. You enter the animal and it stores that data. That answers your question. This is an example. If you had a site where you asked people to enter an animal … if I enter in a name like “Groundhog” I click submit.

Up there it says it inserted a new ID in row 64. Now that we’re the administrators, we can see the animals table. You should see the new number 64 on the second page. There’s groundhog. It’s now entered into the database. I’ll show you that this works with multiple commands.

Let’s say I want to read. This just gets a list of all the rows like the browse tab in the administrative interface. This generates a list of rows. At the bottom you have 64, which is the groundhog.

Update modifies the animals. We’ll learn how to do IDs so users don’t have to know that. I’ll update the groundhog to be something else.

Student: A ferret.

Professor: A ferret. So number 64 will modify the groundhog to be a ferret. It updated the animal. So now you can refresh the admin page and browse. You’ll see that 64 is now a ferret. Let’s delete that so I can prove all this works.

I’ll delete #64. I submit the query. If we refresh the page, ferret should be gone. Someone entered bad data, so I’ll delete “name,” too.

That’s the idea of these examples. I’ll start with the read example and go through each one. Download a copy of that folder for all the Class 7 stuff. Now I’m in Class 7. Go to basic SQL. I’ll open read.php. This is what that file looks like. [On screen.] This is the most basic SQL commands you might want to run. You’re passively reading information.

The first thing that happens is the require statement. You know what that does. It includes one file into another. This is the file that has the information for how to connect to a database. You don’t have to look into this file, but you can if you wanted to. It’s in db_info and a subfolder called db.php. This has the credentials for connecting to the database server. So your web server connects to the database server for data. So your server needs to know which database server you’re using. So these variables hold that credential information.

If you set up your own database on your own server, you have to make sure the credentials match the necessary servers. There are two functions, one to connect to the database and one to disconnect. That’s all in this file. I won’t go through those functions because you don’t really have to read them. But if you’re interested, you can go through them on your own. Go to PHP.net to look up what the functions do.

We can assume that all works. Then run the command to connect to the database. You’re passing the variables that were defined in the other file. There’s the username, password, etc. It gets the variables from the other file and uses the parameters. You don’t have to modify anything but the credentials.

The really interesting part of what I’m trying to show is this query. [On screen.] You’re creating myQuery which is the command you’ll run on the database. Our database server is a MySQL server. MySQL is the free open source version of SQL, which is a Microsoft proprietary product. MySQL is very popular. It takes commands written in SQL. So these are “sequel” commands.

Student: Do you need to have the DB and the read in the same file? Do you have to have both of those in the same file?

Professor: The db.php file? That has to be required into this file.

Student: Here you just have the query.

Professor: I include it in the file at the top. You can think of all those functions being included in this file at the top of the screen. I’m creating the variable myQuery. This is the query we used before to get a list of all the rows in the database. This is just the most basic query you can do. It gets a list of every row. The (select) is to retrieve a list of rows. It could be a list of fields. So I could say just retrieve the name field. “Star” means all the fields. If I wanted two fields, I would separate the names of the fields with a comma.

Recognize that the first area is for which field you want to retrieve. In this case, “star,” means all. If your database isn’t huge with hundreds of fields, you can just repeat all the fields.

Then we have the table name. Select all the fields from this table. Remember that “where” is the conditional that indicates which rows to get. 1 indicates where every table and row matches. So this says to match every single row in the table. The query matches a query versus a row. If I put id=5, that would only look for the row where the ID matches 5. That would only return one row because all the IDs are unique.

Just like in CSS, IDs are unique. It’s the same for variables here. When you say “WHERE 1,” that matches all rows. This is good form.

This is the finding a variable. It’s not doing anything with the variable yet. This now runs the command. [On screen.] This calls a built-in function of PHP called mysql_query. You tell it to run a command and this function automatically does that command. It puts the result of the command into the variable we’re finding called “result.” So far so good?

Result is like a complicated variable. It’s not a simple variable. You have to use special functions to look through the results. You might look through an array or print out the array. You have to use special elements to loop through the result variable. You can think of it like a more complicated version of an array.

So first we want to make sure the command worked and we get something back. That’s what the “if” statement is for. It checks to make sure everything works. This doesn’t mean there’s any data. It’s just the command was successfully run and the database responded.

Then we loop through each row. [On screen.] We talked about while loops. That continues until a condition is no longer true. A while statement takes one parameter which is to check every time you loop. This evaluates to either true, so it continues indefinitely. Or it can be false, which means it never runs because this condition has to be true to run. If we code it true, it runs forever. If we code it false, it never runs.

But if we make it sometimes true, sometimes false, it loops one by one until there are no more rows. Each row goes into a variable called “row” so we can use “row” to refer to that data. It continues only as long as there are more rows in the results. Any questions?

We have a connection to a database being made. We have a query being assembled and stored in a variable. We run the query using a built in mysql_function for PHP and then a looping of the results row by row. There may not be any results, and the loop wouldn’t run.

We know there’s an ID field, name, and created field. So this code is getting that data and storing it to different variables. So the row is a normal array. You might recognize the brackets as being associated to an array because there’s a word there instead of a number. That’s an associative array like we created yesterday. This is exactly the same concept.

You get the ID field of this row array. You’re storing that ID in what I call the variable animalID. AnimalName has the name field. AnimalCreated has the created data. So then I echo out, which is printing out, the data separated by dashes.

This is how you insert one variable by a string. I showed you before by concatenating. That’s how you would have done it yesterday. [On screen.] I recommend you start to do it the way I’ll show you now. It’s more compact. This tells it to insert one variable into this string. You surround the variable with brackets and it inserts the variable. It’s more natural to write it this way.

Every row echoes out each piece of data. At the end of the script, we run the function. That’s it for this example. Any questions?

We’ll do a lot of this kind of stuff. We have to become familiar with the syntax of doing it. That’s the gist of it. You get a list of things and print them out one by one. That’s reading. You’ll eventually attach different conditions to the query. Maybe it’ll be for a particular row or a set of rows. You could use the less than symbol for the most recent rows. For now we’ll just stick with the basics and then eventually get more sophisticated. That’s it for this example.

The next example is creating a row. Let’s open create.php. We’ll bring that up in the browser. [On screen.] The first thing you see is this form. Nothing happens until the user enters data. Down at the bottom you’ll see the HTML document. This is a regular HTML document. It has a form in it. The form uses the get method. So the data shows up in the address bar of the browser. It takes one text field with the animal name. So that’s all you should see when you load the browser. You’ll see the animal name text.

I’ll submit some data. You click submit. The data showed up at top because that’s the form method equal to get. That’s the first thing you do when you come to this page. I’m taking you through the flow of the code. There’s a chunk of code up top. Let’s see what that does.

When you load the page, it includes all the database information. It connects to the database. In the request, it looks for the field “animal_name.” That’s the name we gave the field for “submit.” There are two states that this script is working in. It could be processed when you hadn’t submitted data. Or it could be processed when you had submitted data and it requests a row.

If there is something submitted in animal_name, then and only then it runs the query to insert the data into the database. So the script checks for an animal name every time you come to the page. The first time, you didn’t enter a name. So it didn’t do the query because it was empty.

But if you did submit an animal name, then it’s not empty. It will process the lines of code. Does that flow make sense to you?

If there was an animal name submitted, we create a new query.

We store it in the variable “my Query” which looks like this. Insert in the table name. The fields we want to add data for. And the value we want to put in the fields. You see in the value I have quotes around the value I put in the field then I insert the variable. So the name gets put in this spot. So that replaces “monkey.” Monkey is around quotes because it’s a string, not a number. It looks complicated because you have parentheses – quotes – brackets – but this is what you want in the end.

That’s an insert command it takes the parameters of the data and the fields and values you add in the fields. Then you close the string with a semi colon. Then you run the variable with the select query. The query looks like this line no matter what kind of query. Here we make sure the query works and the database didn’t throw an error. If it works then we do the built in query function that gets the ID of the last inserted ID. That’s the function use. I just concatenate that onto the message. Then you submit the form and you see at the top “inserted new row with ID.”

It’s not a lot of code actually. So run through it on your own

Student: If it is empty then there’s nothing there. If what’s empty?

Professor: The animal name that may or may not have been submitted and put it in a variable called New Animal. So new animal stores that data. We check to see if it’s NOT empty. That’s the exclamation point. The exclamation is a “NOT.” And that’s empty.

Now we look at the update.php. This is really just the same kind of thing. It includes the database and it looks for the ID and name. The ID is stored in a variable called “animal ID” and the name is stored in “animal name.” If they’re NOT empty we run the update and we make sure it worked. If it worked we print out a message, if not we print an error. That’s it for that one. Last but not least is the “delete” which is almost identical. It has an ID and stores it in the variable, makes sure it’s not empty and stores it. Questions? This is all CRUD. It’s database CRUD. It assemblies a query, stores it and runs it.

There’s not much difference in these files. That’s it for these few examples. Let’s take a 10 minute break and come back for more!

[Break]

Professor: So everyone back? Is there someone missing? We’ll wait another 2 minutes.

Student: The projector went out.

Professor: Oh.

So what I want you to do now, we’ll change the structure of the class. Instead of lecturing, I want you to get some hands-on experience. This is a large topic. So I want you to follow some instructions on the blog about creating the table you’ll use to modify the assignment you did yesterday so it’s running from a database.

This is step-by-step instruction for setting up a table in the database. If you go to the assignment yesterday from Class 5 the idea is to have these products pulled from a database and not the array. So make a copy of the files you did yesterday. Go through the latest post which explains how to set up a table. All the details are here but I’ll walk you through it. Once you have the table set up you’ll modify the code from the Read.php to pull a list of the products and display them on the page.

Is that clear?

So I’ll walk you through creating a table and the instructions are here so you can follow along.

To start, we’ll reiterate how we start. It’s mySQL.[server name delete for security].com. You log in. You see the list of databases on the left. You’ll all put your tables into classdb. So click that database. That shows you a list of the tables in the classdb.

So we’ll make a table called your first initial, last name, underscore, products (example: abloomberg_products). It’ll be your own first initial and last name. So start by creating a table. This is the database view that shows all the tables in this particular database.

Go to the bottom of that view. You’ll see this “create new table on database” form. This is where you enter in what the table is called. If you get lost in this interface, there are breadcrumbs up at the top that indicate where you are in the current site. If you want to go back to the top, click back to the server name. That brings you to the root view of all the databases in this database server. Then you select the database you want. Then you can walk your way back to where you wanted to be. Don’t feel like you’re lost.

Go back to the database view where you see all the tables. Go to the bottom of the screen. There’s the section where you enter the name of your database. So enter your first initial, your last name, underscore, and then whatever the table name is. In this case, the table name is “products.” That holds all the products. The number of fields is the number of columns in this table. Every table has an ID and created field. In between those two are whatever relevant tables you want. In this case, we want the title, description, and price of the products. So there will be a total of 5 fields. Click “go.”

It chugs along and you get to a page that looks like this. [On screen.] This is the page you enter in the details of what each field holds. What kind of information will it hold? What are the special properties for each field? This is true of every single table we make until you become an expert, these are the conventions I think are easiest to follow. The first field is ID. The type of data it holds is integer, which is INT. This will hold the number that uniquely identifies this particular row.

If you scroll to the right, it has an extra property in this “extra” field. Select auto_increment. That means the field will be added incrementally. You don’t have to manually enter in 1, 2, 3, etc. It’s automatic. Then click the radio button under the key-looking picture. That indicates this is a primary key. That means this is the unique identifier for every row. We’ll get into more of that stuff after lunch and what that really means.

To reiterate, the ID field for every table always has the same setup. Always called it “id.” Always make the type INT. And always have it set to auto_increment and always have the primary key selected. That’s always true of every table we make.

Another always-true thing is the “created” field is the last field of the table. So call it “created.” This is the date that the field is entered into the database. The type will be TIMESTAMP, which is a way of storing times. You always want to make sure you check the “current_timestamp” box. That tells the server to automatically put the current time in. Whenever you create a new row, it puts the exact date into the field. That’s all you have to do for the “create” field.

These are all outlined on the blog.

The other fields are up to us.

Student: The timestamp is the time for the actual creation? It’s local?

Professor: It’s the time that the database thinks it is. It just needs to be right on the server. We won’t be using this field right now. But it’s a standard I want you to get into the habit of using.

The second field is the title. That will be what stores the title of any product. Leave this as VARCHAR, which means variable character. That means there’s text in it. The maximum number of characters in this field is 255. So just leave that as the maximum. We’ll just say the title of a product won’t be longer than 255 characters. If you wanted it to be longer, you could change it, but for our purposes this is adequate.

The third field is the description. The description may be longer than 255 characters. So don’t use the VARCHAR because it has the 255 limit. We want to use TEXT which is a more expandable way of storing text. It’ll be as big as the text you input. You don’t have to indicate a maximum number of characters.

The fourth field will be the price. Each product has a price. That should be a decimal value. It might be $3.99 or $5.99, etc. That’s usually called a FLOAT in computer terminology. It means you accept decimal points. We put the price as FLOAT and we don’t have to set any length values.

So you have the ID, which is the unique identifier. You have the title, which is up to 255 characters. You have the description, which is as long as we want it to be. The price has the decimal point float. The final field is the timestamp. Any questions?

We just click “save” down on the bottom left. That stores your table into the database. What you see on the screen is the SQL code. You could run that query if you wanted to do it on your own. You don’t need to create tables in PHP code because you do it in the admin base and then use that.

Look on the left column. Your table should show up somewhere there. If you click on the left-hand table, it brings you to the general structure page of your table setup. Make sure everything is correct. The ID is a type INT. The title is VARCHAR. The description is TEXT. The price is FLOAT, etc. Make sure you have current_timestamp and automatic increment set up. This is all on the blog, too.

Down here in the index section, make sure the primary key is on the ID field. So that’s the unique identifier for every row.

Now we have the table set up approximately how we want. Any questions?

Now we integrate this into our PHP code. It’s pretty much set up to accept products. Now we’ll insert a few products manually. Click on the “insert” tab. That brings you to a form where you can manually enter data into this table. By default, it shows you two rows of data. You enter in the title, the description, and price of the two different products. You don’t have to enter in the ID or the “created” fields because those are automatic.

Let’s enter the title of the product. It can be whatever you want to call it. I’ll use a silk handkerchief. Then enter a description. [On screen.] It can be whatever you want. Just put a decimal point price. I’ll put in 3.99. And then repeat that for a second product.

Make two products. Click “go.” The “go” button you want to click is under any of the sections. That “go” button inserts the two rows into the table. You can click either of those buttons. So now you’ve inserted the rows. It gives you feedback that you’ve inserted two rows. The latest ID of the last row is 2. And then you can see the SQL query if you wanted to run that query yourself manually in your code. [On screen.] Generally, we don’t want to run it exactly the same way as it’s coded here, but this gives you an idea of how the SQL language is structured.

Now go to browse. That shows you the list of data in the table. Click the browse tab. You should see that you now have two rows entered into your table. All the fields should be filled. ID is automatically numbered as 1 and 2. That’s auto incrementing. The title field is entered as well as the description and price. Make sure the decimal point is working correctly in the price field.

Now we can read the data and show it in our PHP e-commerce table. Any questions about this before we go to PHP?

I won’t use the framework of the HTML pages we’ve made. I’ll sure you a pure text version of how to get the rows of data and show them on the page. Then you integrate that into your e-commerce assignments.

The first thing we do is make a copy of some code I’ve created. In this case, the read.php is what you’ll want to copy. That is the relevant file for this assignment. Make a copy of that whole file. Save the file in your own folder. I’ll save it in a folder called “ecommerce.”

Create an e-commerce folder in your own folders. Then save this file as index.php. Everyone should have a file index.php in a folder of your own called ecommerce. Then make sure you have the dv.info folder. That has to be in your own project folder, too. So copy and paste that folder from Windows Explorer. So open up Windows Explorer. This is how you browse your files on your hard drive. Go to the folder you created.

Go to the Class 7 basic_sql example folder. Copy the dbinfo and paste that into your own folder. So we need that subfolder in every single folder of our database. Let me show that again.

We start out in myclass7/basic_sql folder. Right-click on dbinfo and click copy. Then navigate to your own folders. Click ecommerce to get into folder. Then right-click and paste that dbinfo folder into your ecommerce folder. You want it to be in whatever folder you’re using for this project. In my class, it’s the class7/ecommerce. That’s where the index.php folder will be. In that folder is the subfolder for ecommerce.

Professor: Set that up now. Should I close the door? [noise outside.] So now … I’ll come help you.

Ok. So you should have now your own indx.php file which is a copy of my read.php file. Mine isn’t highlighted correctly. You have this problem? Not sure what that is.

If I close and open, now the right color code is there. The text editor has some bugs. So now what we’ll do is upload this to the server. Upload it to your OWN folders. Class 7 in my case, ecommerce. [On screen.] now we have an ecommerce folder and your own server folder. Just like for all the other buttons. Now make a new tab and go to [server name delete for security].com [On screen.] You’ll see your subfolders. Click to get to the ecommerce folder. You should see a list of animals. So we copied my example and copied to a subfolder. Let me give you some time to finish. Now we modify it so it reads from your OWN folder not my animal folder. Anyone need help?

So to modify this so it reads from the products table you modify the query. The query is the command that indicates what you want from the database. So if you don’t tell it the proper thing you won’t get what you want. You tell it which table to read from. You select the product table and replace it with your own product table. So this will ask the database to get all the rows and fields of the products table you created earlier. So now we save, re-upload it to the server.

Go to the browser and refresh the page. You should see a list of products. Almost ….

Right. Yes. Good point. So mine shows up blank. It has the ID and created. But the rest of the details are different. So we tell it which fields to look for. It’s looking for the name, not the description and product. So instead of animal ID, let’s say PRODUCT ID. So rename animal to product and the next is “product Title.” That should look for the title field NOT the name field. When we set the table we have ID, price, created field. We don’t have “Name” as a field. It only knows to look for the fields we created. The next is changing “Animal” to “productCreated.”

Student: Lower case?

Professor: Get in the habit of using lower case. So product title is = to row, field title. Created = row and created. Then you want product description. = row description. Copy this template in a variable called “product Description.”

Student: Are we including price?

Professor: I forgot that. We have 5 fields. So let’s make a new variable called productPrice and set that equal to row field price. This row array that we use as you see that’s the row we retrieve from the database. It looks row by row and each row is put in the variable “Row” which is an array that is associated with a field name from the database. It fills in the ID that has the data that’s in the ID field. Same thing with “Title.” This is easy to use. You indicate the row you’re looking for and it retrieves the value for that row.

Now I’ll move to product title, description, and price. So replace animal ID with product ID and animal title with product title and animal created with product created. I’ll add the variable price and description.

Every variable you insert in the echo command needs to be wrapped in curly brackets before and after the variable. So I’ll upload this to the server. If you have trouble with your code you can copy mine.

Ok. Questions so far about the theory of what’s happening?

So let’s load that in the browser. You’ll hopefully see it. Line 24. This says I have an error on line 24. The error gives you SOME indication of where you made the mistake. This is line 24. I actually entered in the number one. Let’s take that out. Typo.

So now I have proven that I can retrieve that data from the database. So it has the ID, title, description, price and created date. Those are all accurately retrieved from the table. You have an error.

Student: It shows the animals still.

Professor: In the code make sure the name of the table is …

Student: I did that.

Professor: Maybe it didn’t upload.

Student: Can I write a query to fix the spelling error in the product description?

Professor: That’s the update.

Student: This is … [helping student]

Professor: You got it. If you want to modify this with PHP code there’s code for updating. So let me show you the loop here that we’re doing.

Again this loop loops row by row of the results that are retrieved from the database. This command loops through each row one by one until there are no more rows. Each one creates a variable and over writes the variable for each row and outputs text associated with each field. That’s the section that outputs data.

If you view page source in the browser, it’s not a valid XHTML. The source looks like this. [On screen.] There’s break tags. But this is not a valid HTML document. So your job is to create a valid XHTML document and use it for your Ecommerce. So rather than outputting the text you want a full XHTML document and position it where it will output the products. So make the output in the right place after you write this in appropriate XHTML. That’s what I want you to do right now.

[Students working.]

Professor: I’ve posted more information on my blog for other posts I had posted previously. So a lot of the information is now on this post in case you want to reference something. There’s an intro to the concepts of the database. What it means to be a database, etc.

Another post that has diagrams for how you create tables, link tables, modify fields. This is a post about select statements. This shows you how to go further into that concept. Debugging. How you figure out your errors. The messages you get for errors aren’t the most intuitive.

Making time stamps explains how to create the data for your rows and making that user friendly. You can make it into a format that says “September 3rd, 1999.” Not just a technical looking time stamp.

Next post is about pagination. You don’t want to display all your data in one list. Sometimes you want them to be manageable for example the first 10 results on one page, the next 10 on the second, etc.

This is a beginning explanation on how you would break up your results into multiple pages. So that’s the latest post for you to read at your leisure. That’s it.

[Students working.]

Professor: Anybody stuck on the assignment? Don’t be afraid to ask for help.

[Students working.]

Professor: It’s 12:50. Let’s take an hour lunch break. I’ll show the relations between two different tables in the relational database. So if you have two sets of data, how do they relate? How do you mark them, etc.? I’ll be discussing that at 2:00.

[Lunch break.]

Good morning. We are going to get started. I hope you had a good weekend.

There are some new blog posts. There’s an explanation of the assignment from last class up here. There are several ways you can solve the JavaScript problem. Where you moused over the product and it gave you information. This is three ways to solve that problem.

These are different ways than some of the things I showed you in class, so I will show you the best way possible to do the assignment. I didn’t expect this of you. But these are better ways.

The next blog post up from that is a description of has to use PHP, which we will learn today. The basics of the PHP language and why you would use it. This has the description of the two things you can do with PHP.

The next post up from that is an explanation of how to use PHP variables, functions and arrays. We have seen these things already in JavaScript. This focuses on the differences. This gives you the syntax for defining an array, variable and function. You do the same things with them that you do in JavaScript.

Above that is the latest post, a list of examples we will be covering today in class.

Every day, from now on, I will give you twenty minutes or so to read through this information to start from a common baseline.

Start reading from the main uses of PHP. I will give you twenty minutes to browse through this.

If you are done move to the next post.

Start there. Go up to more recent posts if you have time.

Sound good?

Feel free to ask questions if you come across something that doesn’t make sense.

I will start going through the actual examples a 9:30. [It is now 9:05]

[Class reading]

Professor: I’ll go through this Any questions? I’ll go through all of it again.

So we’ll start with the main post about the uses of PHP. These are the sides of the same coin. The basins logic and the templating goes together. So we’ll look at this — CNN.com. I used ABC so let’s do that instead. BBC.com. This has more sub sites. Top headlines and get to the news. My point was these sections are all the same.

The first day I said these are shaped like a C shape. It’s templated too so the top and the bottom, with the details, are filled in page to page. So this has variable content then the logic of the site, knows how to put articles up with recommendations. It retrieves it from a database and sticks it here. We’ll look more at this later. But we won’t use databases today.

That’s the idea about the templating.

If you look at eBay, every main site on the database has templating. The top navigation stays about the same. Let’s see if it does. See? The top didn’t change here. So the top is in a external file with a code. Then there rathe other files that fill in the content. So the top is templated and the code is extracted. If they want to add another word, they would just do it to one file then it’s updated on all the other pages.

That’s an important concept. It’s a burden to update all that code on all those pages taking into account human error.

So the NYTimes. This stays the same too. The top section changes a bit. You can make changes though with just one template. The footer is the same page to page too. I assume this is templated and I think they use Word Press on here. So it’s using a blog managed software.

Back to the blog. Now, business logic is about deciding what to put neath template. And how do you get the data from the database.

Then we will mostly focus on the language with coding and PHP. The variables behave similar to JavaScript variables. The code looks the same. It’s not foreign to you. You say the variable name. That’s the name you choose. Then you set it equal to a value. One’s a value then the other is a string. Then you must use quotes. Just be consistent on both sides. All the lines are ended in semicolon. This shouldn’t be foreign.

A big difference the variables have the dollar sign. That’s showing it’s PHP and this is a variable. But you may forget that. Just remember it’s necessary.

The functions in PHP look the same to JavaScript. As far as the structure. Use the word “function” like in JavaScript then the name of the function. It’s not a dollar sign, like in variables.

So you say here’s the function you create then you set the parameters for the function to meet. Then between the opening and the closing bracket is what’s run when you call it. This is command echo … and you say “echo [space.]” Then it prints

Next you do the …. semicolon and run.

Run echo here,

Then a side track. I’ll show you some handy sites with remembering the PHP code and syntax. In CSS and HTML we’ll use a different website.

TIZAG.com. It’s a good site! There’s lots of references for JavaScript but I like it for the PHP the best. So there’s a link to the tutorial on the left. This site has good easy language about PHP and how to write it.

If you scroll down you see on the left are the names we saw in JavaScript. Statements, strings, comments, raising, loops, etc. These are available in PHP.

I do not recommend you do the PHP file tutorials but do use everything above. In the longer class I teach file management. But since we have limited time I won’t do it.
But read the stuff in the top section to learn how to use the language.

One more site. PHP.net. This is the official page and written by the people who wrote it. It’s difficult to navigate. But there are references I’ll make for the site and there are good searches for functions. You had the functions ready for you and so does PHP. It’s easy to forget the syntax. So you can search the functions definitions here.

Like if I search for Echo, I get the documentation on how to use it.

The description may be obscure but there are examples sections. They are real world too the top is the technical then the bottom has straightforward code to see how people use it.

There are several example for each function.

Here’s a easy copy line.

Blog. Those are the PHP reference sites.

One thing to remember is that where in JavaScript you use the + sign for the strings in PHP you use the dot. In PHP it’s for mathematical. To put the strings together you use the dot. But you may forget since you use the plus sign in PHP.

To call a function it’s the same as JavaScript but with parameters here’s how you do that. It shows you here an example. That’s all that section shows you.

And arrays are more important in PHP than in JavaScript. I showed you how to make one in JavaScript but there were no examples. But in PHP you get lists and you must explain these on the page. So you store them and show them. They are more important now.

So I want you to know how to use them to put data in and get it out. These are the basic commands to create an array.

Make the variable name. It must have the dollar sign first. Then you create it by returning this. You copy and paste the code thewy the name in there and you get an array. If you forget how to do the array function just do net and you get it. Get used to using this page since it’s where you would go if you forget how to do something in PHP. But you just use copy paste.

Arrays are lists of things. To access an item in the list. Like item 15 here, an array usually has 15 or more. So the 16th item I’ll store the text at the 16th value in the array. I’ll show you this in code. It will be abstract.

Here’s an example. It’s easy. Start with this command. So between there and here is PHP code. Like HTML had the opening and closing tag, you have something similar here.

This is a PHP file. But we will mangel the PHP code. So you have the opening and closing text here. But if I wrote it outside [On screen.] The server doesn’t understand it. It would print it as text. Everything must be inside.

So Echo — That’s first. This is a PHP program. It echoes the text. I’ll save it in — I’ll make a folder — “hello world.” Then inside that it’s index.PHP. This is the default that’s loaded by the server. So when you save it as PHP it color codes the text. You see if it’s correct too based on the color. It tells you if it’s an echo command. Then if it’s not black then it’s not correct. Upload now, I’ll do it. But you don’t.

I’ll upload “hello world” but don’t copy. We go to class 6/then hello world. The text pops up. This program looks like this then the output is that. [On screen.] You see.

If you PHP source you will see something important. You don’t see any code in there. There’s no HTML or PHP just the text. That’s critical. That’s because when you first go the browser and say I want hello world it uploads the PHP file. It’s processing the request. The server proceeds the request and decades what to do. The server uploads the PHP file and sees the files is dot PHP so based on the name the server is set up to look for the PHP code.

It looks for the extension dot PHP to be processed then sent to the web browser. Then it looks of rathe opening text then removes the code. So … we make the request, then it looks for the PHP code, it evaluates the code then if you output it scripts out the code and puts it with the code. It shows you the rest.

Another example.

If I put an H1 tag here, outside the code, class 6. P Hello World. That’s regular HTML. It’s outside of the PHP section.

You can see the output is the plain text. The server takes it out and shows you the end result. The HTML is left alone. It looks the same way you coded it because the server doesn’t process the HTML. The server doesn’t know this code because it’s client sided. It’s a foreign language. PHP is the language the server understands and processes.

If we call this file, index.html, depending on how the server is set up this may or may not work.

Let’s try it. Some servers are only set up to look for PHP code in dot PHP files. Some servers look in all files.

Female Student: The heading had no tag body and things like that.

Teacher: It’s always necessary, but I’m showing you the bare minimum. For proper HTML you need the heading and body.

The browser is meant to understand really bad code. [Class laughing.] Even if you don’t have all the HTML stuff it will still run it.

If I deleted index.php and replaced it with index.html and view page source, you will see that the server has sent back that code. It’s not set up to look for PHP code in an HTML file.

The server thinks this is just text and sends it back. It doesn’t run any preprocessing on the code.

Remember that PHP is hypertext preprocessor. Somehow they named it PHP. Before the server sends anything back to the browser it preprocesses the code.

This being a dot HTML file doesn’t trigger the preprocessing. The server doesn’t even look for PHP. It’s takes the file and sends it back.

Male Student: PHP and HTML and JavaScript are separate?

You can’t put HTML within the two PHP brackets?

Teacher: For the server that’s the case. If I put H1 in the PHP tag the server will see, if this was a dot PHP file, PHP code and will know that everything is meant to be PHP.

It will run the first line fine and then it will get an error because it’s not valid PHP.

Male Student: But this being an HTML file it would read the class six within the two PHP tags?

Teacher: Yes.

Male Student: It would read it properly because it’s an HTML file.

Teacher: Let’s load it up. I have the PHP file and the HTML tag within the PHP code. Let’s see what happens. I’m going to guess it will be a blank screen.

Not quite. It didn’t show up as H1, that’s for sure.

I think this is now being sent as a whole file to the browser. The browser being client side is looking for HTML code. It sees the open bracket and thinks this is HTML tag. It doesn’t understand what kind of tag it’s supposed to be and just ignores it, basically.

Female Student: You are saying the server knows to process PHP first, are you talking about the [server name deleted for security].com?

Teacher: It’s a physical computer somewhere. It has software to run PHP code built in. Just like we downloaded web software on these.

Female Student: Before it send information on the browser it processes the PHP?

Teacher: We make the request. We are sending a bit of command to a server for a file. Before the server responds will do some internal preprocessing. That’s where PHP comes in.

Let’s rename this back to dot PHP so we can continue with our experiments.

It’s important to remember to call your PHP files dot PHP. That’s lesson number one here.

Second, start to think about how the server will think about your code and how the client will think about your code and realize their are differences.

HTML code needs to be sent to the client. It either needs output in the PHP section, or a totally different part of the page so it’s never evaluated as PHP code.

I can output HTML from the PHP. I can say H1, Hello World with this. That will be sent as text for the server. The browser will see HTML code.

Let’s try that out.

It’s important to think of which language which computer understands. The server only understands PHP, the client only understands HTML.

View source in the browser. It looks as if you just had a file with two HTML tags. We know that’s PHP script. The browser has no idea PHP was run.

Male Student: Can you do JavaScript?

Teacher: Yes, as long as it’s in the output. We will have a normal page of HTML document with some PHP.

Let’s get the whole template for a regular HTML page. I will copy and paste that to my blog.

Everything is categorized on my blog by topic. I’m going to the HTML section. Somewhere in there is the code of the basic page template.

I’m going to copy this whole XHTML outline. I’m going to use that in my code.

We can get away with HTML snipits in the browser, but we want to use full fledged HTML documents.

We have a slight problem. We are going output the tag Hello World outside of the HTML document. We know this is not valid HTML. But the browser will show you this because it’s built to run with that code.

We have another problem here. This is what a PHP error looks like. It will say Parse Error then generally what line the error is on. It’s on line six somewhere.

We go to NotePad++. It’s on this line. This is the problem. If you remember, it looks a lot like this. The server is smart, but not smart enough to know that this is not PHP. It thinks everything here is PHP code.

The server is set up to recognize this as the opening of a PHP document. Some servers will require the words PHP. My server is not set up that way. It allows shortcuts with the two characters.

This is getting confused to the server. It thinks you are trying to run PHP when you are not.

The way around this is to open a PHP tag the proper way and echo that out as the text.

Let’s get rid of the rest of the document.

I have echoed out the confusing part to the server and made it clear this is text we want to print out to the screen, and not a command we want to run.

The browser will never know we had this command. The browser will see the regular XHTML tag.

Let’s upload that to the browser.

View source. This is a blank document.

The browser gets the regular tag. It has no idea we ever wrote PHP code. I will put this as a command. This avoids that fundamental problem.

This will be the outline of every document we do for PHP.

Let’s say I want a template. I would normally have some PHP logic at the top of the page and end the PHP tag.

I can have as many opening and closing PHP tags as I want. I have three now. They will be evaluated as PHP.

You can have multiple opening and closing PHP sections. The server will look at each one. It will evaluate them in order.

Generally, you want one big one at the top. But you may need more than one at some point.

Let’s say I wanted to make the beginnings of a dynamic page. I can say, page title equals Hello Class 6.

That’s going to be a variable called page title that will contain the text, Hello Class 6.

Rather than having this hard coded title, I’m going to output that title. I’m going to say PHP echo title. I intersperse the PHP and HTML code. I also want that in the body.

Male Student: Do you need a semicolon?

Teacher: Thanks. I should always include the semicolon. It will work without it, but you should get in the habit of having it.

I’m going to echo out that title in two places, so you see something on the screen.

This is now almost like a template. This is a template I’m filling in with details from the PHP.

Let’s upload that.

If I view source here it’s nicely formatted HTML. All the PHP has been removed and only the output of the PHP is what you see in the HTML code. The browser never sees the PHP code.

Questions so far?

Female Student: The HTML template needs to be in the PHP file?

Teacher: Yes. To be processed.

Some servers can be set up to run PHP code in a dot HTML file.

Female Student: Why would you do this? You could easily write a simpler HTML file?

Teacher: We are going to start make sites like BBC, for example. You can go to any of the news stories.

This is a template [On overhead.] It has a standard top left nav, bottom nav, etc. This is the title. This is the first article they want you to see. Second. Third. They standardize their format.

Asia Pacific will look almost identical.

This is true of any section. The title of the page and the different text on the page will be different.

I’m setting this up such that we will get to the point to swap out the title of the pages. There will be logic that decides what to load on the page.

This will be dynamic.

Female Student: That’s the template.

Teacher: Yes. Think of this as a template. This HTML doesn’t have the content. That comes from some logic of PHP.

So I could make, let’s see … [On screen.]
An example of PHP and HTML. There’s a with text then in a paragraph. [On screen.]

So I output a title and a variable but I could have many.

I could add more data and more complicated HTML as a result. View page source. But you just see the paragraph.

I’ll do a few things here that are useful to you. As I do most of the work in the PHP with the variables. It’s isolated at the top, I don’t define the variables once the template starts. I don’t do logic or engagements stuff it’s just a dummy page and outputs the content. That’s the best way I think with PHP. I could do a whole section in the head. That works, since the server looks through the code for the PHP. So it’ll run before anything else.

But it’s confusing since you see PHP in HTML and you lose track.

Student: Page 10 with the titles the PHP. How would I comment that out.

Professor: There are two ways. You could do the comment before the text. That’s an HTML comment. But here it’s commented out. Or in PHP you could do the comment. Like in JavaScript cover out the line. But before the end. But if you keep it similar to the HTML comment like if you do more complicated stuff, –

If I comment out, this is two lines. Then you remove them so they aren’t processed. I still use those down here. You won’t see an error.

Source. The rest of thuja code is there but there’s no content page. So it doesn’t throw errors all the time. If it tries to echo but there’s nothing there it just has nothing.

In general the commercial servers will get this.

Next I may want to do — well, let’s go back to the blog.

I’ll run through the ways to define the strings. These are just variables of text. Here are a few ways.

This is output of PHP. You see there are three different kinds. We’ll see the “heredoc.” I can’t show you with the HTML code. But it’s just everything that’s interesting is gone since it’s written with PHP. So id you use this you must go the to the server and look at the original source code. But in the browser the PHP code is gone.

Syntax, defining strings, etc.

So this page has single coded stream double coded, and heredoc.
This is single quotes. [On screen.] One at the beginning then at the end. Then there’s HTML in here too. There. [On screen.] But with the server that’s just text. It doesn’t know the HTML exists.

But this is double quotes. Lath real point is the heredoc. It defines a multi line string. You get quotes here, then the end quote here. But you can break it onto multiple lines. I can’t here with the line break but it breaks with PHP.

I can’t use double quotes in here since it’s confusing the PHP. It thinks I would close the variable here. But with the other way I can put as many quotes as I want. Then it evaluates the text. I don’t open this definition. It’s special.

So I’d start with less then, less then less then, then everything between that will be like the quotes around the string. You can’t have species here though. It’s the first thing on the line then the semicolon and it’s stored in the string. It’s useful with inserting HTML code.

It’s more natural since you can break it up and not have everything on one line. If you do the variables with HTML you see this is more natural way to create them.

That’s an option available to you. So copy and paste, then the 3 less thans, then the word must match the bottom one and they must be aligned appropriately. They don’t need to be capitalized but it’s easier to see that way.

Here I’m linked to the syntax the documentation. If you go to the heredoc page you see the documentation which may be confusing but it’s there.

You will see me use this. I just created a string there.

So let’s look at the defining PHP functions example.

This page outputs the text of the calling function. If you don’t remember go to view source. You can’t see the PHP code like this but you’d download it from the server. So function.PHP.

This is the bottom and it’s regular HTML document. But inside these paragraph tags it’s called a function PHP. I’m echoing the result of a function. I supply it with the parameter.

This is “create welcome message.” It takes a parameter and at the top you get the functions. I keep the complicated PHP at the top. The template I use simple commands to insert the text I want in the HTML.

This calls the function in PHP. I give the variable name. It uses the catenation number. “Welcome to class.” So you get that then comma and who the name is.

The return value that’s replaced, like imagine this as echo … “welcome to class.” The return equates to this. That’s what’s put out.

Then you see that text.

So it’s like in JavaScript. They are all taking the things you learned in JavaScript and showing you how to do them in PHP.

Any questions? Moving on.

Next on the blog is “Elseif” … [On screen.]

I must open this.

Here you look at it. I have the temple with PHP in the center. It’s ok for the example but I’d avoid this syntax. It’s confusing to look at. But it’s just one chunk here.

If you remember the JavaScript example, I set a number to 10 then I see if the other numbers match. But if a condition is true, it prints out this text. Or if something else is true it does something else, or if none of it is it prints this. [On screen.]

JavaScript is two words, but Elseif in PHP is one. I don’t know why. It’s just that way. Otherwise it’s to the JavaScript.

A number greater than 5 is in the HTML. Page source.

So there’s the result of the PHP. If I change it to 4, it would say “is it greater than 5.” No. “Greater than 0?” Yes. So it outputs greater than zero.

It’s checking to see what conditions are true. That’s it.

Now the four loops through the commands. An output of the number is looped then puts in the increments.

Look at the code. [On screen.]

It’s a chunk of PHP in the HTML. This is how you define the four loop it’s like in JavaScript but you need the dollar sign in front. Loop through the code 10 times. It starts at IP 0. Then it checks to see the ‘I’ is less than 10. Once it gets to ten it stops.

So echo ‘I’ closes it. First it’s 0, then 1, … and then it stops running when it’s no longer true. It’s not a new concept it is just a new way to write the code.

In While Loops, this is how you would do that. Whileloop.php. It’s identical. But the other way we set it to a base variable then you lop while the condition is true. i is less than 11. It increments by 1 until you get 11.

The condition is not true.

The next example, how to make an array. I want you to become familiar with using arrays in PHP. This is important.

Let me bring up the code [On overhead.] This is arraysimple.php. This is a description of arrays. Regular HTML until you see the PHP tag.

This is how I define an array. We use the built in array function. It’s a built in PHP function. You can prepopulate [or repopulate?] the array. I’m giving some names of people and storing them in array called prepopulate [or repopulate?].

Then I’m using a function I want you to because familiar with called print_r. It outputs the raw confidence of an array. The output looks like this [On overhead.]

You may not be sure what’s in your array. This print_r function is an easy way to output the contents of the screen in a raw format.

You can see that the array is ordered as an index list. The zero item is the first name, one item is the second, etc. You can see which item is in which spot and how many items there are.

I try to surround it with a pre tag, the HTML pre tag. This maintains line breaks.

If I didn’t have that HTML pre tag it would be harder to read, but you can still read it. It looks like this [On overhead.] It would be on one line because HTML doesn’t respect line breaks.

View the page source. The HTML code has the line breaks in it, but since there’s no pre tag surrounding this it just gets smashed on to one line.

I can surround every print_r statement with echo pre and closing pre.

Questions so far? I’m trying to give you tools to be more comfortable using arrays since they are important.

Next, how to loop through an array. We went through the 4H statement in JavaScript. Now we see it in PHP. This takes an array of items and loops through them one by one.

It takes the first item in the array and puts it in the variable we are calling person and then outputs that variable.

It takes the first element, the name Candy, and puts the variable into this person variable.

Then it goes to the second element. Puts in the variable. It keeps doing that for all the elements in the array. That’s what the 4H element does.

It’s the quick way to loop through the array.

The other way to do this is to echo out, one by one, the elements of the array like this. It’s more technical.

This page has a lot of text explaining what’s going on with arrays. You will be more familiar.

That’s the output as the result of each statement.

Let’s move on to associative arrays which will also become important to us.

They are identical to regular arrays, but they are slightly different looking. PHP treats them the same.

We define the array the same way. We use the array function. Rather than having one value for the first, second, third, forth, etc. we use this combination to define each element of the array.

The equals greater than sign is a special command saying it’s the index to use and this is the value to store the element.

This is a list of students with different grades. I am using these as indexes and values. These are key value pairs.

When I do this, I create an associative array that is being stored like this. I can see the output by using the prnt_r command.

The element of the array I first created, is using the word Tandi as the index. Not the number zero. This uses words, not numbers, to index each element.

If I want to get Tandi’s grade I could access that item in the array by echoing out the value of a variable like this. It echoes out only the array with the index you are looking for.

You can do this behavior the same with with integers as indexes. We use words not indexes.

You loop through them the same way. The 4H statement works the same way. But you say the array name here, and two variables here. One to hold the index for the array, the other for the value of the array.

This takes the index, which in this case is the person’s name, and this takes the grades.

Remember, the first time it will have the word Tandi in the person name variable. It will have grade A in the grade variable. Second will be Jack, then A. Then Susan and B.

It loops through each time again. But we get two values for each row in the array.

Questions?

We will be using this a lot. You will become more familiar.

That’s it for associative arrays. The term is for an array with the word for an index, not a number.

I’m going to show you an example of templating the top section of a page. This comes from a template. We will see how that works.

This is includes.php. It’s in a subfolder called includes. There’s includes.php and _.nav.php.

This is similar to the tag from earlier with the names. There is one difference in the file that I will show you in a second.

We are creating a page title, a category name and subcategory name. Then we are converting to HTML code. This is the HTML section of the page. We are inputing the page title into the title tag.

We open the body tag.

We include another file in this file. It’s like a copy paste operation. It’s putting the contents in this section. It replaces the code with the contents of the file.

If you open up topnav.php it’s just that top section. The HTML for that top section.

It’s HTML code but outputting in a templated way. The page title and category name and subcategory name that we defined in variables.

You can include this topnav file. It will output different page titles, category names and subcategory names you defined in the outer file.

Let’s see what that looks like again. That’s what the HTML file looks like to the browser.

If I view the page source, this is the stuff that was copied and posted from the topnav file that was included from a separate file into this file.

You see the page title has shown up here. As well as the category and subcategory name because my template said to do so. You don’t see any of the PHP again.

That’s just because I defined variables at the top of the page. I used the variable as page title. Then I included the whole other file using the built in PHP function to take a file and put it into another.

This page shows you several commands in PHP that include one file within another. This is what I’m using now. Include. If you have multiple includes with the same file name it only includes it the first time.

Require will give you a fatal error on the screen if it’s not able to include that file. Include will gracefully just ignore failed codes.

Require once does this like include once. It will only include the file once.

For example, if I repeated this four times, and you can have as many includes as you want, and upload that to the server, you will see that show up four times because I included it four times. It includes that section of code as many times as I say.

If I standard deviation include_once, you will only see one copy.

I standard deviation to only do it once so it limits it to the first time.

If I said require, which is the same as include, but if it doesn’t find the file and break the code, it will work the same way. It requires that file. It includes it. If I misspelled the file name this code is not going to find that file. It’s going to permanently kill your code.

It says require failed to open screen. Meaning it failed to find that file.

It says what line in your code the mistake is on. Line sixteen. If you debug your code you will see that you named your file wrong.

I use this because I want to be 100% sure I have the right file. I’m usually pretty sure I want that file, so I want to see if I did it right.

I also use require once more often than anything else because it’s rare I want a file included more than once.

I will leave this as include. There are other examples of the HTML links to more documentation about this.

This page has all the links to the different kinds of include files.

Questions about that?

I’m throwing a lot of information at you. Ask questions if you have them.

I don’t expect you to retain every word. As we do more complicated things in the PHP I expect you to use this as reference.

Female Student: Sometimes you use brackets, sometimes parentheses.

Teacher: In the PHP code?

Female Student: The one in the basic syntax. The associated array.

Teacher: Let me bring that up.

Female Student: At the bottom it says echo array grades Susan in brackets. It’s parentheses everywhere else.

Teacher: I don’t think so. Let me isolate the concept and show you a separate file. Let’s make a PHP document with just an array. Let’s save this as array2.php. I will delete it in a second.
This file will have an array. I could add elements like [On screen.] That puts in the first element. If I echo, it echoes the name out

Student: So in PHP you use brackets but with functions you use.

Professor: Yes. That’s the gist. But that didn’t work.

Then that’s how arrays work. You access each elements with brackets. It could be a word, like “day” equals “Monday.” Then you access it using the same index.

[On screen.]

When I have problems with my arrays, they are not working right now. I can see what’s go on here. [On screen.] [Teacher looking ... ]

This is NOT my lucky day. This is simple code. Not sure what’s going on.

This computer does not like me. This code is fine I think. But the server may have a problem. There’s no reason this should be happening.

It won’t echo out.

I hope this does not happen the rest of the day. This is just one command. It’s the server I think.

I’ll close it down. There may be a problem with the WinSCP.

Now it works!

Back to this. If you want to make an array, back to basics, our names equals array. That’s how you do it. ["Instructor" ... etc.]

But that outputs my name. There’s a new element “index instructor.” Then it should output my name.

Now I’m being explicit with no shortcuts.

[On screen.]

Back to your question, if I can define an array in these protheses I could say … [On screen.] In a fell swoop I define the array and it’s contents. It’s in the function I pass the parameter where I want to store it. It’s two statements. You see it shows up the same way.

Good? Understand? It was long.

Moving back to other examples.

I’ll show you a list of some of the functions when you deal with text. PHP is geared toward templating and work on the web. It’s for creating websites easier. So you deal with gluing together text and capitalization, etc. There are many functions. This is a minimal number for you to modify the text variables.

An example listed on the blog under using the built in functions for string manipulation. I’ll show you a few. It’s under the String Manipulation Bullet.

So you see the functionality here. [On screen.] This is text in the HTML but it’s a function. You can do upper or lower case. HTML entities. It takes the HTML code where and it converts to safer to to use text characters.

Add Slashes. That’s a back slash into the text it’s important for databases. Then strip tags removes … you don’t know what the users will use in your form. You don’t want them to put in code to hack your site.

If you use this, it prevents HTML from being submitted or “boats” [sp?] Then it removes HTML data. It shows you the output for the functions based on the input in the form.

I’ll show you.

At the bottom is the form. I can enter text. I’ll enter, “this is a great example.” Then hit Go.

Then I see the output. So it made the first letter of each word capitalized for this specification. Lowercase didn’t do anything. But the uppercase makes all the letters capitalized. You see.

[On screen.]

So now I’m hacking this site. I am trying to get this red. Upper case word makes the first letter red. It ignored that first one … hmm.

Now let’s make the uppercase. This is not fooled by my HTML code. It’s preventing me from changing stuff. It protects the site too.

This one [On screen.] Doesn’t look different. Let’s see the page source.

Can you read it?

This was what was output by the uppercase function. It converted the words to uppercase. This is output by the lowercase. No HTML code was changed. Then this changed all the characters to Upper. Then this was output with HTML entities. This is what I’m trying to show.

The less then signs got changed to a semicolon character. The browser won’t show this as HTML but as a less than on the page. But if I standard deviation less than on the code it thinks it’s a tag.

That’s short code for less than signs. This is for greater than signs. This is for quotes. It’s escapes. It converts to the special commands on the page and NOT as HTML code. It’s helpful since you don’t want people to modify your page. So you use the entities by running the HTML entities.

Add slashes means you get the backslashes in front of the hook.

This is handy in databases. It gets the HTML a bad code so the browser ignores it.

The strip tags removes the HTML function.

Then this is to outline the output of these functions but not HOW you use them. We’ll do more of this in database work. So those are the functions available to you.

There’s PHP info too. It shows the PHP installed and the plug ins. This has PHP info and it puts out all the information about the server. This is a Linux systems. Then obscure details on how it was run. Where the configuration file is. Then the path.

If you had different plug ins or libraries like JavaScript libraries. It shows you all of what you have installed.
This is 5.2.6 of PHP. It’s recent. Sometimes you don’t know what you are running so you can see with this. The code is simple.

[On screen.]

It’s a function. Just one. The PHP does it quickly to get it all out. If you forgot what PHP info does, you can search the PHP.net. You get the explanation. It’s easy.

Any function I show that is complicated you can look up here.

We are almost done with the basics.

One more thing is how to redirect the user. You go to one site then it redirects you to another site. There are ways in HTML, JavaScript, and PHP to do this.

This example file, shows you all the ways to redirect. If I click on it I get to the NYTimes site. It redirects you.

I’ll show you now.

Redirect folder.

This is how you do it in PHP. It’s about inserting the hypertext protocol transmitter. It’s behind the scenes information to the file. When I requests this the server responds saying you should go elsewhere. So the browser goes here, instead of the original page. It stops the processing. So that’s how it went to the NYTimes site. It’s behind the scenes instructions to the browser. If it redirects the browser doesn’t see this line. [On screen.]

But if I commented it it would upload. Then you see it redirects.

Now back. I’m going to go back and click the example again. It takes you to CNN.com. Did you see the split second that had something else on the page.

That shows you that the browser has received the other version of the file before it processes the redirect.

This is how you redirect in HTML. For the browser to read this it has to download and process the HTML code.

This is an HTML how to redirect. You have a meta tag. This is the same idea we saw in PHP. You indicate that you want to create a new PHP header. This is the data you want to send in that header.

This is the number of seconds before the page to redirect. This is the URL you want the page to go to.

This took us to CNN. Let me modify this.

This is how to redirect in HTML. There is a third redirect. The JavaScript redirect is happening first. That indicates to take the page to CNN.com. This is the JavaScript code to redirect. You set the property of the indication of where to go.

If we comment that out with JavaScript then we will get to the HTML redirect. There’s a precedence.

JavaScript happens second. Usually it’s loaded first when the browser interprets the contents of a page.

Now we are going to go to Independent because the HTML redirect is going on.

That’s it for redirecting. I won’t go into it more. Remember that PHP gets processed first. JavaScript second because it’s the first thing the browser processes. The HTML is third because it’s the last thing the browser processes.

I think we should take a break now. I’m going to show you more information that’s going to confuse you later.

Questions?

We’ll continue later. Ten minutes. [It is 11:14

Everyone's back. Let's continue with the PHP lesson.

All of this has been somewhat theoretical. Just like JavaScript. I'm going to try to get some practical applications of PHP.

[Phone ranging]

Male Student: Credit problems again?

Teacher: They know where to get me.

[Class laughing.]

If we open up NotePad++. We are going to make a PHP document. It will be simple.

Remember, first you have to do less than sign, question mark, PHP. That’s the beginning of any PHP code.

This page is going to echo out. Get. Bracket. Q.

This is a special code. Echo is the command to print something out to the page. The dollar sign indicates a variable name.

When you see the underscore it’s a built in PHP variable that PHP creates for you. We don’t define it.

Get is the name of this special PHP variable.

When you see brackets after a variable you should remember the brackets with the zero, one, two, three indexes. This is an array. The Q is an index of a particular element in the array.

This doesn’t make sense, but it will in a second.

Save this file in a folder somewhere. Remember to make your own folder for your project. Let’s call it request. This will be get.php. I’m showing the Get variable.

This will echo something to the page. Let’s upload this to the server.

You don’t have to do this yourselves. You can just watch me.

I’m going to upload the folder, Request, to the server.

This does one thing. It echos out some variable. If I load that up to the browser, nothing shows up. That’s what I expected.

If I put, after get.php, Q equals hello. This is the full file name. Then question mark, q equals Hello.

I’m going to break it up on a few lines for you to see, but it’s all one line.

This is what’s called passing a parameter to the server. Not only do I want to get the file, but here’s the variable Q that’s equal to Hello.

Since I’m outputting what’s in that variable, the variable now has something in it. It has the word Hello. What we specified.

This code looks for anything that has been passed in the address bar after the question mark, which is a query.

When the browser makes the request for this file it also passes data about Q.

This is what is called a Get Request. It passes the value of Q.

PHP, being built to handle this stuff, knows to put that as an index in an array. The value is whatever the value is set equal to.

The actual data came from the browser. You are kind of passing data from the browser to the server when you do this technique.

If I had set that to something else, Q equals Something Else, that’s how it will show up.

The same page will load a few different things depending on what’s requested of it at the top.

It’s common to see this technique used, as we will see later.

This seems arbitrary now. But I want to go through some permeantations [sp?].

Passing data with forms of http. You can use a form to submit data that shows up in the top to be passed to the server.

What’s your first name? I put in my first and last name. I click go. You can’t see it because it’s small, but the request looks like this [On overhead.]

The file name, passing data, process data, my first name, my last name. When I submitted the form it did what we did manually earlier on the address bar. It made the request to the server.

That’s how it gets sent to the server in form data.

This page is echoing out the values of first and last names.

In this case it’s using another built in variable called Request.

This shows you that the data has been received. You entered in data, the data is processed and received, then displayed to you.

There are two or three different ways to pass data from one page to the next. Normally pages don’t talk to each other. There’s no intercommunication between pages.

NYTimes.com is a dynamic script. When I click on the article, anything on the last page is lost. Only in memory is what’s on the current page. There’s no maintaining of state from one page to the next.

Windows only have a number of ways to make it seem like these are talking to each other. You want it to appear that way.

When I go to ebay.com and click log in, somehow that data has to be maintained from one page to the next. They don’t want me to log in on every page. There is a limited number of ways to do this on the web.

There are a few techniques to maintain state. It persists from one stage to the next.

This is one example. The information gets tacked on. It sends data from one page to the next.

If you remember from the form coding, in the form tag, you may have seen it specified. The form tag takes the two parameters. One’s the action being where to send the data. Then the method which is HOW you send it. We set it to “get.”

You see method equals get, then the other option is post. That’s how you send data from one page to the next. You remember the other way within the address bar, but then there’s the post method. It’s the same code but the method is equal to post.

[On screen.]

You have the variables with first and last name. It’s the same form but the method = post.

Now fill this out. Click go. Nothing is up at the top. No data showing but this proves that it’s been accurately received. It’s grabbing the data but the wasn’t at the top. So the post thoued is behind the scenes. The method the user can see. But the post is in the header then it’s behind to make the requests. But the get is in your face in the address bar.

Post is usually for more data. You don’t want a large amount of data in the address bar. If you upload from the browser to the server you use post. The get method would have too much data. And you have a limit of text in the bar. It’s not big enough for an image. That’s how you specify with the post. [On screen.]

Any questions? There’ are the two ways, Get and post.

Student: high security websites are around the post?

Professor: Yes. The post is not so obvious. So if there’s a log in screen. I’m using the get method with the password. And it’s hidden, but it shows up in the browser. If someone and watching me, they see my password. But it’s not as obvious with the post method. You use post for this. Security requires also that you need the score server that encrypts data. But that’s beyond us here.

But that means it’s a encryption of what you typed in to the form.

Student: When would you use get instead of post.

Professor: If you want to see the information in the address bar. Like if I send you an article I want you to see, the data is dependent on the parameters that you see. How about eBay

I’m looking for … Straw Hat. You see the word “straw hat” then the results. So the word is passed along and you see it.

Well, so I wanted to forward this page. I paste the URL then send it. If it was not in the URL then you would look at it but you wouldn’t know what it was. That page depends on many things. I would have to send the whole URL. These individual items, they made it look like it’s own web page. That’s a technique. But the question mark equals some variable.

That’s the main reason to use “get.” When you. Use the browser that’s a get request. It’s just passing along the data. The post is special.

One more tool.

It’s called FireBug. Remember the firefly. It adds browser abilities. It has the ability to see the communication between the browser and server. Click to enable this. I load NY Times, and you see the requests that were made. “Behind the scenes” so to speak. This lists all the requests. First is just the original site. So that’s a get.

If I click it, you see all the invisible headers to the server and the server’s response. Here are all the requests headers. It’s information about what I want. What’s my browser. Firefox here. The operating systems, but this is a lot of information. It’s useful to see that data. You can see the browser then see the server when it makes the response.

That’s definitely something you want when you debug communication problems.

If I went to Google.com and did a search. I’ll clear firebug, but see the search results. You see the letters I typed. Every one. It made a search already. Then another. “Web.”

You continually submit data to Google in every character. They have autocomplete, and it sends back matching search terms commonly used.

So “Web Development …” Click the search. Then I made many requests. The first was the get requests for the file. If you do this you see the full path of what you requested. Then the data after the ‘?’ Then Google tracks you.

Second is the request for something in here. Like the image. The Google sends back information about the HTML page then it requests a different file. But there’s one for the image. It’s not easy to tell where it is but it’s there. So you submit data in a get request in almost all requests. But it’s not always a post request.

So this is the form with the post method. I’ll keep firebug open.

My name. You will see the post request now. It says Post Process Data. You can see it’s a post request with the fire bug tool. Then the invisible headers, the language’s the computers speak and the browsers.

Then the first name field too, the last name field and you see you are sending the data. Then the response in HTML.

This gives you the view of the internals and how they are communicating. This is good with user data.

Back to this example.

Remember the form get and post here, then the difference is the method post the other is the get method. It shows how the method was communicated with the server. When I get that data in another strip I see the data in the get request or I can request the post request. Looking for the names. If it’s a get or a post. Let’s say it’s a get, the term you look for must match exactly the name field you gave. Here’s the form.

When you send the data to the server here’s the key you used for the data. I call it first underscore name. So when on the server side on the PHP when I look for it and processing the request it has to know the name of the variable. That’s why you code it. It’s not what’s in the ID field. We said the name and ID should be the same.

But if you said “first name 2″ that has to match too. That’s important. It’s counter initiative. In PHP with forms the name matching is the most important thing.

So here, this gets the first name field with the form method being post.

I used this variable but not get or post but it works for both. It has all the data for either form. These are built in PHP variables with all the information using a get or post. So whatever method you can say get the request and it gets all the variables submitted. Both get and post.

Just remember these are both ways to get information.

If you want to debug, and just like any array, this will output to a raw context.

I’ll show you.

The request array looks like all other arrays. These are the keys then the value, the index of the second etc. It’s treated like all other arrays but it’s built in.

A little more before I let you off the hook. That’s the gist of sending and receiving from the form. But you may want to do this through the link. It works the same way. It’s done only a little differently. It takes you to the page, think link, with the array in it. If I study this. [On screen.] This is a link tag but it has the data attached to where the link takes you.

So I say while you make that connection include this data about my name. It’s like a Form submission. Like the get method. The link passes the data. So the data is embedded in the link. It shows up like a form submission like the get.

This is useful too.

If you want to internally pass code. You click the link and it goes to a different page it’s nice to pass the data along with the request.

One more example.

Passing data using cookies. This is the last built in way the servers can maintain data from one page to the next. This is a cookie. This creates a text file on the client with some data.

This is storing the information on the page. The page can read what was saved in the little file.

This page is creating the information and storing it on the computer. Now this page is reading the little bit of information. That’s a cookie. It’s technology for storing information on the client.

If we look at the code it may make more sense. Set cookie and get Cookie are the two files.

It’s using a built in function called Set Cookie. It’s a built in function of PHP. We supply it with a couple of parameter. The most important being the name of the cookie. You have to tell the function the name, and value of the cookie and how long to keep the information around for.

This is written in PHP. This is telling the server to tell the browser to create information on the computer and store this value in it.

This is the way it works. I won’t get into details.

When you when to read that cookie you go to getcookie.php. It looks in the built in PHP cookie variable for the information. Every other page in the site can read the value of that variable.

I want to let you know what PHP techniques and technologies are around.

Questions? About anything?

Is it a lot of information?

Male Student: At one point you said that Google records and sells our information. It makes sense how computers communicate with servers. How does that work? I know it’s a broad question.

Teacher: Let’s load up another FireFox plugin. Let’s search in Google for Web Developer Tool Bar.

This is another add on like Firebug. The first result is the one you want.

You want to click the Add to FireFox button when you get to that page. This should pop up. Click install now.

That will add another extra functionality to the browser. Eventually you will get this box here to restart FireFox. You want to click the button to restart FireFox.

When that restarts you can see that there is an extra section up here in FireFox. The browser has an added capability.

We were going to google.com. Make another tab and go there. You have this web developer tool bar installed. You can see what cookies are being stored on your computer. They are big files with lots of little bits of information. The server tells the browser to save the file and put the value in it.

For any site you go to you can view cookie information for what pieces of information are being stored.

For Google, as far as my browser goes, there are no cookies stored. Do you all have the same thing?

Male Student: I have one.

Teacher: Let me make a search. Now I should have a cookie. Maybe my computer is blocking them. Oh, there it is.

I have two cookies. One being the name. This is some kind of ID that is a unique identifier.

This ID will most likely not change. It’s encoded to prevent you from seeing what they are doing. They are tracking your usage of the Google site.

When you search for anything else, they can say that the same user has done this search because they stored a piece of information to identify the user.

Does this make sense? It’s a unique identifier they are storing on these pages to see that the same user has been using the site.

If you have a gmail account where you entered your name or address, etc., they are correlating with what you have done here with what you have done on your gmail. They have that cookie set indicating that you are [name deleted for security] and your ID is 55307. Everything I do has the same ID. They track usage. That’s where the ads come from.

I’m a good web designer because they are advertising web design. They analyze what you search for now and the history. They analyze the emails you receive and send to people. They correlate all this data.

Whether they use it to generate these ads or not they have that data available to them. Everything in the google.com empire is being correlated. That’s true of amazon.com, ebay.com, etc.

Male Student: My ID is attached to what I search on their servers?

Teacher: You have an ID as a google.com registered user that’s associated with your computer in a cookie. When you go to the google.com sites it can read that ID. It associates everything you do on that site with that ID.

Google is in the business of advertising. Not all companies are that focused on targeted advertising.

Let’s go back to the list of examples. There is one more example that combines two of the other examples. That’s passing data using a combination of forms and cookies. We are going to submit data in a form and it will be stored in a cookie.

If we go to this site let’s view the cookies set for this site. There are no cookies yet being set for this page.

Now I’m going to be setting one. Let’s go here. Type in your first name. Click Go.

On this page now, if you view cookie information you will see that I set a cookie called First Name that’s storing your first name. That’s how this site grabs your first name.

Every page I make on this same site will be able to access that.

If I make a new page in this folder. Go to User Data. Make a new file in there. I’m going to call this test.php. I make a new file. I say echo, cookie, and first name. This is going to show you that on any other page on this site now I can get that first name value.

Now this page we are loading, has never asked you for this information. It’s an independent script but it’s still on the same server and has access to the cookie. If that was a user ID I would correlate the two pages together.

Male Student: So a website that keeps you on even though you go off, is that how you do it?

Teacher: Yes. Let’s try that out. Let’s close down the browser.

Male Student: Where’s it stored?

Teacher: It’s a file on your computer. They are stored on the client machine. Depending on when the expiration was set on the cookie.

By default the cookie will be gone when you close the browser.

Male Student: So that’s what Spyware is.

Teacher: This is the basics of Spyware. A lot of it is programs that run on your computer. They track it. This can be used for Spyware, but there are a lot of security preventions.

Adware would be a separate software. It’s not used for malicious purposes.

Male Student: Is this data kept there?

Teacher: Any site can store the cookie data there also.

I’m going to go back to the example we just made to see if the cookie is still there.

I’ve set an expiration date for a day in the future. This will be stored all day on my computer. I could set it for a year and it will be stored for a year.

I think that was it for my examples. Let’s make sure.

That was using a form to submit data.

You can use the cookies tab to view any cookie information. Almost every site on the web uses cookies in one way or another.

If you didn’t allow cookies to be used it will prevent any site from putting cookies on the computer. You will find that the web won’t work for you anymore. It gives you the information you are requesting in a proper way. You will see that it becomes almost unmanageable.

Let’s see if NYTimes is like that.

If I ever had to log into a site you can’t log in without cookies being set.

Male Student: One of the first items when you launch the page would be to look for cookies?

Teacher: Let’s see. If I go to blogger.com, which doesn’t seem to be working.

We can see how it’s done by using Firebug. Let’s see if this loads.

If I try to sign in, while having cookies disabled, it needs a Google account. It asks you to turn on the cookie functionality. There’s no way to keep track of you and make sure you are logged in.

It’s used for almost every site with a log in.

Let me show you how that worked if I did have cookies on. I’ll turn them back on and open up Firebug.

If I enter in my user name and password, and click sign in, you will see all the different requests that have been made.

It did the same thing. Let’s try again.

Making a request to the server. These are all the requests in Firebug you can see that you made to the server. I’m not sure which one it would be in, but you can see the communication between the client and the server.

The response was in the headers.

So at this point you see the request header has a cookie set. I don’t know how obvious but this shows the requests and you see all the different requests your browser makes then the cookies. You submit the cookie to the server. When all requests you get the header that says you have a cookie on the server. So that’s set and attached to it.

That’s it for those examples. Any questions? Before lunch? Anything? That’s a lot of information. We’ll digest then we’ll go through more examples and piece by piece. Let’s break then come back in an hour. It’s 12:20.

[Lunch.]

I’m going to get started in five minutes. I posted new information on the blog. Look there and get yourself acclimated to what’s going on there. I will give you five minutes to finish up reading what’s on the blog and getting comfortable with some of the material. Then I will start going through it.

If you have any questions from yesterday or this past week ask now. Or are there too many questions?

I’m going to get started. I’m going to run through some things on the blog first. Hopefully you had a chance to read some of it.

Today we are going to focus on JQuery. It’s an advanced JavaScript.

Figure out as much as you can about what I’m showing. As questions as you need. Some of this will make sense. It should be easier once we get the hang of using JQuery.

First is the concept of the JavaScript framework. This is meant to make common tasks easier in the browser. JavaScript has a long history of incompatability. JQuery and other frameworks hide the inner workings of JavaScript from you. It gives you a unified platform to make interesting pages.

There’s an example I’m going to pull up here in which JavaScript would do something. You would expect that there is a width to these red boxes. They occupy space on the screen, but for some reason, depending on how you set up your style sheet and how you coded it, the width property is or is not accessible using JavaScript.

The first paragraph has no style. There’s a red boarder, but that’s it. If I click the button it will run the function of looking for the width property in JavaScript. It looks like this [On overhead.]

We saw some of this the other day. How you would access the style property of any element. We are using the ID of the element. We are getting it into memory based on the ID. Then we look for the style.width property.

For the first one, which has no CSS styles applied, has no width.

The second one does have CSS applied but that’s in the head. This is an internal file. Normally it would be external because you should always separate your files. 200 pixels applied to paragraph two. Yet, it still doesn’t work.

The last paragraph example has another CSS width property defined, but it’s defined in line the HTML attribute.

You can define styles with in line attributes. This style attribute will allow you to. I don’t recommend doing that unless you are very careful. You should always try to separate the files so you remember where you put the styles.

You will see more of this today.

This is defined in an attribute within itself. JavaScript decides this one will give you a width.

It doesn’t make sense why one would have width and the other wouldn’t. This is a basic inconsistency.

Generally we try to avoid these issues all together and use a framework that does those things for us. JQuery is the framework for this class.

If you go back to the blog there’s a link to a description of the concept of frameworks. Some of the same things I just said.

We are going to run through examples of how to use JQuery doing the same things we did yesterday.

I’m going to fly through these and show you the differences between what we did yesterday and what we’re doing today.

Questions?

Let’s get a handle of basic JQuery selectors. I mentioned that you should read this explanation of JQuery. It’s detailed information. I’m going to pop that open at the same time that I show you the examples.

Let’s start with basic usage of JQuery selectives.

This list of items is an example of what we are doing. This list in the XHTML, if you look at the source code, is items 1 through 6. Two have a specific class. Otherwise, the text is the same. Yet, on the page I can see the words hello on numbers two and six.

I’m doing something in JavaScript to replace the HTML element.

Obviously something is happening with the class special on those two. That’s how the JavaScript is finding these elements and changing them. Just like in CSS we apply different styles. This is the same thing with JQuery. We attach the specific behavior to those two elements.

The JavaScript we are running is up in the head section. I recommend using external JavaScript files when possible. A lot of these examples will be in the head so you have it all in one file though.

This is relatively simple. It’s only three lines of code. The first line is the first thing I’m going to focus on.

In the document that outlines the syntax of query the first thing I mentioned is the document ready code. This is now a JQuery code. When you see a dollar sign and parentheses you can be pretty sure it’s JQuery.

This is a function. Dollar sign is the name JQuery has given to a special function. JQuery is written in JavaScript. This is a function call. It’s a special character with parentheses. That’s how we recognize a function.

You would also recognize the ready function. It’s returning some special object. I’m not going to focus on what objects are, but this object has another function inside of it.

We are getting an object and calling it reading function.

When you see the dot it means this thing is a property or function. Think of this as a set of variables and functions.

Do you remember document.write? The function we saw in the first few examples.

I can run out to ask in the front. We’ll take a break and I will ask.

Do you remember we did document.write and it wrote to the screen? Document is a special object. It has certain properties and certain functions. Like a car would be an object. It has a number of wheels and certain things it can do.

This document property is a variable with certain sub-variables. One of the functions you can do on the document is write something to it. I don’t want to belabor the object point. Just recognize that this is a property.

In JQuery we call this special function as passing it as a parameter. It adds special functions to the document object that wasn’t there before. It augments the normal document object with some special functions that makes it easier to do our job. A special function is the ready function.

The ready function will automatically be called when the document is written. It’s like the onload event.

Do you remember the onload event the other day? There was an example for waiting for the onload event. Basic JavaScript examples. Detecting the page movement. When the page first loads it pops up. If you read the source we will remember there was the onload attribute. That’s how we were able to say that when the body loads call that function.

This does the same thing in JQuery. What we just saw. This is how you define it in JQuery. The same functionality. In the code it looks like that [On overhead.] When the page is ready, whatever is between this parentheses is a function call. That’s the parameter for the function and it will be run when the page loads.

Forget the details inside there. Recognize that this is a function. It looks unlike any parameter we have seen before. But it is just a parameter to the function.

Are we clear?

JQuery will only run the code when the read is ready.

What we are passing as a parameter here is another function. This is what will be run when the page loads. That’s the function JQuery will run when the page is ready.

Now we are going to isolate this part and focus on what I have highlighted [On overhead.]

The first thing we do is define the variable new Text and set it equal to Hello.

Then, this is somewhat unique, we are using a CSS selector inside this special JQuery function. Recognize that this is selecting for all list items with class special. It’s allowing us to get a list of all the elements that are list items with the class selector.

We are going to change the HTML inside those elements to be the new HTML we want to put there. In this case, the word Hello. That’s what we are putting in the HTML.

This is a special JQuery function. This time it is doing something different. It’s not waiting for the page to load, it’s replacing the HTML of all the elements that match this element selector. It goes through the page and looks for the elements with the tag LI in the class Special. It replaces the HTML inside of them with the word Hello.

If I had said, H1 Hello you can insert HTML into this element. You see that it has inserted text and HTML code. That’s why it’s called HTML.

I can insert this into any element. It doesn’t have to be these classes. I can insert it into the body type. I can replace the whole body with the word Hello. I’m going to wipe out everything in there and put the word Hello. Hopefully that will work.

It has overwritten whatever HTML was there before with the word Hello. If I view source you still see the same old stuff. The JavaScript waited for the page to load and deleted everything out of the document behind the scenes and replaced it with the word Hello in H1.

The important thing to note is that, in this example, we use the ready function to wait for the page to load and calls whatever function you put as the parameter to run as the page loads.

In this case, the function creates a variable with some text and overwrites all the matching elements with that new text. That’s the point. To show you the ready function and how to use CSS selectors to get matching elements.

Female Student: What fundamental difference do we make with parentheses after the function?

Teacher: You can create a function the other day. That’s the normal way. In this example you see this [On overhead.] It’s almost the same. It’s anonymous. The ready function knows what to do with this. It doesn’t need a name.

You could give it a name and it would work the same way. It will still work, but there’s no need for it.

Male Student: Do you need the very last two or can you just have function bracket? Can you just end it with brackets around function?

Male Student: Do you need the parentheses?

Teacher: You do. That’s always necessary. Even when there are no parameters. It’s just a technical requirement.

It would make sense that we don’t, but we do based on how the language works.

Female Student: Is that always empty?

Teacher: Generally. This is a function called by the Ready. If Ready was supplying a parameter, which maybe it does, then we could put a parameter name in there.

Functions accept parameters. If we expect a parameter to be passed in this function we would put it in there.

JQuery does a lot of things automatically that we don’t have to think about. That might be one of them.

Other questions?

Let’s move on to the next example.

We have to include the JQuery script. It’s a big library of JavaScript functions. None of this will work without the script with all the functions in them. The dollar sign function is defined here. Without this the JavaScript has no idea what the dollar sign means.

If you look at the JQuery library, which you can do like any other JavaScript, you will see the very long, one line code. You can download versions from the JQuery site that are broken into more than one line.

It’s small. It’s compactly written. It’s almost impossible to understand. If you wanted to you would see it’s just JavaScript in there.

Let’s move on to the next example. We are going to do the same thing we did the other day. We are going to respond to the page load event. We had this page that loaded and popped up an alert. This was done using the on load attribute.

This one does it slightly different using JQuery. It looks like this. [On overhead.] There’s no on load equals some function, which is what we did yesterday. That’s how we initiated the on load event.

JQuery further isolates the JavaScript from the XHTML. We use the same ready function and pass it as the parameter that calls the function we want when the page loads.

The parameter is a function that falls in this function that pops up the alert.

Questions?

That’s the only difference from what we did yesterday. Yesterday it was on load equals something. Today it’s document.ready something.

Male Student: Those would be on a separate page?

Teacher: You would have one with the JQuery library. Leave that alone. Don’t ever edit that file. Make another script separate.

Male Student: I’m talking about the function to say Hello then the one above it.

Teacher: You are referring to the say Hello function?

Male Student: The one in the HTML document.

Teacher: You can put this in the HTML document. This is defined in the other code. It’s specific to this page. I would include it in this document. You could easily move it though.

Male Student: Document.ready function. Say Hello is all I see.

Teacher: When the page loads it’s going to run this code. Say Hello is the code that will run when the page loads. It takes whatever code is in it and runs when the page loads. That function must be defined where the page loads.

You don’t see it here, so it’s probably defined elsewhere in another code.

This function is defined in this external script onload. It defines that function.

JQuery is JavaScript.

This is the function I wrote. If you don’t see the dollar sign function you are probably not in JQuery. It almost always uses the dollar sign.

I could want some JQuery style code in this function, I just don’t need to. I could easily have used that dollar sign function.

Female Student: The JQuery bits would be included in the HTML or the JavaScript?

Teacher: I can write any JavaScript I want on this page in the script head. I didn’t emphasize that here because I don’t want you to do that in this class. I would rather it in an external file.

You can define scripts. I can use it as an internal script.

Female Student: Any bits of JQuery you would include in the JavaScript file you have.

Teacher: If you have the JQuery library as the first script in your scripts. Then every script after will refer to functions defined in the JQuery library.

Remember the browser goes from top to bottom. Load the most important stuff first, which is JQuery.

Male Student: JQuery file we can find on line?

Teacher: I’m going to show you in the website.

You want to download whatever the latest version is. Jquery.com. I’m using version 1.2. There is probably a new version. Download the file and put it in your script. We will be doing that later.

Let’s take a look. See how it says uncompressed? That means it’s not all in one line. It has maybe 100 times as many white space characters. That makes it somewhat bigger. The other has been gzipped. That’s why it’s smaller. The combination makes this smaller.

For our purposes it doesn’t matter. I would eventually download the smaller one.

Back to the example. Any questions about this?

Every time you see this document.ready I always include the beginning of the function definition on the same line. It’s a standard set. I can be sure everything in there will be run when the page loads. I can see what will load.

For me, this is a standard copy and paste.

Let’s move on again.

The next example is to handle click events. This is what we saw yesterday with the On Click attribute. We will do the same functionality with JQuery. When I click it runs a function that pops up this message.

I will show you how it works with JQuery, rather than just plain JavaScript.

One thing I want to point out in the beginning is that the links themselves in the HTML have no JavaScript in them.

Yesterday it would have been On Click equals run some function. We did that yesterday. You may or may not remember. [Class laughing.] This is a fast paced class.

This is a preferred way of doing the same thing. JavaScript is being totally isolated from the XHTML. We are not putting on load attributes or other kind of JavaScript attributes in the HTML. We are defining all the HTML behaviors in the JavaScript section of the page or the external JavaScript files.

This is easier to maintain. When I want to maintain behaviors I just go to JavaScript, I don’t have to dig through the XHTML.

When a document is ready, I’m doing this slightly different, instead of defining the function within the ready function, I separated it so it’s defined elsewhere. I’m just referring to it.

I could have put this whole function definition in there. I’ve just chosen to show you it’s possible to separate it out.

Female Student: The top function with the double sided parentheses means anything called A tag is called?

Teacher: The behavior is the click behavior. When you click on it, just like the ready function, it’s called to function when you click on it.

I could have put this function inside there if I wanted to. You would have had a similar structure to the original example. It’s easier to read separately. It’s my preference of how I like to read my code.

This is more analogous to how we see functions now.

I’m going to repeat. This is what happens when the page loads. When you see the document.ready function is the beginning.

When the page is ready it calls the function called page is loaded. That function sets a bunch of behaviors for any link with the class dummy. For all links with the class dummy create a click behavior that when they click that link it will call another function called link is clicked.

The link is clicked function calls another function called say Hello. I call this special JQuery function called prevent default. It prevents the link from taking you to another page. This cancels the link.

Male Student: Is event built in?

Teacher: It’s the parameter, it’s just my name. This goes back to your question earlier. Would I ever put something as a parameter in there?

In this case, the click function is calling this other function. It will supply that with reference to the events data. It supplies you with information about the event, like what element was clicked to cause this event.

That’s what is in here. We prevent that event from going any further.

I want to go through the flow one more time. The document extended augmented object has the ready function for when the page is loaded. It calls the function, page is loaded. Then defines behaviors.

I wait until the page loads. Then I define the behaviors. We do that so the body section is loaded before we define behaviors for the body. If we do it before the browser will be confused. We would refer to the links before the page is ready.

When the page has loaded and we define this behavior, we say to JQuery, look for link tags with the class dummy. When they get clicked call the function for hello. This prevents the link from taking you to another site.

Female Student: In our HTML document, all of this will go in JavaScript except the initial call? Would that be in HTML?

Teacher: Meaning the ready function? Yeah. You could do it exactly like I have here. You can put functions in the HTML like I have.

It would be better to have things in the separate file. A big reason to do so is that often your functions are kind of generic and apply to multiple pages. If you put everything in the HTML it won’t be usable for other HTML documents.

Document.ready is usually specific to this document. You might want to do slightly different things for the documents.

Let’s move on. Now that we are seeing this style of coding you will see the similarities.

Using JQuery to mouse over events. When I mouse over it pops up an alert. If I view the source on that you can see that, first of all, here’s the button, and there’s no JavaScript code. The HTML tags do not have any JavaScript code in that.

Yesterday we would’ve seen: on mouse over equals some function. Today we are not doing that anymore.

Today we are just using JavaScript code to define those behaviors. We wait until the page is ready and fully loaded. Then we run the code, which is going to attach behaviors to all elements with the ID button 1.

We know there’s only one element, but there may be many.

For that button we attach an event when the user mouses over. This function will be called.

This is similar the other examples. Define the behavior to a particular group of elements and that’s it.

Next. The on mouse out example. This is very similar. Mouse over does nothing. Mouse out creates some response. It’s almost exactly the same, except we use the function mouse out.

When the page loads it calls this function. All buttons with button 1 calls this function to say Hello.

Female Student: Is it common to see an HTML page with a series of those JQuery things that say document.ready and then many functions?

Teacher: Very common. That’s what most sites will do when you are set up.

You can say for example, for the body, when it’s clicked alert the body.

Maybe for all page one tags, when they are moused over alert something else.

I would normally stack many behaviors for the elements I want.

Let me load this up.

When I click on the body it will tell me I clicked the body. If I mouse over the head it will tell me.

I would attach many behaviors in the same document.ready. You cascade as many as you want. I’m separating one by one for examples.

Male Student: If the button was a class, not an ID what would it look like?

Teacher: Then it would be a dot. It’s just like in CSS.

Male Student: Because it’s in brackets it’s not confused as a function.

Teacher: Yes.

You don’t have to say the tag name if you don’t want to, but I recommend you do to keep it clear for yourselves.

Let’s move on to how to handle form events. We had the on submit tag yesterday. Same thing. When the user submits a form we call upon a Java function. This time we are using JQuery.

There’s no JavaScript in the HTML again. Yesterday we would have had: on submit equals some function.

Today we are doing entirely JQuery so it’s all in the script section. We wait until the page loads. Everything between those two lines is what happens when the page loads.

We look for all elements with ID form 1. We attach a behavior to their submit button.

When a user submits that form we will call the function that pops up an alert. We will do the same thing we did with the links and prevent a behavior.

Forms will usually take you to another page. Links will link you to another page. I fu want to stop those from happening you would prevent the event which stops the link from taking you off the page.

That’s the only difference between this and the last example. We are using the submit behavior instead of the click or mouse out. We are preventing the event from taking you away from this page.

A lot of times it will take you to the top of the page if you don’t specify where else you are indicating. You don’t always want that to happen.

A lot of times links will be defined.

As an example for the form example, it may be that in a real world scenario I might ask someone for a first name on a form. I want to make sure they filled something in. When I click submit I wouldn’t just prevent the form, I would check for an entry. If they entered something I’d let them go through. I would check the forms first. You would want both possibilities, to be taken away from the page or stay.

We are going to move on to the same thing we did yesterday. Changing element styles using JQuery this time. If you mouse over the paragraph from the first example we will do the same style change we did yesterday, which is changing the font size.

You should now understand how I would structure the page. There’s a ready function waiting for the page to load.

The paragraph I’m changing is P1. That’s how I’m referencing this paragraph. When you want to address a particular behavior or style sheet you need to address it.

This is the JavaScript code that is responsible for the behavior. Every JQuery will have this ready function to wait until the page is loaded. When the page is loaded I’m defining a mouse over event for the tag with the ID P1. For all tags with ID P1, create a mouse over event handler. In this case, this is how I change an individual CSS style using JQuery. This is a nicer way than the way we saw yesterday. It’s more reliable.

This will change the font size to 20 font. I can put any CSS property here. I can change the margin to 20 pixels. I can change the boarder width to 20 pixels also, or 2 pixels. I can change any individual style with this same function.

Male Student: The function is physically written as this?

Teacher: That goes back to an earlier question. This select all the element with the ID P1 defines a function of what to do with the mouse over. JQuery will automatically create the variable THIS. It refers to the object that was moused over.

That object, CSS, is what we are going to change. This is the element that triggered the event.

Female Student: This refers to ID P1?

Teacher: If we had a lot of paragraphs that had the same event, the THIS would refer to the currently used one, not all the other ones. There might be a differentiation. It’s a special JavaScript query that refers to the current object.

Male Student: Could you put P1 in there?

Teacher: That would be perfectly fine. That may be easier to remember.

Male Student: I just don’t know where THIS came from.

Teacher: If we had a class with 20 paragraphs it would change the CSS for all of them. You would want to use THIS. I only have one paragraph so it would be the same. Stick with THIS.

Female Student: The word THIS refers to everything in the first parentheses? Everything being moused over? That’s the idea.

Teacher: When I mouse over this paragraph, the event is being triggered and the THIS variable holds a reference to the current paragraph. That’s a special built in object that refers to the currently used elements that triggered this event.

It would be the same thing with the click event. You could use THIS. The THIS variable is available in all of the event handlers. Mouse over. Mouse out. Click. Load. Etc.

Male Student: Is P1 being passed to event?

Teacher: It’s an abstract representation of the event that happened. It’s also the exact position on the screen.

Male Student: You need an event for something being passed to?

Teacher: I could leave that out. It would still get passed there. It would just get lost. I don’t need it in there. It’s optional. It’s in there for consistency. We are not doing anything with the event. If I wanted to modify the event then I have a reference.

The next thing is the mouse out function. We are reducing the font size back. I could do twenty different behaviors on different elements.

Next. We are going to change, rather than one style at a time, the entire class of a paragraph. We did this yesterday. Here’s how we change the class. This is paragraph P1 that has been predefined.

When you run your JQuery code, it waits until the page loads. Then it says for the paragraph with the ID P1, when you mouse over it, remove the class class 1 and add the class 2. You can also add it on. In this case we want to get rid of it though. This is a nice way to quickly add and remove elements from the screen.

Since class two has a larger font size and different background color the style will look different on the page. That’s how we get the change with the mouse over.

The browser will automatically update this on the page.

Questions?

Is this conceptually easier than yesterday? I think it is. It has an easier way of using it than plain JavaScript.

That’s the mouse over behavior.

This is the mouse out behavior, which is just the reverse. Takes off class 2, puts on class 1.

Let’s move to the last example. Showing and hiding an element. This is an exact analog from yesterday, but we use JQuery to hide and show this.

The two buttons are called the show button and hide button. That’s the ID I have given.

When you click the show button, remember the JQuery waits until the page loaded, and it defines the behaviors. The show button will get the paragraph with the ID P1 and show it.

When you click hide it will hide P1. If you remember yesterday we were changing the display property. Now we don’t have to meddle with the details. It will just say show and hide.

There’s not much to say about that example.

Now we are going to move into the next series of examples. Effects. JQuery come prepackaged with several kinds of effects. I want to show you the commonly used ones.

Animating you can change the style of an element. It will slide it in or animate it into the new style or position.

I have the style sheet predefined. When I click the button it will animate the change from the old style to the new style.

It’s limited, but does easy things like moving the element. This starts with a boarder of two pixels, ends up with probably ten pixels. It does it in an incremental fashion. Same with the font size. It goes from a font size of 14 to 30.

That happens in the code. The first example has an ID animate button. The text we are animating is in a div called animate block.

For anything with animate button, when it is clicked run this function. The function says get animate block, and animate it with these parameters.

These are the CSS settings we want to change to.

1500 is the number of milliseconds it takes to do the animation. We can set that to what we want. This should take five seconds. It looks funky.

Questions?

That’s the animate function. The next thing is the toggle function. You switch one div for another. One paragraph for another. It looks like you change the content, but you are actually switching between two separate paragraph tags.

In the HTML we set it up so the button with the ID toggle button. We have two paragraphs with the class Toggle P, indicating which paragraphs will be swapped.

When you click this button it will show and hide one of these depending on the last state. The second one starts invisible from the style sheet. It won’t show up on the page. When you write the JavaScript it says when the page is ready define this animation.

When you click the toggle button it will run this code, which gets all the elements of class Toggle P. That means to switch them to the alternate state. If it’s hiding it will show. If it’s showing it will hide.

It looks similar to the image swap with the rabbit and the hat. Similar effect.

This doesn’t have to be a click. You can do this on mouse over or any other event button.

The next example is toggling with animation. It toggles between two paragraphs and animates them at the same time. That happens with this code [On overhead.]

We wait for someone to click the element with the ID toggle Slow button. We run this function. It gets the paragraphs with the ID Toggle Slow. It toggles them and passes the parameter slow.

I’m assuming we can pass it fast. I have never tried. I’m assuming there are parameters you can set for exactly how long you want it to take. I haven’t played around with this.

Here’s the next example. Slide down. That means when you click the slide down button it’s going to show something. While it shows it will make it look like it’s sliding slowing down the page. That looks for the element with the ID Slide Down Block. It passes slow.

These are the relevant elements on the page. This is the button, that’s the block. The block, by default, will be invisible. You don’t want it to show up when you load the page.

The next one is the Fade In Button. This is similar to the slide. It seems faded, instead of immediately showing up. It will fade in slowly That is set up the same way. You have a div with the ID Faded Block which is initially invisible. You have a faded button that will cause the animation to happen. Here’s the code [On overhead.]

That’s it for the example.

Male Student: What if you didn’t have anything in there? Does it matter in the slow box?

Teacher: Let’s try. I don’t use these personally. We will have to try it out.

It seems to be the same. It may default to slow.

Now we are going to jump to another bunch of things that JQuery can do.

There’s a link to the page outlining effects. You can go there. It’s not as intuitive as it could be done, but it gives you the effects.

The fade in takes two parameters of speed. The callback is the function to bring it back.

There are usually examples here too. You have information about the function and a demo. It shows you in the source tab, the source they used to create the demo.

It’s a pretty ok documentation. The code is so small and simple that it’s pretty easy to copy and paste in your own sites.

It also describes the parameters. Speed can be a number or words, like slow, fast, etc.

Fade In slow means how long it would take. I can define an anonymous function like this. When it’s done fading in it will call the function to pop up an alert, Done Fading In.

Let’s see if that works.

That’s how you would trigger different things when the animations and effects are completed. Most of these effects take the callback function.

This doesn’t have to be an anonyms function. I could put a name like Show Message. That would call the function to alert you that it’s done animating.

That’s the idea of callbacks.

I will leave that in there for you to have as a reference. It’s easier to read this way. I will leave it that way [On overhead.]

Now we move on to the quick overview of the other thing JQuery provides. User interface controls.

I didn’t do the example page for this. Go to the JQuery site and see what the user controls are. The drag and drop functions are interesting. I can make any element draggable. You tell it the ID of the element you want to make draggable, or the class name, and you call the draggable function on it.

There’s also a droppable function. Here’s both. I can drag the draggable and drop it in the droppable. [Class laughing.] I can drag it and drop it. That’s defined with saying this is the draggable thing and this is the droppable and when something is dropped in the droppable this is the function that will be called when the drop happens.

Sorry. [Teacher laughing.]

It’s four lines of code that may take you a hundred lines or more with ten years experience.

It’s a pretty powerful library. There’s little reason to use the native JavaScript code.

Male Student: What menu were you in?

Teacher: JQuery UI.

Female Student: Is this why Flash has become less used?

Teacher: JavaScript has become more sophisticated.

I will let you check out these examples. I want to highlight some interesting ones.

There’s a sortable list. It allows you to create lists of sortable lists. Their demo is not work. It should show up. I will have to come up with an example myself.

Let’s look at the accordion. You will see that somewhat frequently. That’s a menu like this [On overhead.] This is making something into an accordion menu. It looks like that [On overhead.] You can add this to your page with one line of code.

This is how you choose which element to make into an accordion. This is looking for the element with the ID accordion. You will have to structure your code the same way to make this work. You tell it which element is the containing element for the accordion menu. In that element you create a series of elements and divs.

A date picker can be a nightmare. You can make it look different in your CSS. The functionality is dictated by JQuery. You would want to use callback functions to indicate when someone clicks on a date and give it a response.

Let’s view the source here. They made an empty div for the clicker. They called a JQuery function to go into the element and fill in the information necessary for a date picker. You don’t have to do the coding for that.

Tabs are also something that are somewhat difficult to do. I need to find the example. The tab pickers are a series of divs that they converted into a series of tabs by using the one function call and supplying an ID of container div.

View the source to see the way it’s set up. Kind of accordion. The outer container div. Then a series of list items that are headings for the tabs. Then a series of divs that are the tab contents.

You see how they structured it. If I wanted it on my page I would copy and paste it first, then modify it.

You will want to make sure you include the scripts they indue in their examples. This has all the UI functionality in it. This has all the tabs. Include those same files, otherwise it won’t work.

Everything is based on the main JQuery library. Once you have that installed as you first script you can then run these.

Many third party developers make more functionality on JQuery. If you have a task you want to accomplish you can probably find it. Start with the basics first.

That’s it for JQuery for the examples.

I want you to, for the rest of the day, get practicing the layout and CSS. It’s critical to what we are doing here. If you can’t lay out the boxes side by side you can’t do the rest.

In this link to the assignment, there’s a diagram I want you to create. This is a mock one-commerce shop. I want you to create this in XHTML and CSS.

Then create a behavior, so when I mouse over any of these boxes, I will replace this thumbnail image with information about that.

When I first load the page I see a list of products, side by side. When I mouse over an image I see this product.

That’s your assignment.

First get HTML and CSS worked out. That’s the core. When you are done with that, then think about adding JQuery on top.

Questions about the assignment? About anything?

Male Student: Multiple JavaScript. I create a function that differing files have the same …

Teacher: Two functions with the same name in different files. That would be a problem. If two had the same function only the different one would be used. It’s called incapsulation. It’s a complicated technique. If you do get there you have to do them different.

Programming by definition incapsulates. You want to be clear which function you want to call. I will get further into that at the end of class.

Any other questions?

I’ll help you out if you need it. I want you to focus on this first just let me know if you have questions.

Student: General knowledge. What’s the advantage of using the other program then Flash?

Professor: You must learn the other program searches prefer HTML. It’s easier code. Not 100% of the world has the Flash.

Student: So you do whatever player?

Professor: Some have it, some don’t. It’s a minor issue it depends on the language and the animation. JQuery does some things but not all the FLash does. If you want to do a good animated game you are better with Flash but if you don’t care then you use
JQuery.

Or you could have both. It’s way more complicated but …

Ok. So that’s it. Start with the assignments. Or if you have things from the first classes get those done first. Then flag me down.

[Students working.]

Hi! Since we are in 2.0 with these Internet technologies and these foster our lives. I want to set up a networking time and celebrate our first week. At third and St. Marks there’s the Ale House and I want to go there after class.

Professor: Post that to the blog!

Speaker: 5 PM today.

[Students working.]

Take a lunch break for sustenance.

[Lunch.]

Your attention for a few minutes.

So I just posted something to the blog. These are the plug ins featured for JQuery to add functionality. These are useful so I have examples for these. You can Google the JQuery plug ins too. There are many.

One thing is curving corners. You can make rounded boxes. The dives are normally square but people get irritated when they try to make the carved boxes. So this plug in makes it essay. I’m specifying that these certain sides need to be rounded but no not others.

If you view the sourcing you see it’s simple.

These boxes. Then this one and this one here. It’s a paragraph of the effects. The code is for the first box is just the corner function on all the ID boxes. This first one is the only one that matches. I pulled the corner function from the library to make it do that.

Then the second has parameters. These are specifications for the corners. 16 pixels, then the top right has no rounded corner … the bottom corner is rounded at 16. So that’s it! Then you specify the CSS or style selector so you can pick the boxes on the corners then just apply.

The function is included in the top of the page here. This is the the plug in. It’s the script file. These are just JavaScript functions. You have to include these to make them work.

That’s it for that one.

Student: What’s the proffered method?

Professor: There’s no HTML way.

You can make the box image in the corner then put it in all four positions. You can make custom ones for different things that way. It’s very flexible and saves you time.

It only took a minute. But it would take 5 in HTML.

So the next one, is forming sample. It inserts placeholders in the form. These are all linked to the home pages of the people who made them. Then I linked them to my examples. If you want the original though, click the first link.

Here’s mine. See the placeholder text? I enter the text and it goes away I click again and it comes back. In CSS I styled the color and the text. It’s easy. The code I used is simple.

The input is down here. ID first thing. Up here I said for all elements with ID first name I said give this text then in the quotes you put the text.

Next. Alpha numeric. It limits the characters you enter in the form. Like if you want a phone number or email form, you want to not include certain characters.

I’ll try a dollar sign. But it’s rejected. So it limits the characters in these boxes.

Or you can’t capitalize here either. This one doesn’t accept letters.

This is an example of the exceptions to the rules. I accept the alpha numerics and commas, and periods. That’s the setting code. The source for this — I included the alpha numeric plug in as the script file. These are the text fields. Then the IDS. Text 1, 2,3 etc. Here’s the code. All the elements with ID text one. I entered what’s NOT acceptable. The last one is odd, since I said it should allow alpha numeric then these settings. Allow commas and periods and space characters. That’s that.

Light box is popular. It’s an easy way to make the slideshows. Quick and easy. [On board.]

It’s a few lines of code. There are nice navigation controls. This box will resize too. That’s the close button. You can have titles and captains too. It’s nice and easy to use and make a slide show.

Source is here. This is a required CSS file. They supply the CSS file so that’s how it makes it the way it looks. But you would modify this if you wanted it to look different. Just leave it until you get more comfortable. Then this script is the plug in. That’s the logic!

You can specify where the images are in the code. I’m specifying that all the elements of the ID gallery and the anchor tags in it “lightbox function” they put the buttons on the slide show. You see here.

It references the anchor gallery and the div tags. So the list of items and images you want in the slide show. Wrap it with a div then tell JQuery where to find it in the div.

It’s easy!

Next. Is Cycle. It’s another slide show. This has a variety of other slide shows with effects. You can navigate it to see the varieties. This is the basic one. It’s just a slide down one. You see the pictures of donkey’s that just slide. Then you can specify the animation. Like fade in or out.

Now the code. These are the images here. I have the div with the ID gallery. Then there are the image tags. In the JQuery section I specify where the Plug in gets the images. Here are the settings I specify how the image gets treated. There’s a default setting too.

I told it to scroll down and take 300 milliseconds with pictures. Then to pause if you hover over the picture. It stays on the picture that way. Take the mouse off then it changes.

That’s the pause setting.

Random means to randomize the images. If it can’t load then it stops after 2 seconds. The viewer won’t wait that way.

Then the plug in file is at the top as they all are.

That’s it. But browse around and Google the the plug noise. There are many.

Any questions? That’s it. Over the weekend think about your final projects. Conceptualize it for a final website. There’s only one more week. So make it simple. But you should show your skills. Think about it and get some ideas about what you want to do.

Student: So just for this week?

Professor: Take the weekend to review what we’ve done. But I want you to use the week for the final project. I don’t want to cram stuff in. Any questions?

That’s it! You are free to leave early but I’ll stick around.

[End of class.]

Professor: Good morning everyone. Any questions from yesterday? Anything all ALL? I posted new stuff on the blog about today’s lecture. Let me wait for another 2 minutes for the one person we’re waiting on. There’s some basic javascript documentations here on the screen.

Five more minutes and I’ll get started. Read as much as you can and we’ll start soon. We’ll get started. Anyone have questions about what you read so far or yesterday? Ok.

Student: I had nightmares.

Professor: You did?

Student: Wasn’t so bad.

Professor: Let’s run through what’s here.

[On screen.]

So the first part was how to put Javascript in a document. If you click that link there’s a description. There are three ways to put javascript in your document. First in the head of the document. This is an example of the head section of the document. There’s a script tag that allows you to put a javascript in the file. Same as the CSS file. The idea is that this links to the Javascript file.

Next way to do it is the exact same code on the inside of the body. Head and body – what’s the difference.

Student: Head is first

Professor: There is a good reason to put things in the head. The browser goes from top to bottom. Starts with head and goes down. If you want something to load immediately you put it in the head. You want those logics loaded before the visuals. There’s not much reason why you would link to an external link in the javascript file but if for some reason you need to do that you can. Some of the files I’ll show you I’ve done that. I’ll show those later.

The third way — put Javascript in the head, body or inside of another XHTML. Javascript can go as an attribute in HTML. There are special attributes — onclick is one. You can use this to call for a javascript function.

There’s also “onmouse over.” There are many attributes to trigger javascript. So what that does is that you can use scripts in the head or body to call javascript to open. So that was the document link from the blog. This is all there for you to read. I know that you can’t remember everything I say. It’s all documented. So you can go back as you need.

Ok. So the fundamental concept of javascript is the same as the concept of other languages. Javascript consists of logic and memory storage. The fundamental piece of memory that any program has is what’s called a variable. This blog linked from the latest post I just did explains a variable and how you would use it in Javascript. These concepts will apply to just about any program. People don’t consider HTML as a language but it’s a mark up language.

That’s what people talk about with programming. They talk about logic and conditional statements with different behaviors, etc.

Who has programming experience? Different brain types handle programming concepts differently. Some people get it right away. It doesn’t seem to have anything to do with prior experience. I think it’s related to logic. If you’ve done logic and math, it helps with programming but it’s not necessary.

I’ll go through it but feel free to stop me and ask questions as needed.

A variable is a piece of memory. That’s how to think about it. You’ll have to remember some of algebra. You have the same variable concepts. You have placeholders that are little bits of memory. A formula like y = 3 + 1 means Y equals 4.

So you can say Y has the number 4 in it. We stored the number 4 and put it into Y. That’s the concept of a variable. You’re creating memory and putting value into that. When I say what is the value of Y? You would say 4. You’ve remembered that Y is 4. That’s the concept of a variable.

So the computer knows that Y has the number 4 in it.

The letter Y is a variable. That’s what variable refers to. A variable is things that hold other values inside of them. It’s something that references some other value.

A variable doesn’t have to hold just numbers. Variables hold text, too. I could say Y equals “hello.” That stores the word “hello” in the variable. It can be numbers, text, some sort of objects, more sophisticated data, etc. The fact that the Y has storage capacity and store types of data makes it a variable.

I could say Y equals “hello” plus “name.” Anytime you see a word in JavaScript and most program languages, that’s not in quotes. You can see “hello” is in quotes and name is not in quotes. So something not in quotes is another variable. That’s a general rule. We’ll get into exceptions later.

So this equation means Y stores the word “hello” and glues it onto the other variable which is name. I’m using one variable to define another variable. So let’s say name has the word “bob” in it. So Y would be “hello,” space, “bob.”

Any questions?

If the name value was my name, this would be the direct equivalent of stating this. It’s as if name holds my name.

There’s a terminology difference between name and “[name deleted for privacy].” Name is a variable. “[name deleted for privacy]” is a literal. It’s not a placeholder; it’s the thing itself. “[name deleted for privacy]” doesn’t refer to another piece of data. “[name deleted for privacy]” IS the data.

So name is a placeholder. “[name deleted for privacy]” is a literal. Any questions?

In most programming languages, you refer to text literals as strings. That’s the word we use for text. “String” doesn’t mean a piece of string. “String” means text in quotes. So if I glue two strings together like the example on the screen, I end up with y = “Hello [name deleted for privacy].” That’s concatenating. So when I tell the computer to do “hello” + “[name deleted for privacy]” it’s the same as “Hello [name deleted for privacy].”

Any questions?

I have two variables in this example now. [On screen.] This is now JavaScript code that I’m writing. Var says I’m defining a variable. I’ll call that variable X. I want X to be equal to a number. So we want JavaScript to create a variable X and put a 3 in it. So think of X as a memory that stores the 3. So from now in the code X equals 3.

I’m setting variable Y to be equal to whatever’s in variable X plus 1. So X is a reference to number 3. The computer knows X equals 3. So now Y is equal to 3 + 1.

There are two separate things you do in JavaScript. You can declare a variable and define a variable. This is true in many languages but not all languages. You can declare to use a variable called firstname. I don’t have to define firstname right now but I can tell it to reserve that word for me as a variable. Before you define a variable, you have to declare your intention to use it.

We did that in the example earlier. We declared X as 3 and then we defined a variable. Whenever you see equal, that means you’re defining it. Declaring and defining are two slightly different concepts. So have to declare var X before you can say “= 3.” So after we declare it, we can define it.

On this example we’re declaring the variable. JavaScript is untyped. If you know programming and you know different text variables, some are numbers, strings, objects, etc., you get used to knowing a particular variable has particular properties. If I add two numbers, it’s mathematical. JavaScript knows all those standards.

I’m redefining a variable here. [On screen.] There’s declaring, which says I’ll use this variable. Defining is setting a variable equal to a value. In this example I’m declaring I and defining it as 100. I’m putting 100 into the letter I. So now I’m saying I equals I plus 1. I’ve added 1 to 100. I’ve taken the previous value and added 1. In the third line I’m overdoing it altogether and changing it to a string of text. I can always wipe something out and not keep the original value. The first line I set it at 100. The second line I change it to 101. The third line I change it to text. You can continually overwrite variables.

Once you define them, you don’t have to re-declare every time. You can continue to use the variable without re-declaring it.

Student: Is there a check? Or do you keep it in your head?

Professor: It’s up to you. I think that was a bad design idea. There are several languages that keep track of those things. But non-programmers originally found it easier to do this. But JavaScript is sophisticated so that increases the burden on the programmer.

In most languages, what we did up top causes difficulty. Most languages would force to use a number or a string. JavaScript is untyped. So you can continually overwrite data with other data.

That’s the introduction to variables. The variable is the placeholder that stores some value. You declare it with “var” and then define it by setting it equal to something.

Student: When you change the definition, how do we know when the first definition happens and then the second, etc.?

Professor: It sticks to it until you change it. I is equal to 100 until I change it somewhere down the code. Here it’s the next line down. You have to remember how you change it in the code as the programmer.

Student: So wherever it happens in the page is when the changes?

Professor: Yes. In HTML, it goes from up to bottom.

Student: Is that confusing to identify the variable?

Professor: There are some situations you want to change it. It wouldn’t make sense to do what I did in this example. But sometimes you’ll want to change the variable somewhere in your code. When you see it, it’ll make more sense.

Any other questions about variables? Let’s move onto functions, which is the second most important concept in programming.

Variables store memory of one particular type. A function stores a series of commands that get run as a whole together. You might remember in the variable explanation, I have two lines of code. [On screen.] These are two commands I’m instructing the JavaScript processor to run two separate commands.

A function is like taking these two commands and storing them in memory. We’re not storing a particular value but the idea that we want to run the two commands. Then a function tells it to run those two commands at some point in my code.

This isn’t a great example. Let me show something else. This is a function definition. [On screen.] This says I’m defining the function. Sorry, we’re declaring a function. It’s like when you declare a variable. So we give the function a name. So I’m using “showResult” as my name of the function. We’ll ignore (result) for now.

This is a set of two commands that I want to run at some other point in time. I’m declaring my intention to run these two commands at some point in the future. They only run when I call the function. I’ll tell the code to run the function at some point in my code and JavaScript runs the function.

So the function creates a variable message. “msg” is shorthand for message. It’s syntax. It says “the result of your calculation is” something. So then it pops up in a pop-up box. “Alert” is a built in function of the JavaScript engine that pops up a box. So this function pops up a box with this text message.

When I call this function in the code, I call it with an argument. The argument is in the parentheses (result). Let me go down the screen. [On screen.] This breaks it down line by line. Function showResult is a declaration. It takes one argument that I call (result). That’s a variable name. It’s going to take a variable called (result). I’m declaring my intention to use the function showResult.

Student: Are functions and variables case sensitive?

Professor: Yes, everything is case sensitive in JavaScript.

Student: So would you have “showResult” and a different function with “ShowResult”? Is it that specific?

Professor: Yes. This is a convention of using the first word with lower case and the second word capital case. It’s called camel case because it’s kind of bumpy. The “R” has a bump in the word. This is the convention I’d like you to use. If you have a word for a variable or function with two words, you can’t use spaces. So use camel case. So capitalize the letter of every word EXCEPT the first word. And all the rest of the letters should be lower case. We have a function called showResult. We indicated it’ll accept the variable that we call result. This next line — [On screen.] — here. That’s inside the function or inside the brackets. Inside the brackets are the commands for the line. That line is inside the brackets. It says “create a variable message equal to this text.” The result of the calculation is plus the result. What does that mean”plus Result.” It’ll glue together the “string literal” the literal value plus this word (variable). It’ll take the variable and glue it to the end of the text. What’s in the variable result? Depends on what we put in the function. This function accepts when you tell it to run it’ll ask for the value of the variable result. So you’ll tell it what to use for the value of the variable result. You can give it ten different values if you want. It’ll pop up 10 different messages because we add the result. We’ll go through that in a moment.

The last line inside the function is built in as a javascript function. This is “Calling.” This is how you call a function. You use the function name and in the parentheses you supply the value. This will accept a text then it pops up. So I tell it to call “function alert” and send this value of the variable. So it knows to pop up the text because I told it to. So is that clear? This is a concept that’s hard for people.

Student: The message. You can put an image or something else

Professor: Alert — this expects text. So it’s created only for text. There are other ways to pop up images

Student: It’ll have a message.

Professor: The variable name may be different. We picked this ourselves. You can stick other variables in there. The bracket closes the function. This is again, beginning (start of the lines of the command in the function). The ending bracket indicates closure.

I’ll go through everything again. Function is a declaration for a function. ShowResult is the same attached to the function. I use lower camel case which has a lower first letter for the first word and a capital letter for the rest of the words. You supply it when you call the function and this [On screen.] indicates the variable named message which depends on the value you supply. This pops up the variable message and is a built in function that exists in the browser. This is how you call a function. When you see a word in parentheses — that’s how you call a function and you recognize that as how to call a function. You won’t see the word directly followed by opening and closing protheses with something inside it creating nothing. You won’t see that and it not be a function. This will always be a function. That’s a declaration called a function.

So — this is another example of the same concept. I’m declaring a variable X. Setting it equal to 10. Declare a variable Y and setting that equal to X times 1000. So this is equal to 10,000. This multiples it and stores it in Y. Y is equal at this point to 10,000. Right? I’m calling that function showResult and passing it. This is called passing a variable or argument. I’m passing the argument 10,000. [On screen.]

So don’t mistake this for the variable. I’m passing the value of the variable. I’m saying call the function and send 10,000 not Y although they’re equivalent it can confuse you.
Student: Do you showResult X + Y?

Professor: You can do that too. I can also put in the number 10,000. So I call the function and send the number 10,000. When the function gets called in the code you see the word with the protheses. So you know that’s a command to run the function. It goes to where we define it to run and it tries to run. It puts 10,000 in automatically. When I supplied the number in parenthesises. So that’s why I try to drill in the point that this doesn’t send Y it sends the value of Y (10,000). So we call a function and supply it with the number 10,000. The function the way it works, it knows to expect to receive a value. It doesn’t know the value but it knows to expect it. Then it puts the value in “Result.” This indicates the name of the function as well as the fact that it expects to receive. When it’s called it puts the value in “Result.” Then the result is 10,000. Then that pops it in the window.

That’s the 4 concept of function definitions. Whereas the last function had one argument I’m now showing there can be many variables. This function according to this declaration would expect 2 values not one. The two values are put in two variables – parameter 1 and 2. It’s up to you as the coder to determine your functions. So you can call it this [On screen.] — you determine the function and it gets passed to these two variables inside the function.

Who’s confused?

Ok. Anything specific? We’ll see this in action

Student: The result … how did the result know …. I understand showResult. Is that the result? I get it but ….

Professor: This?

Student: Just … showResult Y. Ok that’s 10,000. I get that. But the result in parentheses … ????

Professor: You start here [On screen.]? So you understand Y is 10,000. So we call the function and tell it to take the number and do something. Like a factory. That’s the function. So we take the raw material of 10,000. The number that you give the function gets put automatically in the variable call result. The result in this case is 10,000

Student: How does result — if there’s more than one math function??
Professor: When I call it. Good question. When I declare the function it’s not run right away. It’s not processed right away it’s stored in memory. So I can run that a hundred time. I can run the same function as many times as I want. When I call it I tell it the value. So I can say “run 10,000 in the variable result.” Another time I can say “run 5.” What you put in the parentheses is what is put in the variable result.

Student: ShowResult is result in a way?

Professor: ShowResult is the function name.

Student: I don’t have a question.

Professor: General anxiety? I’ll help you through that. [Class laughing.]

When I show these in practice it’ll make more sense
Student: Can you show it using the example you gave in the first description of javascript. The head of the HTML there’s a box … Is that possible?

Professor: I’m not sure what you’re talking about.

Student: The first page of javascript. One of those examples. …. the one you just passed. Can you click on one of those. Is it too far fetched?

Professor: Ok. When I call that function alert that’s what pops up. This technical looking box. If you want to look at the javascript code you can “view Source.” This will bring up the code. We can look at this. So this shows a regular HTML document. Down here [On screen.] at the end of the body is this script tag linking to an external script. The script does something. The code is not here. The code is in the external file or else you’d see the code here. There’s no code, just the link. So if I want to view the code you view the file here. [On screen.]

Yes. I want to show how to do the browser by itself first. So if I want to look at the file in the browser I copy the link. This link is relative to where the HTML document lives. So I copy and close the window. And so relative to the HTML document I can take the name of the document and paste the script. It’s in a subfolder called scripts. It has only one line of code.

This is a command calling the function. You see the word. And it gives a “string literal” hello world. Every string has a semi colon. It supplies it with one parameter “hello world” the engine knows to pop up the window with the X. If I said “hello morning” it would pop up that. It depends on what you supply as a value.

So does that explain it?

Student: I guess with time.

Professor: I’ll go through more examples. So let’s go through the example listed from the blog.

We’ve seen how to link the different ways in javascript. Head, body or HTML. I’ll skip the top section. We’ll see that anyway as we demonstrate. These are there to show you the concepts.

So here’s an example of creating a variable and printing the value of the variable to a page.

[On screen.]

So this created a variable and this is the result of the variable of the javascript function column. View page source. You see there what the javascript looks like. It’s not the best format in HTML. My tabs are funny. But the idea is here’s the beginning of javascript. This is a script tag that indicates Javascript code This is the end tag. So between the opening and end is javascript code so it’s known this is Javascript not HTML. Within the script tag I have two lines of Javascript code.

The first one creates a variable. It declares the variable msg. It puts “hello world” into it. Document.write is a built-in function of the browser. It writes whatever’s in the parentheses as the argument for the object. So it’ll write msg, which is “Hello World!” So that’s why you see that text on the page. Any questions?

Let’s go to popping up a variable in an alert box. This is what we just saw with a different code. So you load the page and an alert box pops up. This is similar to what we just saw. But instead of document.write, we use alert. It pops the message up in a box. So I’ll view the page source.

This code is almost identical to the last example but I’m using alert instead of document.write. So we have the beginning of the script tag and the end of the script tag. The two lines are in between those so the browser knows it’s JavaScript and not HTML.

We put the words “hello World” into the variable of msg. And then we define the alert as msg. And then it pops that msg into a box.

I’m going to show you pitfalls of JavaScript as an untyped language. These are different ways to add things together. [On screen.] In some cases, 10 plus 20 is 30. In other cases, 10 plus 20 is 1020. Other cases, 10 plus something is 10something. And then sometimes 10 times something is NaN, which is not a number.

The fact that it’s untyped is somewhat misleading. So the 10 plus 20 on the first line, these are number integer literals. They’re not variables. They’re literal values. What we see is what we mean. We’re not referencing something else. So JavaScript takes the numbers and puts them together in a mathematical equation.

When you put quotes around the numbers, JavaScript converts them into strings (text). So behind the scenes, there is a difference when you put quotes around the numbers. They’re treated just like letters. So that means you’re gluing the strings together. So the result is the glued together form. So it’s 1020. Be careful when you’re using numbers and strings. Try to make sure your numbers are outside of quotes and strings are inside of quotes.

In JavaScript you can add a normal number to a string. So that converts the number to a string automatically. So it’s attach the two pieces together as if they were both text.

Student: So if you had R2D2 plus 2, it would be R2D24?

Professor: No it’s R2D22. The third example it’s adding 10 to a string.

The fourth example is trying to convert the word to a number. So you end up with an error saying that the value is not a number. Something went wrong. It doesn’t know what to do in the fourth example. JavaScript tries to figure out what you’re talking about, but in the fourth example it doesn’t get it. When you see NaN, JavaScript doesn’t know if you’re dealing with texts or numbers.

That’s the problem with untyped languages. Let’s move onto the next example which is exhibiting the differences between adding and concatenating strings. JavaScript uses the plus sign to indicate concatenating. So “Bob” + “cat” = “bobcat.”

This is actually the exact same thing so I won’t go through it.

Let’s define an array. Let’s view the code here. An array is a list of items. A variable is a single item. An array is a type of variable that’s a list of different elements. An array can hold an infinite number of subvariables. So here we declare an array. [On screen.] It’s exactly like any variable declaration. I call my variables that hold arrays arr plus some word. That way I know it’s supposed to be an array. I call this built in function a new Array. It’s not just a single variable. It’s a list of values.

On the second line, I’m defining the first element of the list to be “item 1.” The second element is “item 2,” etc. So arrItems has a list of other subvariables. It references four different variables. It starts with zero, then 1, etc. So when I want the first list, I’ll ask for arrItems0. The indexing starts with 0. The first value is always zero.

Can everyone read that? [On screen.] I wanted to minimize it so there’s no text wrapping.

So here we have a loop. [On screen.] This is sophisticated. We’re looping through the array. That means we’ll keep trying to find new values stored in the array until there are no more values. Then we’ll print them out on the page one by one. So it starts with index equal to zero. So we’ll start with arrItems0. We’ll keep going until the number we have “i,” is no longer left in the list. We’ll increment that number by 1 every time we try it. This is a repeated task we run called a loop.

It assumes i is equal to zero. It adds 1 each time we do the operation. It continues until there are no more elements in the array. This is getting more complicated. Each time we run this command, this is what it does. [On screen.] It will create a variable called “line.” It sets line equal to an HTML p tag. It’s concatenated with an array and then concatenated with the ending p tag.

I’ll run through that process one more time. We have an array at the top. We create the list of things which is the array. We add four elements to the array stored at indexes zero through 3. So if I want the fourth element, I have to look for 3. 3 has item 4. 2 has item 3, etc. Does this make sense?

Each element in the list has a number associated with it. Down here, [On screen.] We will go in a loop and repeat a task over and over again. How many times we repeat the task depends on the number of elements in the array. We’ll start from the zero index of the array. We’ll continue one by one until i is equal to the number of elements in the array. For each element, we’ll print it out.

I’ll show how that works. So we’ve printed out the contents of the array for each element. We started out with the zero element, then the first, second, and third element. We’ve looped through the elements of the array.

I didn’t have four document.write commands. I just have one but it printed out four things. I’m only telling it to write once, but it prints out four things. This command tells it to loop through the code multiple times. I don’t want to get bogged down in this right now. But this is a way to creating a list and then telling what to do with the list.

Student: I’m confused. You have to have the top part with all the list numbers. So how is that faster?

Professor: Eventually we won’t write it out each time. We’ll eventually have it more automated. There’s another way to do the top part. This is very conceptual. I’m just going through the concepts. I want to get the point in that the array is a list of things. You can iterate through the array one by one.

Student: Is i always the value for the list of the array?

Professor: I haven’t gone into that so much. This bottom code is what’s called a four loop. There are three arguments or subsections to this line. There’s the starting part. When this loop first runs, we create a variable called i. We can name it whatever we want. We’re creating the variable var i.

Student: Did we define i?

Professor: No. I should technically have declared that I was going to use the variable i. So imagine that I did that. We’re declaring i and setting it equal to the initial statement. So it starts with i and then do the two lines of code. Since i equals zero, it decatonates and then writes back to the page. Next time around, i equals i plus 1. So it creates another version of i and then adds 1 to it. I’ll get into it more later.

So let’s leave that for now.

Let’s run through some concepts we’ve talked about earlier. Defining and calling a simple function, we’ve seen how that works conceptually. Here we have the same idea. [On screen.] We’re calling the function which is popping up an alert box. We can click to view the contains of the file. We’ve already seen this same code. It’s a function. It’s called showSomething. This one does not take any parameters. It’s not expecting you to supply it with data. It creates a message and pops up the message in an alert box by calling the built-in alert function.

Any questions? We’ve seen this code on the blog before. We’re creating a function, defining the variable, and popping it into an alert box.

Now we’ll move to passing an argument. This is the same code as the prior example except this function expects to be supplied with a parameter. So you tell it what to pop up in the alert box. The function just alerts what you supply it with. Whatever you call and give the function is what pops up in the message. It’s not hard coded in the function.

I’ll view the source of the HTML page. You’ll see the JavaScript code. [On screen.] Everything highlighted is JavaScript code. Here is a comment. It’s not evaluated as being actual JavaScript code. It’s just a note for you.

Student: How does it know where it ends?

Professor: This is a one-line comment. The // indicates that everything on the one line is the comment. The next line is not part of the comment. The two lines here should all be on one line. If you have a line break, there’ll be an error. I just had to adjust the screen for viewing.

This is a line with a variable called msg. Then we have a function that gives it text to do something with it. We call the function and then we pass the argument as text to pop in the alert box. The control in this example is slightly different from the last example. Prior, we just ran the function and it popped an alert box with hard coded text.

In this example, we define the text and then we call the function and supply it with the text. So you could change the contents of the alert box. In the last example, you changed the function itself.

Questions?
Let’s move onto the next example.

Here we have if else statements. Here we get into logic. If something then something. So if you view source on this file … the logic part of is the script. So this is creating a variable i Which is created and set to 10. This checks if i Equals 10. If i Equals ten it’ll run the code between the brackets. It’ll show us that. Otherwise that’s what “else” stands for if that didn’t work then it’s not 10 and will run what’s here in these brackets “i Equals 9.” If it’s equal to 9 it writes this text. If neither is true it’s write out “is not equal to 10 or 9.” This is simple “if, else” statement. If one thing is true do this code, if that’s not true then make this other code, etc. You can have many else, if’s. You don’t have to have just one else/if. I can make conditions for a variety of code. This is a conditional statement. You check to see if a condition is true or false. Is i =10. Yes or no? Am I the instructor? Yes/no. The way to think about it is matching condition. Is this correct? In this case it IS correct. So it’ll skip the other two sections. This is the nature of if, then. It skips what’s not true. If we change this to 9 it’ll skip the false statement “i.=10.” It’ll try to match. So I’ll modify it now. [On screen.]

So now I’ve changed it to 9. Now i = 9. So it’ll only run the code that matches that condition. So let’s make sure that’s true. This should say i = 9. Not the most exciting example. But it shows that you can match conditions. We’ll use this extensively — this concept of else/if. So questions about “if”? Let’s run through that again.

Student: Why do you use a double = sign?

Professor: Good question. If I said i = 10 it would take 10 and put it into i As a variable. So many C based languages use double equal signs for comparative commands. Comparison compares the two to see if they’re equal. That’s the double equal sign. It compares the value of i To 10. Are they the same? True or false is the comparison. The code values if the variable is true or false.

Back to loops. Next example …

Loops are critical to code.

So let’s view page source. This HTML document has all the regular HTML stuff. But includes Javascript. This is an external script because it includes the source and external file so you know you need to look in the file. This is like CSS. However we have the script tag here that doesn’t have the source attribute. [On screen.] this does, this doesn’t. Between the opening and closing tag you’ll see the script here on the page.

This you should recognize as a function call. This function is loop. You see the word and the function next to it.
We’ll look in the script file and see where the function is declared. It’s not in here [On screen.]

Copy that. Paste it up in the top. Ok. So here I’ve done what I didn’t do before. I use the variable called i What this function does — this is the name of the function. Between these two brackets are the commands run when you call the function. When you call the function it creates the variable i Then you repeat the task. When you see the word “for” it means you’ll be looping. It could be one line or multiple lines. The nature of the for statement is that it has 3 conditions it uses to decide how many times to run the task. This will be run several times depending on the conditions. For takes the starting point. It’s common to see “setting up a variable = something Else.” This is putting 1 in the variable i The first time you run the loop it does something with the number. This case it’s writing out the number with a break tag. We write the number like HTML. The second time around i ++ get’s evaluated.

What this means is i Is equal to i + 1. This means that i = 2. It takes the value of i And adds 1. Each time it runs it increments the number we set in the first condition, in this case the number 1.

After it increments that number before it runs the second time it checks to see if the condition is 2. Is i = 2. The first time the loop runs i = 1. So it writes the number 1. Then i Becomes 2 and gets incremented. The code checks that i Is less than 10. Then it increments and checks to see that 3 is less than 10. Then increments 4, checks to make sure that 4 is less than 10, etc. Until i =10. This checks to make sure that 10 is less than 10 which isn’t true so it won’t write the code anymore.

So that’s the nature of a loop. You have a condition that has to be true. It’ll quit after this is no longer true.

Student: That function writes it out. So you don’t have an argument. Is that why the top bracket is empty?

Professor: This is the receiving end of the function. So that’s not really related to the output. Think of a function like an assembly line. It takes in one thing and spits out another.

Student: If you took out the middle would it go to infinity?

Professor: This for loop. The statement “for” has to have 3 things inside it. But I’ll show you what I can do.

[On screen.]

You can just use “true” so this is always true and always keeps going. If I say false it’ll never run or process. So if you want — let’s try it. It’s infinite loop. It’ll crash the browser. Unless the browser is smart enough. These browsers can detect … See how it’s loading? It’ll eventually detect it. I hope

[Class laughing.]

Now we can’t do anything. The browser is crashed.

That’s the nature of for loop. You have to be careful so you don’t put yourself in this situation

Student: This is similar to Java.

Professor: Yes. All C based languages are the same. Javascript and Java are both C. They’re like siblings. They’re not designed to be like ..

Student: If you know Java you can apply it to javascript?
Professor: Sure. Definitely. Or you can apply it to C or C sharp or Python

Student: They’re all based the same?

Professor: Sure. I think they’re common. They use functions and variables. So everything applies. An untyped language — Java is not an untyped languages. So there are differences. We crashed the browser here. So I have to quit.

So just to review … “For” is a command for a loop. It starts with one condition. It runs what’s in the brackets and increments — in this case 1 – and stops when the condition is no longer true.

So another loop is called a “while loop.” This is a slightly different loop. Same is true to make sure if something is true or false. The While loop looks like this [On screen.]

That’s the HTML file. Set up the same as the other file. We call it function. The function is defined in the external script. We look in the script to see the function.

This is a while loop. Unlike the for loop, which takes three conditions, the while loop takes one. So long as this condition is true, it keeps running. So we start out with variable i as 1. As long as i is less than 10, we run these two commands. We write out some text. We increment i by 1. It’s very similar but I’m incrementing in all line down here.

We’re setting up i as 1 initially. We’re incrementing each time we run the loop. We run it as long as i is less than 10. This is the same as the other loop. This is just another way of doing it. We’ll go into why it might be quicker to do one versus the other at a later point.

The output is exactly the same as the last one. It quits when it hits 9 because 9 + 1 is 10. 10 is not less than 10, so it doesn’t print out. Any questions?

Student: Why not use that one?

Professor: Let me think of an example. I can’t think of anything to prefer one over the other right now. When we get into database queries, etc., we’ll see the conventions people use for the codes is one over the other. Conceptually it’s not too different.

Less than or equal to is a good question. You don’t have to just have a less than sign. You can have less than or equal to, greater than, greater than or equal to. You can also have not equal to. != is the not equal to sign. Double equals is the comparison. Not equals is !=. Greater than is >. Less than is < . Greater than or equal to is >=. Less than or equal to is <=.

Now we have foreach loops. Foreach loops are most useful in an array situation.

Remember I said you have an array indexed by number. Sometimes your arrays are indexed by words instead of numbers. You can index an array with numbers or words (strings). In this case, the element of our array called arrItems ["something."] When I say the code is equal to nothing, it matches it up with “item 2.” Sometimes you forget the names you give things. Sometimes it’s not important what the index is. You just want to loop through the items in an array. This is how you do that. It doesn’t matter whether you use numbers or strings. It goes through all the elements in the array and prints it out.

For is another for loop. It’s a variation on the for loop. It says for each item in this list of items, for each element of the array, print out something or do something. It goes through the elements of the array and puts each element in a variable called item. Item is a variable name. It’s receiving the currently iterated element of the array. Then we’ll create a line of text and printing it out based on the item.

Foreach loops are identical to while loops or maybe for loops but there are reasons why you would use one over the other. I’ll go into that later when I show examples. This is another way of looping an array. Any questions?

Let’s continue. The foreach loop is the least frequently used loop with the stuff we do in this class.

Now we get to fun stuff. What do you actually use all of this for? This isn’t real-world but we’ll show that you can detect different user events with JavaScript. When I click this button, the pop up comes with the alert. So instead of waiting for the page to load, you can wait for the user to do something. We can view the source. [On screen.]

There’s an input tag. Remember, the type button is relatively useless on its own. It doesn’t have a default behavior. That’s good for us because now we can attach JavaScript event handler to it that does something without worry about what the button would normally do on its own. So we add this to the input tag. [On screen.] It’s a special attribute. The browser knows we’ll indicate a behavior when something happens. So the browser knows what to do with this code.

The browser runs the JavaScript code. In this case what am I doing? The word is in camel case. What is this code doing?

Student: Calling a function.

Professor: Right. It’s a word with parentheses so it’s calling a function. Whenever you wonder what that function does, I usually define functions in an external script. In this case, it’s an attribute of an HTML element. But the function is pure JavaScript so it can have its own file out of the way. My function is defined in that file. I’ll copy that file into the browser so we can view it.

[On screen.] That’s what the function does. It creates a variable called message and puts the word “Hello” in it. It pops that in an alert box by calling the built-in JavaScript alert function. Now this happens when the user clicks a button. If you look at the HTML, this function is attached to the button. It’s in the onclick attribute. When you see onclick or onmouseover, you define it as an HTML element that you want to apply to that behavior.

Any questions?

Student: The onclick can be on any element?

Professor: Any element that displays on a page. Let’s do onmouseover. This is very similar. Instead of responding to a click, it responds to mouse over. So when I move the mouse over, something happens. It responds to a mouse over even though it says “click me.” That’s bad interfacing.

Let’s open up the script. Just like the onclick attribute, we also have the onmouseover attribute. The browser interprets it as JavaScript code. That’s straightforward. When someone mouses over the element, it says “Hello.” So that’s identical to the last example. Let’s take a look at the code.

It’s the same function. [On screen.] Questions about any of this so far?

Student: Is all of the “say hello, etc.” a nature of the JavaScript? It seems like a weird way to write it all out. When you call that out there’s mouseover, quotations, say hello, brackets, quotation marks, etc.

Professor: The reason for that is XHTML attributes are all in the same format. The value equals some other value in parentheses. So this has to be equal to something in parentheses. That’s how XHTML is defined.

This is a JavaScript command I’m running. It can only be followed by a semicolon. If you didn’t have that semicolon, it’ll still function. But I want you to get into the habit of always putting the semicolon at the end. You’ll thank me for it later on. When you have a series of commands, you’ll need that semicolon.

That’s how you attach behavior for onmouseover. Let’s take a look at another. They’re all very similar.

This is detecting mouseout. So when the mouse over happens when I mouse over, in this case I mouse out and it triggers. It’s almost identical to the first two examples. In this case, it happens with the onmouseout attribute. You see how it says onmouseout. Now it says goodbye. SayGoodbye alerts another function. If you wanted to look at that function, you can go to the XHTML script that’s defining it.

Let’s take a look at the next one. You can detect that the page is loaded. This function waits until the page is fully loaded and then pops up an alert. That happens with this code. [On screen.] The body actually has a special attribute onload that waits until the page is loaded and then does the function. This is how you code a function to wait until the page is loaded. That can be important sometimes.

Any questions? That’s not a user interaction issue.

Student: What if the page continues loading?

Professor: Did that example do that? It finished loading for me. Try refreshing your browser.

Student: If you click on ok it stops loading.

Professor: When that alert is open? That’s a good point about alert boxes. I use them just for debugging and testing code. You usually don’t want that popping up. You’ll find other ways to display information to your user. I use the alert pages to debug so that it halts programs in the middle until you figure out what you need to do next. It’s a useful feature that it stops the function until you click on it.

Student: The page fully loads

Professor: It’s the same effect as if you had it on the bottom of the body. Let’s go to the next example.

Let’s detect that someone has submitted a form. You enter text and submit. There’s an alert message. There’s a special attribute that detects if someone has submitted a form. That looks like this. [On screen.] It’s onsubmit attribute of a form. We’re saying here’s a form. There’s stuff in the form. When a user clicks submit, do some JavaScript code. It’s the same context except this goes in the form first. There are specific tags that accept specific attributes.

The form tag has a special onsubmit. The function I call when the user clicks submit.

Student: Does it always clear the form?

Professor: So you click submit and it went away? That’s because you submitted data. So this submits the data and reloads the page. There’s a way we can prevent the form from doing that. We’ll get into that later.

Now we get to the more fun stuff. These are basics. I’ve shown you how to structure JavaScript code and write it, where does it go in the HTML code, etc. I’ve shown you how to wait until the user does something before triggering JavaScript code. Now we’ll combine it and change the behavior of the page.

This is called dynamic HTML or AJAX, though AJAX is not correct technically. We’ll use onmouseover to change events. So there’s a bunny changing to a cat. This is swapping two images. One image starts until the user mouses over and then the image changes. They both have individually addressable events. I mouse over the image and it knows what to replace it. The same thing with the second image.

Let’s see what the code looks like. This is image swapping. We’re waiting until the user does something and then the image gets loaded.

Let’s focus on the image tag. So this is an image tag. You’ve seen these before. You’ve coded them. You’ve given it an ID as image 1. This is reference, not code. So this is for style for this image. Same with javascript. When I mouse over the image it knows to look for that image with that ID not another image. So we reference one image not another. This is the source file for the rabbit. When the page loads it shows up (rabbit image). When the usermouse is over, we call a function with two parameters. Between the parentheses is the function. The first is the ID, the second is the file name. Understand? It’s like the functions we called before but we have two parameters. The first is the ID and the second is the file name

Student: Double quotes matter?

Professor: You can’t use double quotes on the inside. Because they would think it was the beginning and end of the HTML object. So we have to use single quotes internally. Double on the outside. So I can mix and match as long as you’re consistent which is on the outside and which are on the inside. So now we look at the swap image function. The most important part is calling the function the right information. The ID (image 1) and the file name we want in place of the image tag. Let’s open the Javascript file and see the function. So ignore this for now.

[On screen.]

So swap image is a function. It takes two parameters. You know that right? It stores them and puts in two variables. One LID and one for new image. These are variable names I’ve chosen in my code. Now we access the HTML element itself. We get an element by ID so it stores it in it’s memory in imageEL. [On screen.] The element we get is the element we assigned by the ID. It takes this ID and gets the element data and stores it in a variable image EL. So there’s an HTML for what an element is. This is not a number or string it’s an internal object representation. So don’t worry about what that is but remember this is a built in function to get an object by it’s ID.

Here we change the source attribute of the image tag. So that element has a source attribute. We’re changing that to the new source of the function.

So let me repeat what this code does. When you mouse over the image it triggers the “Onmouseover.” We defined in the XHTML code for the mouse over image (ID.1) we call a function “swap image.” We have the ID of the image we moused over. The second is the file name we want to load to the image space. We change the source file of the image to this file here. This happens in the function because it expects the ID and the new image path. It gets the image tag in an object representation. It gets data from the image and stores it in image EL and changes the source property to be the new URL for this function.

Questions about this function?

You can see that actually there’s only two lines of code in the function and only one bit of code in the HTML. It’s simple. You just change the source property of the image. You see when I mouse out it does the same thing except it’s switched back. It’s the same function getting called. When I mouse out it triggers the mouse out and it gives an image ID of the image we moused over but the original file to put back in the spot. So the rabbit is back where it was before. It reverts back to the original image.

So it does the same thing for the second image except it’s a different image ID. The image tag is the same but the image ID is the ID of the second, not the first. That’s how the code knows to change the second image.

Questions about this example? You’ve seen this before probably. Student: Let me ask a question. Maybe it’s … from the user experience how is it different from sprite [sp?]

Professor: This looks the same. If I mouse over I can change it to a different icon. There’s no real answer. It’s the same experience. If you have a sprite you have two images on top of one another. This would be done the same way in Sprite [sp?] You can do it one way or another it doesn’t matter. Sprite is used for smaller icons. It’s more work for the server. So it’s used for small files to save the server. You don’t see it used so much for this big stuff.

Ok. Now to the next example. Modifying an individual style sheet. Here’s the basic HTML. When I mouse over the font changes. Mouse out it changes. This is not so different than the code we just saw. Let’s go to that code. [On screen.]

Ok. So we have an external script linked from the head. This is the same for all the scripts. We have this one paragraph with an ID of P1. It has two functions one for mousing in and one for out. So when you mouse over the image you know already that this is a function. You see the word with parentheses next to it. So you recognize that as a function. So we call a function called “change font size.” We have the ID of the paragraph we want to change and the point size we want to change it to. When you mouse out you change it to the default on the browser. So this is like the image swap right? Same set up in HTML. You mouse over there’s an attribute and it supplies an ID and the data you want to use.

So let’s open up Javascript file. The first line is the same as the image swap. Just the function set up is that you have a declaration, name in lower camel case, the parameter of the ID, and the second parameter is the point size. So first what it does is take the ID in parameter and gets the corresponding HTML element and stores it in memory. You get the element by the ID and store it in the variable EL. In this case instead of changing the image source we change the style sheet font size property. This references the CSS saying “get the style corresponding to the element and get the font size and change it to the new size of the function ” You see there’s a notation. There’s an element, property, and sub- property.

This is an element that has a style associated with it called font size. This is a hierarchy. The element has a style and the style has a font size.

So when you pass the parameter is what the element will get. When you mouse over it changes font size and mouse out to change to original. Mouse over is 20 point and mouse out is 12 point.

So far so good? Questions?

This is a technique we’ll see over and over again. You’ll always have these handlers that will trigger javascript. Mouse over, out, these are events the user does to trigger javascript functions. Most likely you’ll have an ID for the function which gets the element by an ID and changes the property of the element.

Student: Can you do that again?

Professor: The first line is like a CSS selector. You have an ID and it finds the corresponding element. The javascript scans the elements to find the ID. It takes the paragraph tag and stores it in memory. EL — Has a built in property called style that has a built in function called font size.

You say “font size 10 point” [On screen.] That’s how you do it in CSS. It happens that in javascript you have the same words but in lower camel case. You can’t have a dash because that would equate to a minus mathematically. So it references the style sheet font size and changes it to the new size. That’s ok?

Student: The top is the new size?
Professor: No. It goes top to bottom. This is like a final end result. It takes the new size and changes the font size on the screen. This is the last line, nothing happens here. This is a permanent change of the font size.

As soon as the line is run “font size = new size” it shows up on the page immediately.

So let’s move onto another example. What we saw is an example of changing ONE single property of an element, the font size. Often you’ll want to change multiple properties. For example you may want to change the border, color, etc. When you work with CSS how do you change the attributes of elements?

Student: Class

Professor: Right. So if you want to do a broad change you would give it a bunch of properties. So same with Javascript. If you want to make a lot of changes change the class name as in CSS.

In this case, I’m trying to show you can change a variety of properties. This isn’t a pretty example. But you can change more than one thing. We change the background color, the border, and the width all at the same time. Let’s look at that code.

[On screen.] It doesn’t have much difference between this one and the last example. The difference is that it has an ID and also a class associated with it. ID is p1. Class is class1. Let’s open up the style sheet.

I have predefined in this style sheet two classes. I only have one element on the page. Class1 is blue. Class2 is green. There are some differences. It’s regular CSS classes. When I mouse over, I’m calling a function the applyClass which is defined. I’m supplying the ID I want to change and the class name I use for it.

By default, when the page loads, it has class 1. When I mouse over, it changes to class 2. So it dynamically changes the class that I’m using for this element. When I mouse out, it dynamically changes back.

Let’s look at the JavaScript. [On screen.] It’s very similar to the other two examples. It’s a function that takes two parameters. It has an ID and a class name. It takes the ID and the element that has that ID in memory. It uses the variable el. It changes the class name of that element to the new class name.

When I call the function, I give it p1 and class2 as parameters. It code scans through for p1 and puts that in the variable el. Then I change the class name property of el and changes the word to class2. Think of it as modifying your el code. When that happens, it’ll change the style because the style sheet indicates this style for class2. So as soon as I change the class name, the style changes automatically.

Then I can change what class1 and class2 look like. I can keep my code in my CSS file. That’s more initiative. If I change the look, I don’t change the JavaScript code but the style folder which is where it belongs in CSS. Your JavaScript is more burdensome.

Any questions? You can see there’s a trend to how we approach these things. They’re structured the same way.

Now we’ll do one final example. We’ll make something appear and disappear. By default, this paragraph appears on the page. When I click the button, it disappears. We’re changing the style sheet properties. We make it visible or invisible by clicking a button and calling a function to change the style sheet. Let’s look at that code.

[On screen.] I have an external script file with functions defined in it. There are two buttons for “show” and “hide.” Button #1, when you click it, calls a function called showElement. The hide button calls a function called hideElement which takes the parameter of the element to hide. Let’s look at the JavaScript because it’s interesting.

[On screen.] Here is showElement. It took one parameter which is the ID of the element to show. It gets the element but its ID. It scans through the XHTML code until it finds the appropriate ID. It puts that into memory in a variable called el so we can do something with it later. We’re changing the el style property and the sub-property display to be blocked.

There are two kinds of display. Block has things before and after in a rectangular shape. Inline flows across the page with no line breaks.

In this case, we show this as block. That makes it visible.

HideElement is the same. The display property is set for “none.” That makes it invisible. There’s block, inline, and none which are three display values. What people usually do is use block and none as the element for showing and hiding.

When I click the hide button or show button, it will look through the code, find the ID p1 and change the property of the block. When I click hide, it calls the function, scans the page for ID p1 and changes the property to none. So it disappears entirely.

There’s one difference between this and the other techniques that you should note. When I click the button, the ID I send is not the button itself like in the other examples. In this case, I’m sending the ID of an entirely different element. JavaScript doesn’t care which element I send. It’s a useful technique for one control affecting the other control, which is a paragraph in this case.

You can think of the function as being impartial. The function doesn’t know what was triggered. It just acts on the ID behavior of the parameters.

That’s all of the examples I want to show for JavaScript today. Any questions about any of this? On a scale of 1 to 10, how difficult is this? Greater than 5, raise your hand. Less than 5 is good. Less than 3? Is it less than 3?

Student: People are too embarrassed to raise their hands.

Student: I’m amazed. I’ve been doing this for 10 years. To get all of this in one day, I would be overwhelmed. Different syntax and HTML syntax, CSS syntax, JavaScript syntax, plus functions and for loops, I’d be overwhelmed if I didn’t already know this.

Professor: The two-week course is crazy to begin with. But I think students sometimes do better in a short class than a longer one because it’s more intense.

Student: It’s one thing to hear you talking and then reproduce it yourself.

Professor: That’s a flaw of the short classes. You don’t have a lot of opportunity to produce things yourselves. But we’ll do that for the next half of today. Every topic in a long class has a full week.

Take a 10-minute break. We’ll come back at 11:40.

[Break.]

We’ll get started again. So I pulled up another example on the screen here. It’s NOT posted to the blog. But if you go to my summer/2009/class4/form_values you can see it. I’ll post it later. I just wanted to use it as an example for now.

So I published a new post for this link in that folder. So click that to see the list of examples of detecting form elements using javascript. So the first ones are the text input.html. So this is an input field with a username and password. We’ll type something in.

[On screen.]

Doesn’t matter what you enter. Click “Login.” You’ll see a pop up box that says the ussername and password. By looking at this you see that when you click the login button it calls up a javascript function. So you see this on the web and understand that it’s a javascript function for alerts. So you have access to the code. So pull it up. You’ll see … that there is a script file linked in the head. This is the case for almost all javascript examples. There’s a form with one text and one password element. When you click “submit form” it has an onsubmit handle that indicates what javascript function to run when someone hits that form. This is similar to the Submit button from earlier in the class. You have the onsubmit that calls a function. What that function does you see in the javascript file.

We did this in the last couple of examples. We get elements by their ID. We get username and password elements based on their ID’s. Those are stored in two variables. One called username EL (element) and password EL (password element). Here I say create a message variable equal to the value of the text input of the username. And password is the password value you entered. This is how you access the value into a text or password input. You say input element value and the Javascript will grab the information for that form.

So this is the same idea as the other examples we’ve seen. Get elements by ID using the getelement by ID

Student: Why not use the username. What’s the purpose of the document. get?

Professor: We have to get Java’s interpretation. Because we want to find the value of it. The sub-property of the element. To get that value we need a function that requires an ID. We give it the ID of the XHTML we want to implement. That’s really the only way to get the element. So it gets the element and puts it in memory.

There’s no such “get Number.” We can access the sub-properties of EL because we stored that object to the variable memory. We can get the height, width, color, style because we told javascript which element to get by indicating the ID of the element.

There’s only this function really this is a special function. It has an XHTML object if we give it an ID.

Ok. Then we just get one specific property of that element, the value property. Before it was class name, font, etc. This is just one property an element may have in the text field.

It’s how the text field works in Javascript. You access the value of the property. Then we pop up this message. So that’s all this function does. It gets the value of the elements and pops it up in the box with the built in javascript function called “Alert.”

One more thing I want to show you. Onsubmit is not just calling this element. It is calling the function but it also has the word “Return” in front of the function. This gets un-intuitive. You see I return something here. This is a return value. So when you call the function think of the function almost like a variable. It’s replaceable by a value. I. and ten are the same thing. The value of variable i Is 10. If I return false it means the function call is replaceable with “false.” The value of the function is false. After it’s run through the function it’s replaced in the script. If I return the number 10 here [On screen.] That means when the function is called here that the function call reference is replaceable by 10. They’re equivalent.

By returning false we’re doing something special. We’re returning the word “false” here and the function gets a value that is ultimately “False.” This tells the onsubmit event of the form to NOT submit the form or to process the data to the server. We’re telling them the submit will not go through, to not submit the data.

So you asked earlier when you submit if it wipes out the fields.

In this case it does wipe it out. So you have to remember not only do you call a function but you put the word return in front of it. If I return true it means on the other page where it’s called it equals to the term true which tells the server to submit the form. There’s two options. Saying true submit or false, cancel the form. This is a common technique in javascript to not submit the form to the server.

So this is how you capture input from text fields. The return of the form is secondary. The first lesson is to access the data.

I’ll move onto another example.

This does the same thing for a text area. So I’ll run through form elements to show you how to get the value of the form.
So I enter text in here. [On screen.] And click submit. You can tell that Java got a value of the text field. Similar to the single line text field. So the HTML has a form and text area and submit button. When you click the submit the on submit handle has an almost identical call. The function returns false. At the end it cancels the form. But before that it gets the text area by getting it’s ID and stores it in “text Area.” Then it attachés the value to that text and it pops up in the other box. It’s the same as the last example.

It’s just what the value property is of that form. So these examples show you the two elements behave the same way.

So the next example will show … radio buttons. Now we show in code how to detect which option. How difficult is this class? Easy right. You selected difficulty level 1. If I select “2″ it tells me I selected 2. So it knows which I picked. The way that works …. like everything else we go to HTML first. We have a form and a bunch of radio buttons and submit. That’s the set up.

Each radio input button has a value associated with it as an attribute. So you see that right? For each there’s a value. 1-4. That’s an XHTML attribute of the radio button type. When you submit the form like the other examples we call this function “show radio value.” So this is important. The values detect the options.

Student: The action called?

To the left?
Professor: That indicates where the data is when a form is submitted.

If I entered in the New York Times site, when I click submit, it sends the data to the New York Times. We cancel that. The pound sign tells it it’s a dummy form. What that actually does is points to the top of the page. When we click the form, it jumps us to the top of the page. It’s a shortcut to the top of your own document.

When I submit the form, that function is defined in the JavaScript file. [On screen.] ShowRadioValue is what we’re calling it. That’s the function that gets called when you click the submit button.

This variable and selectedRadioButtonValue is selected equal to some other function. We’re saying to call this function getRadioButtonValue. Whatever value that function returns, gets put there and placed into selectedRadioButtonValue.

This bottom code section loops through all of the radio buttons and figures out if anything has been checked. It goes through the radio buttons one by one and sees if the checked property is true or not. If it’s checked, that’s the value we get.

You can go through the codes and see how the loop is happening. That’s a for loop. It starts at zero and continues until we reach the number of buttons on the page. It increments by one each time. It checks the check property of each form button. If that property is true and checked, it sets the selected value to that button’s value. It returns the one that has been selected. Then it gets placed up top and stored into the value.

Then we have a message that you have selected whatever the value is you selected. It pops it up in an alert box. This bottom code section is what you do to get the value of a radio button. If there are five buttons, it goes through all five and returns the value of what’s been checked.

That’s how you get the value of a radio button. Next time you want to do that, copy and paste this code and it’ll work for you.

The next example is how to detect the checkbox. You can see if the box has been checked. If I click it, it has been checked. If I unclick it, it comes up as false. Let’s look at that code.

[On screen.] I have an input tag here. It has an ID, checkme. It has an onclick event handler. When I click the checkbox, this function is called. That function is defined in the external style JavaScript file. It does a very similar thing to the functions we’ve already seen. It looks for the element with the checkme ID. It stores it in the variable el. It checks to see if el has been checked or not. If it’s checked, it stores true in the variable.

This evaluates to either true or false as the property. If it’s checked, it’s true. If it’s not checked, it’s false. Then it pops open the value of true or false. The point here is the dot-checked property of any check element holds the property of whether that’s been checked or not.

There’s one more thing. There’s the select input. Click on that. The select state option pops an alert when you click one. It says you selected New York or New Jersey. There are only three options. Somehow it detects which select buttons you selected. That happens in the HTML.

[On screen.] Each option in this select section down at the bottom of the screen has a value. The value for the New York option is NY. The value for New Jersey and NJ. That’s the value that’s detected. It’s not the text that shows on the page. There’s what’s visible and then the behind the scenes details. We’re interested in what’s behind the scenes.

Let’s look at the JavaScript for this. We haven’t seen the onchange attribute before. Anytime you change an option or a different select option has been used, that’s what the onchange event detects. It calls a function to showSelectedState. The onchange is a select data. It detects if it’s changed the selected value. It calls the function showSelectedState.

[On screen.] The first thing it does in JavaScript is get the select object, not the option object. This is the ID I’ve associated with select tag. It gets it by its ID. It stores the element in the selectEl. It’s the element variable representing the selected HTML. Then it gets the value property of that element. It’s like text area and password field, etc. The dot-value property of a select option is the same thing. It’s the value of which one has been selected. It stores that value in the selected state. It assembles a message to pop up. It alerts.

If nothing is selected, the selection value is blank. So we’re checking to see if the value is a blank string. If that’s the case, no one has selected anything. Then we change the message to be something like “please select the state.” Then we pop open the message.

That’s how we get behavior like this. If I select the top choice, it’s blank. This will trigger the “please select a state message” because there’s no value for it. You can look at the HTML and look at the first option. There’s blank quotes. That’s how I detect that nothing has been selected. Or they selected an option that’s not really an option.

We’re clicking the option and looking to see if it’s blank. If it’s not blank, we show the appropriate value.

That was all for the form inputs. Now you have a fun assignment to keep you occupied. Any questions about this so far?

Student: Is there a place we can look up to get the events or anything attached to the elements?

Professor: It’s not easy to find a good reference in books or websites. There is the W3 school site. That’s our major reference. I encourage you to look around at information online and see if it works. W3 School is a reliable source. There is a “learning JavaScript” section. Click on that. You’ll get to a similar thing we saw for the CSS. I encourage you to use the tutorial. It’s not the best but it’s better than most. JavaScript is notoriously badly documented. There’s so much information that has people’s mistakes including books.

It’s difficult to get good information about how it’s used in real life. This tutorial has the same problems. It gives you concepts but not real-life uses. I hope to show you real-life uses. So let’s look at the references. We’ll try the JS HTML section. That’s no good.

Somewhere there’s a list of events. They go into the same things I covered with variables, if/else statements, functions, while loops, for loops, etc. This is a good reference page for what we discussed. There’s also stuff I didn’t discuss but don’t get caught up in it. JavaScript is a huge language. We’re focusing on the practical applications of JavaScript and how to get a job done or a website built. I’m focusing on a subset of what’s on this list. Don’t get too bogged down into the “horror” that is JavaScript.

Student: Look at the first reference on the left. It’s on the last line.

Professor: So go to “learning JavaScript” and click the JS objects and references section on the bottom left. At the top there’s JS events link. I have a post that’s linked to it on my blog that I’ll publish with your homework assignment. That brings you to this page, too. This has different event handlers. This is how you create interactions with users. Use the event handlers to trigger actions. There aren’t that many of them. They’re pretty intuitive.

I want to reiterate that things like onsubmit only apply to form elements. Some are specific to tags. But onmouse, onclick, etc., are generic.

Without further ado, let me show you your homework assignment. I guess it’s the in-class assignment. I’ll publish that post on my blog. It has the link for the homework assignment now. Click that link to “this assignment.” It takes you to the appropriate post of a diagram you should create.

This is a wireframe diagram. Do a simple layout. Redo some of the layout concepts we did before. Create two boxes side by side. Each box has a separate form. When you enter text in any field, the populates the text on the other form. If I type my name in the left box, it fills my name into the right box.

So you’ll detect that someone is entering text. And then you’ll input the value into the right-hand form. I’ll show you how to detect. I haven’t shown you how to input that text.

Student: As I type, it should mirror it at the same time?

Professor: Yes, letter for letter. Each time you hit a key, the right-hand box will show the same key. Every time I touch a key when I’m editing this text field, the onkey press and upkey events are called. That runs a function that inputs value into the right-hand box. It’s the same with the other fields. Text the key and then put the value into the right-hand box. This deals with value properties of the text fields.

Get the element by its ID. Something-dot-value gives us the value. You can set that value property, too. I can say the element.value inputs the text. That’s how you put the text into the right-hand box. When you get there, just raise my hand if you need help. The first part is straightforward. Layout the page and get the fields where they should be. Then do the function calls when someone inputs text.

For the second half, flag me down if you need help. It’s close to lunch, so work for 15 minutes and then we’ll take a lunch break.

[Students working.]

Don’t forget to take a lunch break. It helps to step away from the computer.
[Break]

I’ll start in 3 mints. If you have any questions you should ask now. Question about the assignment? The ones I saw looked great.

On the blog if you see it there’s an updated post. It’s for the topics today. We’ll go through the advanced Css. There are files up there we’ll go over in detail. Familiarize yourself and we’ll start in 3 minutes.

[Students working.]

I’ll call out attendance so I can learn your names.

Kathryn. Shy? Heidi. Alma. Scott. Jeremy. Mark. Jenna. James. Otis. David. Luca? Carrie Ann. Samantha.

I’ll start. I think there’s one person missing. So I’ll go over all the material from yesterday. And all the CSS layouts. I’ll do a mock up and how you lay out a page. Then will go into the advanced topics on the board. So I step back.

Some are having problems with file management. So I’ll go through it in a rudimentary way.

So first thing you do with web projects is you open up the web browser, obviously, the text editor which is NotePad++ for us. That’s not installed then you open up the WinSCP. We’ve done that before. Just Google NotePad++. Then there’s the download tab up at the top. Download executable. Then click the installer EXE. Then that saves it and you must run it to install. So you should know how to do this. Let me know if you don’t.

I’ll go through the set up of the file systems we use. Where do you want to store the files? On the desktop, or flash drive, etc. You lose track of the files and that’s an issue with everyone. But you need to know where you store the files.

So I choose a place on the hard drive where you can make and save a file. I’ll do this in My Documents. Create a new folder with your name. Or that’s what I’ll do.

Each time you make a file or save a new file it goes in that file. It’s critical for you to know where you put your files. Go into that folder then make a sub folder for every project.

First is called Layout Examples. This is just the name I choose. But you can use what you want. All the files in this example are in THIS folder. Click to get in there. Then I put the files from Text Editor in there.

I make a file index.html. This is Save as … now I must find that folder. Here it’s in My DOcuments. Then I save as, once in the project folder. I save it as index.html.

I’ll start putting HTML code in there. Then I just copy paste from my blog or wherever, since I need the basic structure.

I go to the blog. I scroll to find the simple page I made. It’s the outline of the HTML page. That is what I want. Copy it. Then I paste it into the HTML file.

Save.

Now I have an HTML file that’s a good starting point for all my other work. This file requires the CSS, and we’ll do all design issues I use a tag to indicate this is a style sheet. There’s the link tag. [On screen.]

I put the style sheet file into a folder named Main.css. I know these are all the same.

This links to the subfolder styles. You see in the explorer window I must court a sub folder called styles with a folder called Main.css.

So now file. New folder. Make a folder “styles” and that’s where I save the CSS files. So I create now Main.css.

Student: Half way down where does it apply?

Professor: I didn’t bring that up but it must be in the head. You shouldn’t put it in the body since that’s not good HTML. But the things you do incorrectly sometimes work. The browsers are made to accommodate that.

This is supposed to be in the head is since the way the browser processes the code is it starts from the top to bottom. It looks at the head first before the body so with the style sheet in the head you know the browser will load all the design first. But if it’s in the body it may look jarred. The head loads first in the browser memory. Understand the head loads first. That’s the same with the JavaScript files. We want the behaviors to load appropriately before the body loads.

So we’ll create Main.css. That must be in. The styles folder. And that must be in the same file with the HTML. So in the project folder of layout sample 2 I just need to put the blank CSS file. Text editor, Create new file. Save as. Inside the styles folder. That’s where the code will be — call it Main.css.

That’s the set up of for the project. There’s CSS file and the HTML file and that’s it. That’s the basic set up.

Now I’ll repeat the lay out process from yesterday. Here’s a layout.

Open VISIO. I encourage you to NOT type everything out that I’m typing unless you are very fast.

In here, in visio I start with a general basic diagram. Just for the generic shapes. Drag the rectangle for the page. This is simple. It won’t take long. I’ll make a standard website layout. Here’s the header. I won’t do detail in that. I’ll make a left navigation section. There.

Then I make the footer. Then the content section. That’s for the meain content. Some call this the “C Clam.” [sp?] But that’s not the main word for it. But it’s similar to a “C” shape. This is a template. You can keep the header and footer the same but change what’s in the middle. It’s simple.

Now I’ll code this up.

So I think — I’m working at an agency and I must code this — the first thing I think about are how many Dibs I need. There’s the container Dib. It surrounds everything. Even if you don’t see the box you need boxes around everything.

Second I have the clear header so I need a box for that. Then for the footer and contents too.

Each box translates to “Div bag.” I need the container and the sub-divs.

Student: Can you do a container in a container.

Professor: Sure. You can name it whatever you want too. You’ll see it’s common with all developers. There are conventions you can use but you all look at each other’s code. When you see the container and it’s called container and you steal it you just use the same name.

Now to NotePad++.

I’m going to make a div and call it container. The div is a tag name. ID is an attribute. This is a special attribute I can use to create a style sheet. That’s why I give it an ID. For the DIV with the ID container give it this much padding and etc.

Every div has to close if it opens. Every tag has to close if it opens.

There I have the container. Inside that container has four sub-divs. So let’s make four sub-divs. ID equals header. I’m going to close it for now.

div ID equals left.

div ID equals content.

div ID equals footer.

It helps sometimes, while working on this simple layout, to put the word header inside the header, left inside left, content inside content and footer inside footer.

I will see where the different parts are. I will remove that once I’m done laying out the site.

Go to the style sheet, main.css. This is code you will be recreating for every page you make. It has a box for the container. Just lay out the boxes first for the HTML. You don’t even have to give them the IDs first. Just put divs on the page. We know what they are going to be, approximately.

I’m going to upload this to the server. Let me connect. If you remember you should all have this memorized by now. [server address deleted for security]. Usurae name is [username deleted for security]. Password is [password deleted for security]

Now we are going to get to the WinSCP screen. It’s the first screen we get when we log into the server. I’m going to go through the file system management again. We have to figure out where the files are on our client and our server so we can drag and drop them.

Male Student: I think I went up a few levels.

Teacher: That’s what I’m talking about.

This is not the most intuitive screen. We have to get used to the browser again. When you are lost the easiest thing to do is click either for the client directory or server directory. It shows you the hierarchy.

I remember that I put my files in the My Documents folder, in a sub-document in there. Your files are probably in a D drive.

I’m going to go to my files. This is just on the client side for now. I’m going to double click to get into the folder I created. I’m going to stay here at the level where I can see the folder I made for this project.

I will do the same thing on the server. Click where I am on the server. When you get lost you can always hit the back button, which will turn blue if you navigate away from where you logged in.

To get into where the files live on the web I have to double click to get into [server address deleted for security]. I double click into my folder. Then I find this project in the folder I created. In my case it’s in class 3 and it will live there, it’s not there yet.

I’m now going to drag that whole folder from the client to the server. Now the two will be in sync. Both folders have the same contents.

I drag and drop it into the white space. If you drag and drop on another folder it will put it in that folder, you don’t want that.

Drop into the white space. It will ask you if you really want to copy. Yes you do.

Another problem we will all have at some point, is where do you go in the web browser to see this file? To test it. The first thing that might help is at the top in the blue header section you will see the path. The file structure for where you are on the server. You will see [server address deleted for security]/your name/ any other folder. That’s the starting point to look for the folder on the web browser.

I’m going to go there. [sever address deleted for security]/yourname/class3. I changed the server settings last night so you can see a list of all the files in any folder. I prevented that before because it makes it accessible to hackers. This shows you the inner structure.

I got this URL by looking in WinSCP. Ignoring the first few things in the blue section, but looking after it says [server address deleted for security] and whatever subfolders are after that.

One mistake you may make is double clicking on an HTML in this window. It doesn’t work that way. It will download a copy of the file to your personal computer and open that file. It’s loading onto your local system. Not what we want to do.

You always have to look at what the path is. Then load that yourself, manually, into the browser.

Male Student: When we come in everything has been erased but it’s on the folder? How can I get the code we put in?

Teacher: I have, on the server site, a bunch of stuff for class three that I don’t have the on the client side. I would highlight everything, or do it one at a time, and drag them from the right to the left. I’m downloading from the server to the client. That makes a local copy of all of those files. Then I can edit them from NotePad++.

You should never double click any files in this program. Just don’t do it. It seems like you should be able to but it doesn’t work that way.

We can change the settings and make that ok, but since it will be wiped out everyday we won’t bother.

If I want to open a text file I will first go to NotePad++ then to file open and find that file.

If I want the backgrounds folder I won’t just double click the HTML file. I will go to NotePad++. File. Open. Then I will find wherever that file is, wherever I just downloaded it to.

I always put them in the same subfolder with my name on it so I don’t have to think about where my files are.

I click backgrounds. That’s where I double click to open the file. Don’t ever try to open a file directly from NotePad++. It’s not good for viewing HTML files or the codes that go with it.

You may see me do it when I do shortcut, but I’m very familiar with the program. Don’t do it yourself. Don’t do it at home.

Back to what we were discussing, setting up this diagram [On overhead.] I have the HTML file where I want it. Now I need the styles to look the right way.

How do you lay two things side by side? Things tend to stack on the web in HTML. We are overriding that default behavior and making two boxes stacked side by side.

The first thing to think about in the code is the layout technique we will be using. I recommend we always start with this standard layout for the first week or week and a half. If you want to get fancy later, that’s fine.

I’m going to fix the width of this container div. Everything will rely on this width. I’m going to make it 600 pixels because this screen is small. Generally I do 900.

To make a container that has a width of 600 I have to do that in the style sheet, that’s where the style information goes.

How do I do that? How would I make the computer have 600 pixels wide?

Male Student: In the CSS.

Teacher: What do I write?

Male Student: I’m not sure.

Teacher: Anyone else?

Female Student: div pound container. Open bracket with 600 px. Close bracket.

Teacher: That’s the standard format for applying the style to a particular div with a particular ID.

You saw that a lot yesterday. You will see it again today.

Any questions about how that works? Makes sense? If it doesn’t let me know.

We are going to assume that is 600 pixels wide. If we went and re-uploaded this to the server using example two we have no idea looking at this what is going on. You can’t tell anything from this text we are seeing here [On overhead.]

I have no idea where the divs are. I can see some text but I can’t see how wide they are or their shape. I want to put boarders around every div on the page so I can easily see the structure of every div on the page.

In the CSS I am going to say for every div on the page give it a boarder 1 pixel solid green. That puts a green line around every div on the page.

I now re-upload that to the server. Refresh. Now I can see what we are talking about. This hasn’t changed the structure of the boxes, they were always there but invisible.

That boarder looks about 600 pixels wide. Now I need to set them the way I want them.

Now I want to center it. To center it you do this. In the container you say margin 0 auto. That means the top and bottom margins won’t use a margin, override it with 0 pixels margin.

For the left and right use an automatic margin which will push and automatically make them equal sized.

Imagine that you have equal white space on the left and right.

So I upload it to the server and it’s uploaded.

Another thing you may want to do is to override the settings that exist here — the margin and padding happen inside the boxes or outside. The margin here, is the spacing from the green box to the parent container around it. That’s just the page. The padding is the space in the boxes. It pushes the content away. Margins are external and padding is internal.

So if you give 0 to each the padding and the margin, then there’s none. See the space here? What’s that doing? It shouldn’t be there. It’s just a default that I must override if I don’t want it. It could be either the padding or the margin I can’t tell. I need to re upload the file. So now I’ve overridden it.

But I doesn’t make sense to apply padding here. The margin should be external but it doesn’t need to push away from anything.

I’ll make the note. [On screen.] [Override body tags ... ]
That’s how I leave comments so I remember
the code.

Now I make the header taller and I need these to sit side by side then I’ll add color. First the content.

The div tags stack one over the other. Otherwise why would they be that way / it’s just the default behavior.
That’s part of our job is to get these overridden and to stick side by side. When I say that I am talking about the float properties.

This works like you saw yesterday. The div ID, left. Then I make the style. You float left [On screen.]
Then div id content. That’s left also.

That’s the first rule. Set the float property. That makes them go side by side. The second part of this is that when they are side by side you need a div that pushes stuff in the row under it.

So one more visual change so you can see. I’ll give the container a boarder with a different color. One pixel solid red. This container is red. I override the style to make it red.

Upload to the server. Refresh. You see the container is red. You see the left content and footer is side by side. But the footer should be underneath. Why’s it there? Guesses?

Student: Sizes?

Professor: Maybe. But that’s not the answer I thought of. I didn’t do the necessary part. I have to clear after I’m done with the side by side parts. So in the HTML I add a invisible box after the last thing that’s side by side. I think of these two elements as a row. When you have rows you have columns. So these are the columns in the row. The last thing should be a div.

So I make a div. [On screen.] Just get in that habit with the rows and columns put the invisible column in there. Then the CSS has special properties.

So I make a class with divs. That’s an indicator. I give them the property. Then since I’m setting the border for the divs I want this to be invisible. I must override the border so it won’t show up. It’s invisible.

Re upload to the server. That forces the footer below the two things that are floating.

Student: So when you say both you mean Both sides?

Professor: I’ll bring it up. Let’s do the clear have sides. Here’s the width and height. 20 by 20 pixels. Then the background color. Orange. So it’s an orange box. You’ll see it.

That’s where it lives. But it’s invisible most of the time. But if I said Clear That means both sides. If I just standard deviation clear left let’s see … So there you go. divs use both sides. I’ll make the footer float left too.

Imagine you had a footer with columns stacked so you must flip it.
Well, I wasn’t expecting that. But you can flip them both sides or if you just clear it left and don’t say CLEAR BOTH it doesn’t push the contents down. The just doesn’t stack anything on the left. It ignores the right side. Or if you say “clear right” it forces the stuff below on the right side down. So I just do both sides.

Student: So that’s all it is? It makes the space to the left and right …
Or you can’t go below.

Professor: Sure. That’s all it does.

Now what I need to do is get the sizes here approximate. Quickly. The container is 600 pixels. How big do I want this? In the diagram there are no sizes. This wireframe is not to indicate stuff it’s just a quick and dirty diagram. I won’t analyze the pixel value.

If it’s 600 then I make it 200 it’ll probably look ok.

So the left is 200. [On screen.] That’s the width and the content will be 700 pixels minus 200 pixels. That’s minus the padding which I don’t have.

400 minus the order on all the boxes. This is 600. This is 200 [On screen.] So 400 minus 6 equals … 394. [Content.]
That’s the formula and you can use your eye or just trial by err.

I guess we missed some pixels on the right but no big deal.

So I’ll add 1 or 2 pixels. Let’s say 396 instead.

Student: So you use the X instead of the XPX?

Professor: Oh. I didn’t see that. There. [On screen.]

So I don’t make the heights attached to the divs. You want them to be flexible. It’s ok to scroll up and down so it’s ok if it scrolls up or down. But people don’t like the right to left scroll. You don’t want the width to stretch but it’s ok to let the height stretch down.

Student: What’s the typical width?

Professor: It’s … I’ll go into a way to analyze that so I’ll hold off. There’s no answer you just look at the web. It’s usually under 1000. Any questions? At all about this?

The issues are file management and knowing where your files are. That’s critical. Starting with HTML. And writing the divs. You just put the boxes in the code. Then stetting the container with a fixed width and properties. Then you float what’s side by side. After the rows you have the clear element that uses the line break, etc.

That’s all to layout. It’s not much but it’s complicated to learn. Once you have practice then you can focus on the content and the design. That’s what we’ll talk more about today and getting granular.

Let’s move on.

I’ll get back to the question about the width of pages. If you want to see how wide a website is … let’s look at the NY Times. They have a very wide page. There’s a tool called — I can’t remember. There are many actually.

Research!

So let’s go to Google and look for “FireFox Add Ons ” We talked about how FireFox adds functionality to browsers. You can add stuff to the browsers to measure things on the page. So let’s get that one. I bet there are several. I can’t remember the name. Search for “ruler.”

Draw it out to get the pixel width of an element. I think that’s what we want. Click “measure.” Then the button says “add to FireFox.” This is why FireFox is so nice. Click “install now.” Then you see that you’ve added the measure tool. It requires you to restart to use the tool sometimes. Or it keep south window open and will reopen on the window you used before. Close tabs. Restart.

It kept all the tabs I had. I think there’s a setting in the check box. I can’t remember.

Now we should have this ruler installed. We just have to find where it is. In this case it’s on the bottom left. I’m trying to get it on the screen. There’s a ruler icon. When you click it your cursor will change to cross hairs.

We want to find out how wide the NY Times site is. We need to stretch it. I’m going to click the icon at the bottom left. Now my cursor changed. This will allow me to measure the page manually. It says 973 pixels.

Does anyone have a different number? Something like that.

That’s how wide they made their container div. That’s a pretty wide page. There are not many sites as wide as that. That’s the max.

Let’s try a site like CNN.

Female Student: You always want to measure from boarder to boarder?

Teacher: You want to measure from where you see the content is starting or ending. It’s not always a boarder.

Female Student: Would you measure to CNN.com in the left hand?

Teacher: This site in particular is two parts. The top navigation and the main content. They behave differently. They have a slightly different layout than what we have been doing.

Their main content section is about 985. It’s even wider. That’s good to know. We know it’s ok to make a site 985 wide.

Male Student: [Can't hear/can't understand.]

Teacher: There’s been a steady progression of bigger and bigger widths.

Let’s try another site. Let’s get an idea of the widths around.

Male Student: Jibjab.

Teacher: I’m sorry. This thing is really loud.

I’ve never seen this site before. Is it your birthday today? [Class laughing.]

Male Student: It has all these comic videos. You can send them as cards or just as is.

Teacher: I’m getting 963 or around there. We have a standard that’s going on. High 900 something seems to be ok.

Let’s try one more.

Male Student: Fark. That’s my site.

Teacher: Actually, this seems to be stretching the whole width of the page. This seems to have a minimum width, but no maximum. For this site I would measure the minimum width. I’ll resize until it stops moving and is no longer stretching and shrinking. This is 980. Same range.

Female Student: How do you set a minimum width.

Teacher: There’s a min-width property you can set on CSS.

There are some problems with that kind of layout. The older Internet explorer browsers won’t recognize that.

One thing they may have done on this page is that people used to put an invisible image that has a width of the size that you want. An image will never shrink further. Using an image will force this box to never go smaller.

You get the idea. 960 to about 980 seems to be our range.

Another tool we should install is Fire Bug. We installed it yesterday. Search for Fire Bug. You can also search in the FireFox add-ons page. You can add this to your browser. Find the install button.

This add-on requires the not yet released version of FireFox.

Let’s try again.

Male Student: Just Google it.

Teacher: The first website is what we used the other day. Use the big button.

This link is from the syllabus also in case you lose track and want to look back. This information is there.

You have to allow it to install stuff from this site. Click Allow.

By default there are security settings that FireFox has to prevent other sites from installing programs on your computer.

Let’s try again. After you allow it, it should install.

My computer has an older version of FireFox than your computers have. It’s not working on mine. That’s a shame because I can’t show you what to do with it.

I’ll get to it later. Install it. We will go through it then.

Male Student: There’s a version that works on FireFox 1.5.

Teacher: I’m using FireFox 2. If you go to help, about FireFox it will show you what version you have installed. That’s why mine’s not working.

For some reason my FireFox is downloading 2.0.02. These computers are frozen. Someone must have been downloading FireFox 2 when this thing froze.

We don’t need that now.

Let’s go to advanced CSS. Back to the blog. At the top of the blog is the latest post with the links to the stuff we will be covering.

You might be asking, when using margins and padding, you may wonder how to look at the code for this page? Look at the URL. [server address deleted for security]/myname/class 3.

Go to the server in the WinSCP. Look for my folder from my summer 2009 folder, class 3 folder. Go back to where you first came from when you logged in using the back button. I’m just following these folder names at the top.

Class 3. Margin and padding. That’s the folder with all these files in it. If you drag it to your own folder you will have a replica copy of my file.

That’s how to follow along.

Do you all have that? Should I do it again?

Go into one of those files. NotePad++. File. Open. Find where I downloaded that file. This is hopefully in your folder with your name on it in the margin and padding folder.

I’m going to open the style sheet called marginpadding.css. I want to exhibit a little more what the difference is between margin and padding.

I’m going to change the margin on the left side of this outer red box, the container box. If I set the margin-left to 50 pixels you are going to see the red box shift to the right 50 pixels.

I will re-upload that to the server. The box shifted because I applied a margin to the red box. Margin is the external space between the outside of the box and the thing around it.

If I apply a 50 pixel margin to the yellow box, it will move 50 pixels in to the red box. You are going to see the inner box move in 50 pixels from the edge.

That’s the margin. It’s pushing away from its container.

If I put a padding on the yellow box it will push inside. So let’s apply a padding of 10 pixels to the inner box on all sides. Actually, I’ll make it 30 pixels. That will push on all edges, the content, 30 pixels away from the edge.

We are going to refresh. It pushed away from the inside, 30 pixels away. Padding is the internal spacing. It also made the box bigger. That should be something you are aware of. It may stretch your box.

That’s the only thing I wanted to show. Margin is the external space, padding is the internal space.

Let’s move on. That was a recap of things we have seen before. Now we are going to get into new stuff. Let me just check my blog.

Centering content we saw. This is an example again. We made it obvious by using two different colors. We saw that with the layout we did. That’s there for you to play around with.

A new thing is background image. That’s the first new one. How do you apply a background to a div? Let’s pull that example up.

These are two divs, one green, one red; with two background image settings. One has a tiling background. It keeps repeating as many times as necessary to fill the space. That’s tiling the background.

The second is a non-tiling background. It only shows up once, even if it doesn’t fit the space.

That is done with background-image. In the background folder in styles you see background-image-CSS. These are the two divs we saw. The first has a background image with tiling. The other has background with repeat that indicates to not repeat.

Tiling is the default setting for the browser. If you don’t want to it to tile you have to tell it not to.

Male Student: If it fits into the div it won’t tile?

Teacher: It will still be tiling, but you won’t see it. It would if the image was smaller. If it fits perfectly you just won’t notice that it tiled. It will cut off at the edge of the div.
So it will tile unless you telae it not to using this code. Instead of “no repeat” I’ll change it to “repeat-x ” And that’s repeating horizontally across the div.

So I don’t know if you can tell — there’s horizontal but not vertical tiling. Or you say “repeat-y” and that’s the other way.
I can’t get rid of my NotePad++.

I need to close this down.

There are a few different settings you just saw. The No Dash Repeat. [No-repeat.] I’ll leave the comments for the different settings. Repeat the x the y, etc. So those are the options for background repeat. But I’ll leave up the no repeat to leave it at the original state. You should look at other sites like NY TImes. I can talk about these all I want but you should see them in practice.

And FireBug is useful for analyzing with reverse engineering.

If I right click here on FLash for example — remember the first day? Not expecting really. But you can tell what’s Flash or not when you right click. Or I right click on any image and it says “view image” or “copy image.” That’s an image tag. The IMG tag. It’s a foreground image. It’s used to place the image in the foreground. So I’ll try this logo. That’s an image.

But with the background image you won’t see that. You can tell since it will say “View Background Image.”

Another site. Cute Overload. I’ll right click the logo. That’s not background.

Student: AA.com. The top banner.

Professor: Right click … um, … there. The clouds. There’s no view image or save image. It’s just the background image. It’s huge. So they use that technique in CSS. That’s easier to superimpose things on the background. Then you can just put HTML over that. So there’s a div for the whole thing then inside the div there are the sub sections here [On screen.] These show up on top automatically.

What else? Another site.

NYU.edu. Right click on the logo. That’s a background image I think but it’s not showing up the right way. Then it’s also a link so that interferes.

It’s ok. Just browse around. But you can tell easily. If it says view image it’s using the image tag. Any questions?

Student: When you sit the address or the JPG, if it’s not right on the folder you use can you just tell it to look somewhere else?

Professor: That’s a good question. Back to the AA site.
We established this is a background image. I see view background image when I right click. You can get the address for the image on the Internet too. But if I want to use that. I can do it. So instead of using the image I had on my file systems I can use THEIR image and steal it.

They may not like it! But now I have the AA logo. Do that answer your question? As long as the address is there correctly you can use that image.

One note — some websites do this. They link to other sites and may use one of your images. If you are popular and they want to link to you, they may use an image tag and use your image. That’s bad behavior, since what they are doing, when someone loads it, it makes a hit to the AA server.

But if I had 5 million people on my site, that means AA is getting 5 million requests on their site too. That’s happened to me before and people bring down servers that way.

Student: With the HTML you can adjust the image size? Or with the CSS can I do that?

Professor: No. You should size the images correctly off the bat. Or you use the height and width properties. So you want to use Photoshop to make it the correct size.

A note about the background image property in CSS, the background image property takes one value, that being the URL value. In the parentheses it uses the file name too. It’s an odd syntax but that’s what it takes.

Then the path is relative to where the CSS file is not the HTML file. So since my CSS file lives in the sub flooder styles, there is another sub folder style that’s Images. So I have the one for the style sheets then one for the images.

So to find the image I tell it to go to the root folder then down into the images folder. So the dot dot means “go back.” That’s relative to the CSS not the HTML files, which is the usual route.

So to get to the image files you must go UP a level. That’s all.

Student: … if the HTML is the …

Professor: If you see the text it must be written in HTML.

Any questions? You will see more of this in another example. Not right away though. Creating menus using lists. That’s the next topic.

Remember the tags and lists? The three listed elements? You should see those used to create top navigation links. The most common things you see are the links at the top or on the side. You should use item tags for those. When you see the list on the left vertically they naturally stack themselves. But it’s weird to see them horizontally and it’s not natural behavior. So how do we do that?

Let’s look at this code.

First the HTML. Nothing here is new. The important thing is the unordered list of items. Then I have links listed 1,2,3… but there’s nothing special going on here.

But this is different …
I am removing the margin and the pudding from the body tag. It’s not critical. I centered the container div. I have the standard div.clear. Now I play with the list.

First I remove the bullet point. There are no bullet points here. I removed these through the combination of changing the list style position. You can look at up on … w3schools.com.

So when you see something with a property you can go to the CSS section and I advise you to take these tutorials. Go through this content. I have to fly through this but the stuff I talk about in this class is all listed here.

So we’ll go to the CSS reference section. It’s linked down from this list. It’s a set.

I click the CSS reference. See?

Here in the content area, a bunch of properties you can play with in CSS. They are divided into backgrounds and borders, sizing, fonts, lists. So list style position shows you how to place the bullet point. [List style marker.] I’ve set this to “inside.”

And shows a dictionary of usage of this property. I overrode the default then you see the different vales and how to indicate what to do with the bullet.

This removes the extra space created.

When you have the list item the positioning or spacing is effected by the bullet point. So I’m just removing the space but you don’t have to do that. It’s just a nice way I can save a width.

So just do that when you want to make a horizontal list for navigation.

I’m floating left the list items. It puts them side by side.

seSetting the list style to none moves it so you don’t see it. But this just removes the spacing that’s technically added so this removes the bullet point all together.

Now I’m aligning the text in the center and I’ll set the line height to the height of the list item So this defines the list of text. It’s just a trick. When I set the list height to the line height vertically aligns this text in the box. This is the border, the 50 pixel border. I gave it a line height of 50 but since it’s smaller it aligns it in the space. It’s sort of a hack. It doesn’t make sense really but think that the browser is reserving the height but the font is smaller so it puts it in the middle automatically.

So let’s remove it to see what happens.

Vertical aligning is difficult to do generally.

I took out the line height. I’m not sure what’s going to happen. By default it’s up at the top. If I made that 150 pixels, just to show you what would happen if it wasn’t the same size. The browser is reserving a size for this text, since the font size is only 12 point something.

By setting it the same value I can assure it appears to be in the center of the box.

I will put this next to the height properties so you can see they are always together.

That only works for vertically aligning text. It won’t vertically algin one box inside another box. You just have to play with the tags and margins and find the value that looks right.

We have a set of list items that I have given a specific width and height in the CSS and made them float left so they stack up next to each other. They have a line height the same height as the height property. That’s how you vertically align things.

Questions? Does this make sense?

I know some of you need more time with this. Some of you get it right away. Flag me down if I go way too fast.

We are going to continue down the blog. Read the post from last example. I’m going to pull up the post, static positioning.

By default, the position of any element on the page is static. That’s the default behavior. It appears, more or less, where you put it in the code. The first thing in the code is the red box. In that box is another div with the yellow box. They appear one within the other.

The browser has defaults for a paragraph. It will have some padding around it by default. It may have a margin.

If you don’t change those things, like the position of an element, it’s referred to as static. It’s where the browser will put it by default.

I will use these yellow and red boxes in all examples. I’m not changing anything here. It’s a red box with a yellow box inside of it.

In the next example I’m using relative position. This is the same HTML code, more or less. I added different text. I shifted the yellow box up, so it clips the text a bit.

This is the code for the yellow box that was necessary to do that. I shifted the top property to negative 30. That moved it 30 pixels towards the top of the page.

The red box still has static position. I modified the position property of the yellow box. You can shift things from where they would normally be in the static position.

Is that clear?

Female Student: It’s not all the way on the left because of padding?

Teacher: I may have applied some padding.

It’s the same. Whatever the default was is the same as what we are using. I haven’t changed that. It must have some padding.

Now the next example. Absolute positioning. The red box is again static. I may have centered it. I changed the position property of the yellow box. I made it absolutely positioned. The position is relative to the top left corner of the content area. The pixel coordinates are relative to top left of the content, now where it would normally sit. 50 pixels in, 50 pixels down.

An artifact of that, since the red box is statically positioned and centered, and the yellow box is absolutely positioned, the red box stays where it would normally be when I move it. The yellow box will never move because it’s relative to the top left of the screen. It’s an odd behavior. The yellow box can stretch out of the red box.

This can be used for an effect. You can stick things at certain coordinates on a page like this.

Male Student: Can you move the absolute left 50?

Teacher: You can’t change the left without specifying relative or absolute.

That’s absolute positioning. Stick something in an exact coordinate in the window. It’s important to remember it’s relative to the top left of the window.

Next we are looking at a combination of these two things. Relative positioning on the outer box and absolute positioning on the inner box. You have an unexpected odd behavior. The yellow box is absolutely positioned, like the last example.

Because the red box is relatively positioned this makes the difference. Somehow the browser thinks the absolute position of the inner box is relative to the top left corner of the red box, not of the page. Even though it says absolute it’s absolute to the red box.

I don’t know why that would make sense to the people who designed this, but it’s useful if you want to position something absolutely within a box. We can use this to still have a normal layout, where things move around together, but position something carefully inside that container div.

You won’t see this used as commonly as the other two types. It is something to be aware of that you can use this to your advantage where you want something to be absolutely positioned within another.

With relative positioning you don’t know where the browser, by default, is going to put it. By using absolute positioning for the inner box I can say where it will be.

Questions about this? The positioning stuff.

This is a position property that you can look up in the w3school site later on. This is a good indicator of how to use those things and what they are meant to be used for.

Last thing about positioning would be the Z index. Here I have three boxes. One is on top of the other which is on top of the other. You have X coordinates and Y coordinates on a graph, this is the Z coordinate. The Z index is how far at you is any element.

The red box has the lowest Z index. It’s a number system. This has a Z index of let’s say 0. The yellow is a Z index of 1. The blue is a Z index of 2. It seems the blue is on the yellow which is on the red.

Let me change those around and you will see what I mean.

You can see I set the Z index for the yellow box to be 2. The index for the blue box is 3. That’s why the blue appears to be on top of the yellow one.

If I set the reverse to be true, the yellow to be 3 and the blue to be 2, we get the reverse effect. That will mean the yellow should be visually on top of the blue. Let’s see what happens.

That’s what you get. When you have overlapping elements, which is how I positioned them to be because objects don’t normally overlap, this is the way you would think about which is on top of which. It’s a visual effect. The HTML doesn’t change. The CSS code makes it appear like one thing on top of the other.

Any element can use this. You have to change the position property. It won’t work without relative or absolute positioning.

Just like the top and left properties don’t work unless you use relative or absolute.

Male Student: The 1 would be 100 and .1 would be 10%?

Teacher: Yes.

Male Student: If a div has a background image can you use Z index to put text in front of an image?

Teacher: Yes. I would avoid doing this unless you have a really good reason and can’t do it a different way. In that case I would apply a background image and put the text in front of that.

But yes, it’s possible.

This is related to positioning because you can’t apply Z index without applying relative or absolute positioning first.

If I change this to static let’s see what happens. I changed the blue box to have a static display. It goes to where it would normally sit. Let me take the other box out too so you can see it.

Now they go to where they would normally sit. You don’t have positioning or the Z index. You can’t change the left property, top property or the Z index without changing the positioning.

That’s all for positioning. One more example I have. Using sprites. These are background images. There is a div box with a background image applied. When I mouse over the image it shifts to a different image.

If I right click on one of these it doesn’t say view background image. Let me load the background images manually. That’s what the heart image looks like. That’s the image file. There are three images in the one file. There are three separate versions of the icon.

The other is the same. Three versions of the plus sign.

Why does it show up with one version and not the other? The div is only that big. It hides the rest of the stuff below this. It’s like a window you are putting on the screen. If the background image is too big for the window it hides the rest.

When I mouse over it, I’m taking the background image and shifting it up so you see another version of the image in the window.

Is that confusing to anyone? It’s being shifted back and forth.

The way that works is like everything in CSS,
– well let me open the HTML first. These are the two divs we are looking at. There’s the div then the link or rather it’s a tag for that box. I’m focusing on the fact that there’s a background image though. The CSS looks like … [On screen.] It has a background image for these. That’s the background image property. This whole div looks like I have a div around this. That’s the score you’d see if there were a border. Then this shows a copy that sits to the left. Make sense?

I had the background image not repeating. If you mouse over these, there’s a pseudo class. I repeat the style sheet of the same div but only when you hover over it. You can specify that. That’s for both the divs. These are individual separate solicitors but since they use the same style … this changes the background position so the X coordinate doesn’t change but the Y coordinate changes up a Few pixels. So it shifts the image and exposes the next icon. One of these is 46 pixels high. If you shift it the window shows the next icon down.

Student: Where do the URLs go?

Professor: It’s just one file. This. The graphic designer stacked these three different versions of the icon.

Student: So shifts?

Professor: The background yes.

Student: Or my could all show up?

Professor: Let’s do that. Here’s the div for the first and second icons. Item 1 and 2. You see 20 pixels set for the height. Now I’ll change it to 100. That’s enough to see both I think.

[On screen.]

So you see the background image has all 3. I’m going to put a border around this now. [On screen.]

I’m putting a red border so you can see the sizes. Now each of our many divs are this big. But if I cut it off — 60 pixels for the height. Then it cuts it off somewhere in the middle. So I got the right preparations first so it cut off a certain way.

Now I’ll make it bigger. 150. Then I’ll shift it.
[On screen.]

So I mouse over it you see it shifts up and hides the top. That’s a cool effect. That’s the trick. You use one image. It’s easier in the code and easier for the graphic designer. But it’s better for the browser too. You don’t get three separate hits for each image. It’s better for the small icons. If you have these hover states it’s a very easy and useful technique. So you just design with that idea in mind.

On different page maybe I’ll just use the 3rd. It depends on what you want to do.

Saving the changes.

Ok. That’s it for the examples of what I wanted to cover today. I have a difficult assignment for the rest of the day. But any questions? I’ll press you now to do something more thoroughly than before.

In this folder for class 3. Let’s start with assignment 1 then if you finish do the assignment 2. This is a background image applied to the page. So there’s a container I created. It’s just a big container applied with a background image. I want you to use it as a canvas. This is like you are using a transparency. Use this as a reference then position these where they belong. The images are all in the images folder and I want you to do the HTML and the CSS. But this uses all the techniques you saw today. The different image tags, etc. This just putting it all together in a coherent way. This is the rest of the day and this is most important thing about web development. So just keep going.

This is something I made for BalckBook. I provided a solution but I want you to do the same thing. This is an MTV app so it’s complicated but you are using the same techniques. But start with 1. Think about how you’d code it. Think about the big picture first. How many rows, or columns, and sections.

Here’s the starting point on the server in summer 2003 class 1. There’s an HTML file there called INDEX.HTML. It’s just a container.

Then the style sheet. Main.css removes the padding and margins, etc. and appeals the background to the container so you can develop on top of the image. You can easily develop and place the things over the background so you can get the pixels right. It’s a good technique to superimpose and you can see if it’s in a right place. Like if the search box is down here you see it’s not right.

Understand?

Student: No. The last part about the positioning.

Professor: If I go to the HTML code and I put a logo up here in the top left. I start with the div to get it in the right place. I put the word “logo” in here. Then there’s the div that will have the logo in it. Then I make a style for it. [On screen.]
I give it a width of 300 pixels then 200 pixels for height. Then I give a background color so I see it.

Now, I upload it.

Now I can see it’s too big. So my div does not have the right height and width. I see it’s not right so I change the code. Clear? That’s the point I’m asking you to do. This is the background then you place something over it. So start with the big layout with the rows and columns, etc.

All the images you need are in the Images Folder. These are all the images and there are not many. You can see what they are all for too. Go to the browser assignment 1/images. You click on the images and you see these little images for icons, the logo, and that’s for the logo. But you see all the images you need. They are all there I think.

That’s the navigation items background. Then you put the text over that. But I’ll help you. When you start superimposing you will probably call on me. But let’s get strutted then we’ll do this all day.

If you are stuck please flag me down for help.

Student: Do we create an index file?

Professor: Just use this.

Go to this file. The HTML file. Start there. Then put in divs. I’d put one in the top section. The big one is the container. Then just remember to upload to YOUR folder. Not mine. It happens.

[Students working.]

Student: All the images are here in the folder?

Professor: Yes. If it’s not, let me know.

The background folder is the tiling example I showed you earlier.

[Students working.]

Student: The 3 boxes is that one div?

Professor: Good question. I think it’s one. Or it’s one div around the thing then it’s three smaller ones. But you can do that many ways.

Student: Or in real life they change colors when you mouse over them.

Professor: Don’t do that! Just keep it simple. Make the static page.

[Students working.] .

Ignore what’s appearing in the middle of the image. It’s an artifact that somehow got in the middle of the image. Don’t do that.

[Students working.]

Don’t hesitate to call me if you need any help.

[Students working.]

We can ignore that. [Alarm going off.]

[Students working.]

Its about to 1 o’clock. Take a break from your computers every once in a while. We’ll come back at 2.

[Lunch break]

Is anyone stuck? Need help?

[Students working.]

Anyone else stuck?

Student: I have a question.

[Students working.]

I’m going to make a little presentation about another issue popping up as you go. The difference between two types of contents on the page. Block objects, which are rectangular. Other objects are in line objects, not easily described.

Different elements, like divs, paragraphs, a tags, etc. behave in one of two ways. Divs are block tags. They, by default, will take up as much width as they can on the page. They will have a clear rectangular shape and space between them. They will put a big line break in before and after the code.

In line elements, the other elements, only take up as much width as the stuff inside of them. If there is only this much text in the tag it will only be that big.

They don’t have a clear rectangular shape and they don’t have a built in line break. They will just sit next to anything else you put there.

Let me show you an example of this. If I put some text in next to the div, just some plain text, I didn’t put it in a tag, it sits above the div. I am going to put some below the div too. This is just plain tex with no tags. It’s between the two expand tags.

Let me show you this code.

Text. Div. Text. Span. You can see that the text above the div tag is clearly on a different line. The text below the div is pushed down below the div, but not up from the span tag. The span tag is on the same line. We didn’t indicate anything, but the div isolated itself from the text. The span did not.

That’s the fundamental difference between block elements and in line elements.

This is a list of the common block elements [On overhead.] You come across this on your coding. Divs have built in spacing. Things like spans and A Tags do not. Input tags also don’t automatically go one on top of the other. The text field and button will be right next to each other. The block tags we have to make float. Span tags we don’t have to do that.

Some tags are rectangular in shape and have space above and below them. Other tags just take whatever shape is inside of them and don’t have line breaks before and after them.

When you deal with tags it’s important to know what kind of tag you are dealing with. Here’s the list of blocks and not.

Who asked me about the assignment?

For example, if I were going to try to make this diagram, now that you are adding text, image tag is an in line tag. It will have no problem sitting next to some div or something else. The div will have a problem sitting next to the image. You will have to fault the div. You won’t have to float the image.

The same with this. This is an image of the text SEARCH. The image and the button are all in line types of tags. You don’t need to float them. They don’t mind sitting side by side.

This is an image. That would be some text in a span tag. You would need to float these to get them to sit side by side.

I didn’t want to confuse you with this earlier, but it may help to think about what tag you want to use. That’s the next level of this project.

Male Student: Can you tell the difference between the span tag?

Teacher: If you use P or span? Is that what you asked?

Male Student: Yes.

Teacher: What is this conceptually?

Male Student: Text.

Teacher: What would you call this as far as information architecture? A header. I would try to use an H tag because that’s some kind of heading. A heading indicates what the page is about. I would make this an H1 or H2 tag that I would convert or float to sit next to the other tags.

I would use the best I can the actual heading tag.

Male Student: Can you make it part of the table?

Teacher: You can put a heading in the table. I wouldn’t use tables for layout. I would only use it for tubular cell-like data. It’s fine if you put the other content in a table though.

Did that confuse you more?

Questions?

Male Student: Next to recently opened is an image? Is that part of the header?

Teacher: No. Keep the header. Put the text. The header is in the list of block elements. H1 to H6. If you did use a header you would have to float it to get it to sit side by side.

In the CSS you can change the display property of any element. You can override the behavior of any heading.

Let’s say I had a heading up here. I am going to put some text before and after that heading to show you. By default the heading is a block element. It pushes down from anything and pushes anything after it down.

In the CSS I can change that. H1 tags have a different kind of display. I’m converting a heading from a block element to an in line element. It will now behave totally different. It will behave like a span or A Tag.

Female Student: Why wouldn’t we use the span instead of having to use the div? Are they not interchangeable?

Teacher: That’s why I didn’t want to introduce this too early. It gets tricky.

Let’s bring up the diagram again. That’s a good question.

For example, this has three things side by side. Why would I float them and not just have spans? I want them to be rectangles. I want them to have a rectangular shape, which a span doesn’t have. I’m forcing the rectangular shape.

You have to take those considerations in mind. It becomes an arbitrary choice. You get used to doing it one way or another. You can find a way to make a span have a rectangular shape, but just do it the way you are learning it.

Get used to floating rectangular things as divs side by side.

This brings up another layer of complexity. If it’s too much you can always use a div and float it next to something else. Do what you are comfortable with now, but bare in mind the two fundamental elements.

Questions?

Student: Where will you post the information?

Professor: On the blog. But if you go to the school site. [W3schools.com.] I get the CSS. When you have a question about CSS properties you should go here. There’s the reference page. Look at display properties. It should be in this list. Search for … inline.
It’s in the positioning section. It shows you the different options. They have options I haven’t mentioned. But there’s really just block in inline. Just use the first two. You won’t get bogged down with these.

That’s a big issue with laying out and how to convert the blocks. If you when want the rectangle then use the block. If not, use the float.

So I’ll post an explanation on the blog.

[Students working.]

We have a couple of minutes left. Make sure you save everything and have it backed up on the server.

I think this is a good exercise for a practical application. We will do more of this tomorrow.

We will also most likely hit JavaScript tomorrow.

[End of class.]

Professor: Good morning. I think we’re missing a couple of people so we’ll wait a few minutes. If you have questions about yesterday this is a good time to ask. I assume you understood everything perfectly? We’ll review a bit and then move onto today to new material. We’ll give ourselves 5 more minutes to wait for students to dwindle in.

I’m getting started. Have your browsers been wiped out?

Student: Yes.
Professor: We’ll have to install Notepad ++. Go to Google. Search for Notepad ++

This should show up.

[On screen.]

Click download.

So you want to click download Notepad ++. I think we use the 5.44 installer. Let’ said that again. Save file. That should save to your desktop.

It pops up and you click the icon on the desktop. And you double click the install the file you downloaded. So I think we’ll have to do that every morning. The computers are set up not to keep data.

Ok. So I’ll start on the blog. That’s where I’ll post each day. I posted stuff from yesterday and a recap. There’s the basic structure of the website. If you remember. The minimal amount of tags for the web. There’s another post for information architecture and wireframes. Above that is the code for each type of HTML element. Remember the page with lists, form elements, paragraph elements, pre-formated, etc? It’s also on the server so you can download there too.

Pop open winscp. It should be on your desktop or stock. [username deleted for security] is the user name. That’ll pop open this window here. [On screen.] Go to the one pot cooking on the server. If you’re falling behind in your own coding you can go to my folder here to Summer 2009 and there’s a list of the classes and the files I’m showing are here. In class 2 I’ll have a couple of things we’re looking at. In class 1 we have what we discussed yesterday. The code that has the HTML elements are in HTML frame.

That’s where you find things I listed on the blog. Poke around in this folder and files. You can upload the files for yourselves. Try not to overwrite my files. That’s a risk of you going into my folders.

Student: Can we access this from home?

I tried to access the server I couldn’t get into it.

Professor: You shouldn’t have a problem. Bear in mind, make sure SFTP is selected and the port number is 22. The settings may be different.

Student: Does it matter which SFTP?

It was definitely on port 22. But it wouldn’t let me get to the window. I got an error message.

Professor: Not sure what the problem was. It should work.

Student: Thank you

Professor: These servers are down sometimes. So maybe it was down when you tried to use it. That’s possible.

Let’s start with a recap of the blog post. I’ll run through the elements so it’s fresh in your brain. I know this is a lot of material right? It seems like a lot to me. Let’s go over it one more time. So …. every XHTML. The HTML tag has two things. A head and body. Those are the two main sub-components. The head has a title. So there are 6 things required of any HTML document. These lines are one element. The HTML tag and the head tag and the title tag and the body tag. The next post has those elements. So this should be your starting point for a document. Create your own file with the same code in it.

When you start a new XHTML — copy and paste this. The difference between the code is the content in the body and you’ll probably change the title and add more sub-tags and sub-headings. But this is exactly the same frame and architecture of every XHTML document you ever make.

Student: Where?
Student: It goes all the way up to ….

[On screen.]

Professor: Here. So I’m labeling my posts for the class so you can find it by searching by the class number. So today is class 2. Ok. So let’s go through the elements that are listed in the document here.

Ok. Remember what that element is?

Student: Header.

Professor: Tag name.

Student: H1

Professor: Use H1 as the most important header through H2, etc. This is a Ptag. [On screen.] This is the Ptag. I added comments for the Ptag. We didn’t cover this yesterday. This will show up in the code. You can read notes that you leave for yourself, but it doesn’t show up in the browser. That’s only visible to developers. It always begins with these marks. And ends with these marks. So you can go through the code and check that out. This is a paragraph of line breaks. Line breaks you enter in the code but it doesn’t show up in the website unless they have a BR tag. These are three lines because I made a line break here [On screen.]

Also the Ptag starts and ends with a /p. It has the slash on the inside of the tag because it doesn’t require a closing tag.

This is how you make a link. [On screen.] The A is the anchor which shows up for the link. When you click the link it takes you to the link you specified — we call that an attribute. What you put there is the link you link to.

This is a paragraph with a strong tag inside of it which makes something bold. The strong tag looks like this [On screen.]

So it’s just the paragraph but some text is indicated as important. The browser will make that bold. We can change those settings in CSS.

This is preformatted text. Unlike paragraph tags it’ll respect your line breaks. So we don’t have to respect the BR [bell rings ] Fire drill bell ringing …….

[Class laughing.]

Professor: I think they’re testing them. I don’t think there’s a fire.

That light went off. I’ll ask. One moment. I’m inclined to just stay in the room.

[Class laughing.]

False alarm. We’re fine. So the pre-formatted tag allows you to use line breaks without the BR code. You see the line breaks are here and the spaces in the code before the lines shows up visually on the page. That’s the idea of pre-formatted. There are spaces here on the blog but you can’t see it here. This is how you put an image on the page. The IMG tag. It has one attribute called SRC. I put in optional attributes called title and ALT. I hover over the image. The word “donkey” shows up.

Student: Can you move the paragraph on the right. The picture. The paragraph next to the picture?

Professor: We’ll go into that today. That’s about orientation. We’ll cover that.
When you mouse over with the cursor, the word “donkey” comes up. That’s because in the code I put the attribute called “title.” If the cursor sits over the image, it shows the word you put in.

The alt attribute is used for some browsers that don’t support images. The alt tag was a placeholder to show that there was meant to be an image but it can’t be displayed. So it displays the words instead.

Student: What about for people with reduced vision?

Professor: Exactly. They may have software that will read to them. So it’ll look at the alt text to see what it’s supposed to be about. Also search engines look at your alt tag to see what your image is about. That’s what a search engine is interested in. To make it easy to find that out, you should use alt tags properly to indicate what the images are about so it can properly index your page on the search engine.

There are two list types. There’s the ordered list and the unordered list. They’re almost identical. One has OL tag. And one has a UL tag. Those look like this [On screen.] by default. Ordered lists have numbers. Unordered lists have bullet points.

Each list item is an LI tag. Inside of the OL tag or UL tag there’s a series of LI tags.

The next thing is a table. This is a table tag. Table tags have two subtypes of tags. There are TR tags that indicate the row. Within the TR you can have TH tags or TD tags. In this case we have a three-row table. There are two heading subtags in the first row and two TD table tags in the second row. So the headings are bold. And the material below the headings are not bold.

It’s important to organize your tables with the right number of rows and columns.

The next section has a bunch of forms. All forms have to start with the form “tag” and end with the ending form “tag.” Everything between the opening form tag and closing form tag is some sort of control related to the form.

The first control was single line text input. Let’s see what that looks like. [On screen.] So that’s on the page because of these codes. I have the label using a label tag. And I have the text input using the input tag. The label matches the input because it’s indicated in the code that the label is for a particular input. I’ve given it the same ID as the input field.

Student: Will we go into a database and how you can sign into a website? You created those two forms with username and passwords?

Professor: We’ll do that next week. It’s more advanced.

Student: Can you limit the number of characters? Is that in HTML or JavaScript?

Professor: Both. In HTML there’s a max length attribute. There’s an attribute called maxlength that indicates how many characters can be used.

Anytime you try to control the images on your page, there are ways people can get around these things. If someone wants to enter more characters, they can do it if they know what they’re doing. Hackers can bypass those things. So you can’t always ensure that people are entering valid information with just HTML. You have to use other technologies.

You can use JavaScript but that can be hacked too. PHP on the server side is more secure. The client technology has software that manipulates your code and can process it on their own computer. Whereas on the server side, they don’t have access to your server. They can’t manipulate that code because they’ve never seen what’s on the server. Anytime you do security-related things, do it on the server side because you only have access to your server, theoretically.

Whereas with the client side, it’s very easy for other people to change your settings.

Password input is like the single line text input but it has type=password instead of type=text. So these two are identical except for that change. That change means the text you enter in the field isn’t displayed to the user. It’s not encrypted or secure. It just doesn’t show up visually on the page.

A drop-down list is created using the select tag. Just like the list had list items, a select tag has options. That option tag is used for each of the items in the select list.

Radio buttons look like this. [On screen.] You can click one or the other. This is a mutually exclusive set of buttons. To make them mutually exclusive, you have to give them the same name. Name=R1. If you give them different names, then people can select as many buttons as they want.

IDs should always be unique. If you give something an ID attribute, it has to be unique. But a name can be the same. You can give elements the same name.

Radio buttons that are not mutually exclusive can have different names. That way they’re not related.

You have a multi-line text input and use the text area tag. Enter in multiple lines of text. [On screen.] We can changed the width and height of things. That’s the way you do any kind of multiple line input.

Checkboxes are like radio buttons. They’re type=checkbox. The input tag has type=text single line. Type=password for invisible input. Type=radio for radio buttons. And then there’s type=checkbox. The input tag is useful with different attribute set for types.

The submit button is type=submt. The reset button is type=reset. And the generic button that doesn’t do anything is type=button. You’ll use the button type for JavaScript. JavaScript reacts to user actions. So when I click something, something else happens.

I can attach a behavior to this button. It will then call a JavaScript code that does something. Maybe it makes something visible or invisible, etc.

The iframe is attaching one page to another page. So we have the NYU page included in a box on this page. This is used a lot for advertisements. We’ll go to CNN.com. Do they have ads on here? Here’s an example. [On screen.] This is probably an iFrame with Flash animation inside it. This is probably loading the ad from another site. They use that for ads because ads always come from an ad server.

There are companies that only provide ads. They do all the negotiations with the advertiser. So what you will do as a site, you’ll receive code that the ad distributor gives to your site. That pulls the ad from another server. Since you don’t know where the server is coming from and the code, etc., you don’t want that code interfering with the code on your page. So you isolate it in an iframe. So the JavaScript code and Flash code don’t interfere with your page.

Student: How do you determine how big that is?

Professor: I can’t do it right now because I don’t have that installed. You can install something that gives you that information. There are tools we install into Firefox that helps us with that. We’ll get to that later.

That’s it for the XHTML controls. Let’s move onto a recap of the basic CSS stuff. We’ll get into new CSS techniques today. There’s stuff posted I just did this morning.

We have CSS receptors and Web layout. There’s a good post here that goes over the different selectors. We covered some of them but not all. I’ll go over the ones we did cover.

To style all paragraphs, use P in between the brackets and any styles you want to apply to the whole page. If you want to style only the P’s that have the ID equals some ID, use the pound sign. That will apply a style to only one individual paragraph. So it matches a paragraph that looks like this. [On screen.] That’s an important technique.

Selecting a particular class, if you make a style that’s P-dot and then a word, that matches any paragraph tag with the class that equals that same thing. A class is meant to be applied to many different things.

Any questions?

Let’s move on. I’ll open up Notepad++. What’s the first thing I do when I create a new document?

Student: Put the HTML code in.

Professor: Right, copy and paste that code. There are some things that are better to not think about. That’s one of them. We’ll just copy and paste versus recreating it.

I’ll go to the Web post with that code and copy and paste it into my new page. We’ll call this page Class 2 – CSS Selectors.

I’ll save that into a folder. Put this in your own personal folders under Class 2. I’ll make a folder with my name on it because it got wiped out. Inside of there I’ll make a Class 2 folder. Inside the Class 2 folder, I’ll make a basic_css folder. Inside of basic_css, I’ll call this file index.html. You may have noticed we call a lot of files that name. That’s a special file name. It’s the default file name the Web browser will look for.

If I tell the borrowers to go to [sever address deleted for security], I’m not giving it a file name. It’s a server name. I didn’t say to load up blog.html, etc. It’s just the server name. So the browser will request from the server that index.html file if nothing else has been requested. It’s the default page when you don’t specify a name.

Let’s put in some text in the body. We’ll put in a heading, page 1. It’s the same thing as the title. We’ll recreate some of the things we did yesterday. We’ll make a paragraph. Put some text in there called paragraph one. We’ll make a few paragraphs. Let’s make six paragraphs.
Now I’ll upload that to the server. Open WINSCP. Navigate on the left side. To your personal folder. And the on the server side do the same thing. Your name and the class 2. It’s not there you haven’t created it.

And create a folder called basic CSS there. Drag over the HTML so once you have that on the server and in your own folder it’s important to get used to … where do I go for the file?

Student: The address bar. Then you put it in your name ….
Professor: Ok. [On screen.] /class2cssspace. index. That’s very important to remember how to do. This URL you HAVE to get used to translating folder names to your OWN names. The URL is your own folder. It’s URL/the file folder. [On screen.]

Of course … [On screen.] So that’s what comes up if you hook up the right file. If I didn’t specify index.html it’ll load anyway because that’s the default it loads. It looks for a file called index.html.

So you all have or you’re looking at my version of a file with 6 paragraphs. So now we’ll specify styles for one paragraph — for several paragraphs then we’ll do new stuff. If you remember how to specify a style for paragraph 2 for example. I give it an ID that allows me to individually address this paragraph. It’s called P2.

So I know now this paragraph that I want to change the style of has an ID of P2. So I can make a CSS selector for only paragraph P2. So we have to first link the CSS file with this file. We have to indicate there’s a CSS file for the rules of this code. That’s using the “remember the link” tag. Relationship = style sheet. Type is text/CSS and href= where the file lives. I’ll require you to put your files in a subfolder called “styles.”

[On screen.]

Ok. So the link tag has three attributes. The relationship (rel) and the type is the type of code. It’s CSS code. And the hyper text reference is the folder and name of the file. That’s the subfolder from where the HTML file lives. So it’s a subfolder, file, etc. You tell the server where to find the style sheet. Now we have to create the file or else this code won’t know where to find the file. Let’s do that. Let’s make a blank page.

In Notepad you can save the window. We create a subfolder by clicking the icon with the star next to the folder. Create a folder called “styles.” Double click to get into the folder and save it as “styles CSS”. We linked from the XHTML to the style sheet. And we have the style sheet in the right position. So now we can write the code. We want a style for paragraph 2 so it has a font size of 20 point. The way we do that is P#P2. Meaning select paragraphs that have an ID of P2. Now brackets. So let’s give it a font-size:20 point. [On screen.] So this is a CSS property we changed. I posted a link of all the CSS properties available. There’s a big list. But they’re relatively straight forward.

So let’s give it a size of 20 point. If you’re familiar with microsoft word point size …

Student: When you save it it comes up as new instead of main.css.

Professor: Then I go to file, save as, and create the sub folders “styles.”

Student: I did that.

Professor: So you should be in the same folder as the HTML file. Then click this icon here for a new sub folder and name it “styles.”

Student: Right. I have that folder and the main CSS folder.

Professor: Double click to the styles folder. In that folder you want to save the file as “main.css.” You don’t want a new subfolder you just save the file as “Main.css.” Once you do that it should be set up correctly.

Ok. Now this is a selector. This is the rule. This selector only selects for the paragraph with ID. Not working?

Student: Crashed.

Professor: Re-open it. It stores your documents. It should be there.

Now we’ll upload this to the server. The whole thing. Go to winscp. You have to make sure you create the files on both the client and server side. You can drag the files so that you have the file in both places.

We should see paragraph 2 having a bigger font. Again this is because we use the selector and applied a bigger font to that paragraph. Now we’ll do the same thing but instead of applying it to one paragraph we’ll do several paragraphs at once. We do that by giving the paragraphs we want the styles to change for a class. We will give them a command class = blue. You can use whatever word you want. Blue is nothing special. I’ll give that class to the last 3 paragraphs. The last three paragraphs will have class = blue. In the style sheet we identify that the paragraphs with the style blue we attribute that. I’ll give it something obvious so I remember that they equal blue. So P.blue has color blue. [On screen.]

Remember the dot notation indicates a class name. The pound sign is for an ID.

Student: You can write in a hex code right?
Professor: Yes. If you know hex code. You can do 0,0,0,0 for blue. In HTML you use these codes for colors. Blue is just a primary color.

So you can now upload this to the server and the last three paragraphs are blue. Remember to re-upload the CSS file and the HTML file. Make sure they’re all in the right folders. Now if I refresh the browser they’re blue.

[On screen.]

Ok. Now that’s what we covered late yesterday. We’ll do a couple of more CSS commands. Now let’s say I wanted these numbers in here [On screen.] in the blue paragraphs to be purple. I just made purple up. The way we do that is in the HTML code we indicate we want special styling to these numbers. We want it in one specific point in the paragraph. We use the tag “Span.” You put a span around the text you want to change. We don’t want to change the formatting we’re just doing a style adjustment. Span is like a discrete tag. If I change this and upload it to the server you’ll see nothing changes on the page. Let’s drag that over. It’s the same as before. You wouldn’t know I added the span tag. Why put it in? Because I can attach a class or an ID to a span tag. So you attach “class = purple” so each will have that tag. When you have an attribute you can call it whatever you want. This now allows me to attach a style to these 3 pieces of text. We won’t change the formatting. We’re using the span tag to apply a selector to those three tags. So I can say span.purple, and it’ll make it purple.

So it looks for all span tags with class = purple and makes whatever is inside purple. So it’ll look for the purple class and change the class to purple.

So let’s try that. Let’s upload it to the server. Both to CSS and HTML. So just those numbers turn purple. So that’s the use of the span tag. It’s used for isolating text and attaching styles. That’s the ONLY use for the span tag. It’s useful because it doesn’t have default behavior of it’s own.

So let’s say I wanted [thinking] … this “purple” to have the color orange. What would I do?

Student: Replace purple with orange.

Professor: Ok. But it’s just ONE element I’m changing. So class isn’t the most appropriate.

Student: ID

Professor: Right. You give it an ID. You could use class. You can apply class to one element. But it makes more sense to use ID if you address one individual. So in this case we want “Orange.” So I make a style selector saying “all spans with ID orange have color Orange.” [On screen.]

Now I re-upload that to the server. [On screen.] I have to change the HTML and upload that to the server too.

And it’s orange now.

I’ll leave this example as is. We’ll move to a new file. Any questions about this so far? It’s about selecting pieces of texts and elements and changing their styles.

We’ll now go into the next set of CSS selectors. Let’s make a new file. I’ll copy and paste this so I don’t have to retype it all. [On screen.] I’ll save this new file as child_selector.html.

This is going to be a CSS Child Selectors as the title. So the HTML is matched up with the CSS. That makes it easy to organize. I wouldn’t normally call the CSS files the same as the HTML files. The CSS file will also be our H1 tag.

Now we’ll make a list. Let’s make it an unordered list with three different list items. We’ll call them item 1, 2, and 3. That’s the body of the document. It’s a heading with an unordered list with three items. [On screen.]

We have to make that CSS file we talked about the styles/child_selectors.css that we’re linking to. So let’s make a new file. Go to File, Save As, in the styles folder call it child_selectors.css. We have two files necessary for this example.

Let’s load this to the server and look at it. It’s always good to see what you’re starting with. Let’s view that in the browser by going to what URL? This isn’t a quiz. Remember everything here matches the file structure of the folder on our server. So we’ll type child_selector.html into the URL. We have to tell the browser which folder the file is in and what to load up.

We have our heading and three list items. The first thing we’ll do is make a style for the list items. This is something we’ve already done. How do I make a style for list items?

Student: By a class?

Professor: We don’t use class actually. In this case, we apply the style to the LI tag. We’ll make the style for the LI. It’s just the tag name. We’re applying it to all list items so there doesn’t have to be a particular class or ID. What do you want to do with the list items? What do we want to change? Pick anything.

Student: Move them to the left.

Professor: Ok. Let’s see where they are now. Let’s move it drastically to the right so we can see that it really worked. I haven’t used positions yet, so that’s good. Let’s change the position. There’s a CSS property called “position.” We tell it that we’re changing the position of this set of items. Make the position relative.

What this tells the browser is we’re changing the position of the object and tell it where it originally lies if we didn’t change. We give it the starting position and then change it relative to that starting position. We’ll move it from the left edge of the LI items 100 pixels to the right. This takes the starting point of the left position of the items and moves them over 100 pixels.

Student: Can you use IBM?

Professor: That’s a little advanced. EM is the preferred way of doing this. Some people say EM makes more sense for some reason. I won’t go too far into that. Pixels are the dots on the screen. You can see the actual pixels on this screen. This graphics card is lousy on my computer so you can see the pixels. But the pixel is literally a dot on the screen.

An EM is a proportional thing. It’s about in proportion to the size it would normally lie, how would you move this over? EMs are flexible and more practical, but I’m using pixels right now.

We’ll take the position of all the list items and shifting the left edge 100 pixels to the right. If I wanted to shift it to the left, I would use a negative number. We’re doing it to the right since we’re already at the edge.

Let’s upload that to the server. We’ll see what happens. We’ve shifted the whole thing over to the right. This brings up another topic to talk about now. There are three different values to set for position. There are three ways you talk about a position. You can talk about it relative to where it would lie by default behavior of the browser. You can also talk about position in absolute terms. That means starting from the absolute top left of this page, how many pixels to the left and down do you want to move your items.

If we talked about this in absolute terms and gave it a left position of zero, that would actually put the item in the top left. We can change the top position to zero. Those are the two properties that are X and Y coordinates. That puts the set of list items into the top left corner. They’re actually all in the top left corner because that’s a style we’re applying to all items.

Student: Which would you recommend?

Professor: It depends on what you do. If you want all the items to be in the top left corner, use the absolute positioning.

Student: Do you use one more than the other?

Professor: No, it really depends on what you’re trying to do. Once we start making full pages with lots of content, you’ll get the hang of playing around with this.

If I said the position was relative by changing this word to relative, [On screen.] that will not move the position at all from where it would originally lie. I’m changing the position relative to where it originally was and I’m not changing either one of the properties by any amount. It’ll just stay where it lives.

Let’s upload that. So they sit where they would normally lie. To drive this point further, if I change the top to 100 and the left to 100 and reupload, we’re shifting relative to the normal position down and over 100. You can really play around with things however you’d like.

Some people design a whole webpage where every little bit is positioned absolutely at a certain position. That’s bad form because it’s difficult to maintain your site. If you change one position, it has no effect on the other things. That causes problems for maintenance. So don’t do that for now. We’re going to be getting into layouts today and how you make column layouts. You’ll see there are some difficulties with that concept. It’s an attractive idea to say the columns are specific positions, but it’s not a good idea. Take my word for it.

Let’s move on. What I’ll do now in the HTML is let’s say I had a paragraph inside of one of these lists. I can put a paragraph tag for item 2. That’s a paragraph inside of list item 2. [On screen.]

Let’s say I also had a paragraph at the bottom of the page outside of the lists. So I have two paragraphs on the page. There’s one inside of list item 2 and one outside of the bottom. I’m doing to for a reason. Let’s see what that looks like with no styles applied.

That’s not what I meant to do. You can see you get into issues when you start positioning things. I’m going to remove the styling I did for the positions. Let’s re-upload it.

So that’s what the page normally looks like with no styling. So I want to show you how to address a style for a paragraph inside of something else. I’ll say for all the paragraphs inside a list item, do a particular style. That affects one paragraph but not the other paragraphs.

I’ll say LI, space, P and then the brackets. Let’s make it a background color of purple. That way we can see it easily. We haven’t seen this selector before. We’ve seen list item with pound signs and dots. But we haven’t seen a list item followed be a space and another tag. So the space indicates the P will be inside the LI. So this will change the style of all paragraphs inside a list item.

We’ll upload that to the server.

So only the paragraph inside the list item is being changed. That’s what’s called a child selector. It’s called that because the paragraph is like a child of the list item. It’s inside the list item. The list item is the parent.

That’s another thing available to you as a CSS coder. You can use this technique to change styles of certain items and not other items. This is a very commonly used one. You may only want to change some paragraph styles so you can use the child selectors to indicate which paragraphs to change.

So now we have two lists. They’re identical right now. I’ll give the second list an ID of L2 for “list 2.” I’ll give the first list an ID of L1. We don’t want the repeat the same ID. That way we can attach different styles to them. I’ll re-upload that file. We refresh the page. So there are two separate lists with the second item having a paragraph in it which is purple.

Let’s say I want the second list paragraph to be purple but not the first list’s paragraph.

Student: You have to specify for L2.

Professor: Exactly. Somehow I have to say for the paragraph that’s a child of list 2, apply this style. We haven’t seen how to do that yet. It’s combining things we have already seen.

What we say in the CSS is exactly that. You don’t want the child of any list. You want any paragraph that’s the child inside of an UL tag with an ID of L2. That sounds long winded. But all you have to do is say UL, pound sign, L2, space, LI P. So we’re merging a few things here. This is a style selector for any UL tag with an ID 2. That’s what this means.

The selector inside of that is to look for a list item and then look for the paragraph and make it purple. I tend to read these backwards. We’re applying the style to a paragraph tag. The last thing in the selector is receiving the style. The paragraph inside of the list item, which is inside the L2 ID gets the style. Let’s see if that works.

We’ll re-upload both files.

It works! So again, let’s cover this again. We have two lists right? Our goal is to apply a change to style to the first list not the second. So we change the CSS selector that looked different before [On screen.] So we change it to a specific selector that says “only apply that to the list item inside the ID of L2″ so the point is the space indicates a parent/child relationship. Since there’s a space it means it’s a child of the list item within an ID that’s relative. You can do this with classes too. The solicitors are independent. So this selects from an ID from L2. Combining them indicates one inside the other, inside the other. You can see hierarchy is important. There’s a hierarchical relationship to this. That’s what we indicate.
Ok. Questions?

So let’s say there’s one more thing I want to show. Another type of selector. Let’s say I have inside of the first list in item 3, I’ll put something there. I’ll put another list. Let’s say an unordered list. You can put one list inside another like this. It’s called second list item 1. I’ll make three list items inside the second list. 1,2,3. Inside the list item I’m putting a new list inside of it.

Let’s make an ordered list.

We have to close the ordered list. So we’ll have one list inside another. It’ll look more straight forward than it looks in code. You do this in Word all the time. It’s a list inside a list. We could get rid of these bullets but we’ll leave it for now. We want to apply a style to the second list but not the top level list.

There are a few ways to do this. I’ll change this a bit. We’ll actually put a paragraph inside the second item of the second list. Let’s do that. [On screen.]

Zoom out a bit [On screen.]

So inside of this nested unordered list — meaning inside another list – we have three list items. The second list item has a paragraph inside it. So let’s upload that to the server. It’s getting complicated but manageable.

So I want to change the style of the paragraph. There are many ways to do that. We know we can change the style by having an ID or a class and apply style to the class. We can indicate to give a style to any list item with an ID. I’ll show a new way to approach this paragraph.

So we can say UL LI UL LI P. That would select any paragraph in any list — you can make this as long as you want. I can say LIP which will look for any paragraph in any list item.

The thing I’ll show you now is we can say li > p. This will indicate any p that’s a direct child of a list item.

That would mean that if the paragraph is not inside anything else in the list item. It’s just directly in the list item. There’s nothing around it.

[On screen.]

It would not match this. Actually. It just means one thing directly inside another. It’s the least likely to be used. I don’t recommend you use this but it’s there if you want to address just one thing and not grandchildren. So we can change the style like this. Turn it yellow. Upload that. Why did all three turn yellow?

Student: They’re within
Professor: They’re all children of the Ai tag

This is one reason why you’ll see things like this. Ui li ul li. That would work. You’ll see these selectors. It’s not a good idea to make them TOO specific. Did I miss something? Ulli … it’s easy to get lost in these things. I don’t recommend to use too long selectors. But you can do this if you want. Maybe you need to have that many selectors. This would work without it. It means anything inside anything else. It can be several levels down. So I can say “ulp.” The p is not directly inside the ul. It’s separated by a list item. But this will work because it’s anywhere inside the ul. It doesn’t have to be directly in it to be a grandchild, etc.

So it matches all the Ptag in any list

Student: The difference between a nested item and grandchild

Professor: They’re the same term. A child is anything directly inside of this. For example. The H1 is a child of the body. The list item is NOT a child of the body its a child of the UL. The body has a child UL and the child has a list item. I can say the UL is the grandchild because it’s separated by one.

Student: Nested?

Professor: That means anything inside anything else. The li is nested in ul.

Student: CSS dictates what they look like.

Professor: It says only make the grandchild of something blue. You know because you coded the HTML. You use that structure by using those relationships.

So in this case we say make any child, grandchild, any p turn to yellow. It makes all the p’s turn yellow inside a list. Even though this one is a grandchild it still prints yellow.

Questions about this? Let’s say you have a paragraph you want to change color you say p and make it red.

That’s the simplest a tag name that applies to all paragraphs on the page. I can say p #.P5. That only applies to the paragraph P5. If I say P.red that only applies to paragraphs with classes equal to red. If I say p inside of li that only applies to paragraphs inside li. If I say p inside ul that applies to paragraphs inside a list. If I say < p that only applies to children of li. If I say li.17>.p This applies to any paragraph that’s a child of a list item of L7.

Space indicates parent/child and greater than child indicates direct descendant.

This is all posted. Any questions?

The most commonly used things I would advise you to start with the simple ones. Using P and an ID. Or P in the class to indicate the class. Those are simple. You can use ID’s and class to your advantage that’s not too confusing. When you get used to it you’ll use selectors like li space. But start simple and use the more complicated ones. The ID and class selectors are pretty simple. Use those first.

Ok. I’ll move onto a new topic now. Any questions about this?

Good question. Let’s see ….

There are a few ways. First would be to usource like HTML. You see the link tag and I see where the style sheet comes from. I copy that. Go to the browser and replace the file name with the file name from the CSS code. Enter and you’ll see the CSS show up there.

That’s always going to work. That’s the easiest way. There’s a tool we can use that’s more useful than that called “firebug.” If you Google firebug you can click that … [On screen.] They have a screen shot of what we’re talking about. You can view the source and it’ll bring up the style sheet. Let’s install this. Go to getfirebug.com and install that. It’s 1.3. It’s a Firefox add on. It’s adding a function that’s not on Firefox by default. You can edit options to allow the installation. You can add firebug to the list of sites it’s ok to install from. You should get a pop up like this once you give it permission. So now it’ll add software automatically. We have an old version of Firefox here.

Anyone else have this problem? I guess only mine is old.

[Class laughing.]

It’s downloading Firefox version 2. You will see on your own copies once you’ve installed firebug you’ll see a firefly icon. You should see that. Click on that. It’ll pop open a panel like this. Click on HTML and it’ll bring up the style. It’s useful as a tool.

It’s also good for HTML to see the code.

Student: Are there programs available for other browsers?

Professor: Internet Explorer is a lost case. But Safari and Opera has tools available. The general answer is no. Firefox is really the only browser that supplies easy ways for developers to use these tools. Firefox is built for developers very well.

Please don’t use Internet Explorer in this class. Things don’t look right in it. You’ll code something that’s perfect and it won’t display correctly. It’s actually the most widely used browser in the world, but it takes so much time to tweak it that we can’t use it in this class.

I’ll move onto Web layout. We talked about CSS and colors. But let’s make a site that looks decent. Let’s go to nyu.edu. They have a layout. There’s this section next to that section next to that section. We don’t know how to get these things to sit in the right place yet. We know how to make this purple. But we don’t know how to make the banner on top of the three columns. That’s one of the biggest issues in CSS is how to get things to sit in the page correctly. How do we position all of these items?

It’s tricky to do this. This will be difficult for most of you. There is a reliable technique, if used properly and consistently, can save you time doing this. We’ll make a new file. I’ll copy and paste the old file. We’ll save it in the folder called “layout.” We’ll save the file as “index.html.”

Student: Did you say in a folder called “layout.”

Student: Is it a new folder or a subfolder?

Professor: It’s up to you but I’m using a new folder. Do whatever makes sense to you. Just remember where you put it.

Student: What was it called?

Professor: It’s called “layout” in my “Class 2″ folder.

Student: Should it be part of CSS?

Professor: I made it separate. Wait, maybe I got lost in my own files. I made it as a separate folder outside of basic_css. I’ll make a subfolder called “styles” just like the other folder. I’ll save a style sheet called main.css, just like the other example. Let’s make a new file. Create a new subfolder called “styles.” Inside of that, save the blank file as “main.css.”

This will be the same thing we do for every example. We make the HTML file. Inside of that folder, I make a subfolder called styles and then a folder called main.css. You can call it whatever you want.

In my Class 2 folder, I have two subfolders, a basic_css, which is the last set of examples, and a layout folder. Inside of layout, I have index.html and styles. Inside of styles I have main.css.

If you want to just download my folder structure, go into my account and pull it to your side. Pull it from left to right.

We’ll create something that looks like what I posted on my blog. Let’s go there again. We’ll use my blog as a reference. It’s the latest post. The latest post is “CSS selectors and layout.” It has links to the different selectors we talked about. It has a link to a layout technique we’re mastering today.

So click the layout link which takes you to a post we’re talking about now. We’re creating a two column layout with two rows. It’s not pretty but it has columns and rows.

We’ll focus on how this maps into content and HTML contains. We have four or five boxes here. We have the outer box. Every page you make has a container around the whole thing. Inside of the outer box we have four separate boxes.

We’ll use a tag called div that we haven’t seen before. A div stands for division. It’s just a box. The div tag creates a box. We’ll create one big div tag and four nested div tags. Let’s go with the HTML first and the code. The code is straightforward. I say that about everything.

Let’s give this a head of Class 2 – CSS Layout. I’ll create a div tag. This is similar to the span tag. It doesn’t really do anything on its own. We have to give it behaviors. The span tag didn’t create a box. It just allowed us to style text individually. The div tag actually creates a box.

Inside of this div, I’ll create four more divs. Let’s make the boxes empty now. [On screen.] We have the big div that surrounds everything. We have the four little divs inside of the big div.

We have to look at these divs. They’re invisible unless you give them a style. For all divs in the style sheet — switch to your style sheet — make a style for all divs. We’ll give it a border with one pixel, a border color of red, and a border style of solid. This will make all divs have a one-pixel, solid red border around them. That way we can see them. This makes the boxes visible.

I’ll now upload this to the server. I’ll upload the whole folder so I don’t have to individually drag the files. Then I load that to the browser. So I’ll go to my folder/class 2/layout. That’s what I have. [On screen.]

It’s not exactly what we were looking for yet. There’s something on the page that looks like a squashed box. It doesn’t have depth or height yet.

My first task is creating the outer box and give it shape. Let’s not worry about the inner boxes yet. To give the outer box a height of 500 pixels or something like that, I will give it a height property in the CSS. There’s a property in CSS that sets the height of any box on the page.

How do I give a height property to just the outer div?

Student: Give it an ID.

Professor: Exactly. So to individually address this box, I need to give it an ID. There are other ways to do this but giving it an ID is the simplest way. So div, space, id equals “container.” Container is a common term for this. Get into the habit of calling the outermost div of your set of divs a container. You’ll see this term a lot. It’s how people learn to do these things.

The outer div has an ID container. Now I can apply specific styles. So div#container selects only the outer div. Let’s give it a height of 800 pixels. It’s big but not so big it goes off the screen.

I’ll re-upload all that stuff to the server. I’ll refresh the browser. It did go off the screen. I’ll make it smaller because I zoom in for this screen. You can make yours bigger because you’re not zoomed in on your computer screens.

So we have a box. There is a box with a left edge, you just can’t see it. See the box? There’s a box around the space. The other divs are still squished because we haven’t given them height. So the big red line up at top is the four other divs that are squashed together.

Let’s give height to those other four divs as well as width. We can do the same thing for the four divs as we did with the container div. So inside my HTML, what kind of CSS selector do I use to apply styles to the four smaller divs?

Student: Divdiv?

Professor: I’d say div#container div. So that means any div within the ID of div container. I’ll give a height of 80 pixels. We’ll make them square. So they have 80 pixels width and height.

You can see we’re using the CSS tools we’ve learned to create this layout. The layout isn’t working yet, but this is how we’re addressing the divs. Now I’ll upload this to the server again.

Now we can see four squares. They’re not laid out correctly, but they’re inside the main square. The next thing we want to work on is getting the squares to line up side by side. That’s the whole point of this exercise. We want to make something like what’s on the screen. There are two squares side be side on top of two others.

We don’t have the boxes in the right layout. So first we need to line them up next to each other. I do that by adding a property inside of the div#container div selector with float left. We haven’t told them to be on top of each other. That’s the default setting of the browser. That’s an important thing to bear in mind.

When I specify “float left,” I’m telling the browser to apply a style to these divs inside the container. I want them to go as far left as possible. This is tricky with layout. It’s an awkward way of saying to line them up side by side. So what happens to the top left div is it will go as far left as it can within the containing div. So it stays where it already is. The next div will wrap around on the next line and line up next to the top left one. The third box does the same thing. And the fourth box does the same thing.

Let’s see it happen. Then we’ll play around with it. The float left command tells it to go as far left as possible but it stays in the same row. So the boxes look like that. [On screen.] There’s no other way to put it. It doesn’t make a lot of sense, but it’s the way that it works. Once you get the hang of that, you go with it. Float left stacks things horizontally.

Now I can tell to not stack the boxes up side by side after the second box. That’s even more confusing. There are a couple ways to do it.

I’ll put another div in between the second and third div. It will be invisible. I’ll say class=”clear.” That applies to the new third div. Now it’s an empty div with nothing in it. So it is a div inside the container because of how we positioned it. So it will have the style we set for all divs in the container. But we don’t want that for this particular div. We’re going to override it.

We want the third div to be totally invisible. So we say to clear both. I’ll leave in visible at first. But I’m adding another style selector that says for all divs with class “clear,” give it the property “clear both.” I want to give it a height of zero pixels and a width of zero pixels. I don’t want this div to really show up on the page. I’ll show it to you with a height and width so you see where it sits. But we’ll change it back to zero.

I’ll start this with 10 pixels.

Normally I wouldn’t do that. It’s just for illustrative purposes. Let’s see what happens. [On screen.]

One moment.

I want to give it a background color to make it stick out. Yellow. Just to show you where the div is sitting. So that’s the div we created. I’m not sure why it’s so big. Let me debug this.

Should be 10 high and 10 wide. So to overwrite this I’ll give it a class to the other divs. Class = box let’s say.

So the boxy ones have the class box and the invisible one has class clear to overwrite the problem. So only divs with class box give height and width of 80. Only divs with class clear will have the smaller height and width and background color applied.

Student: Can I see that HTML.

Professor: Sure.

So this is the odd one out. [On screen.] So let’s try that. Again if you want the copy of the HTML you can get it from the directory. Ok. That’s more like it. What we have — you see the yellow box. That’ll disappear when I make it visible. The yellow box divides it in two rows. This has magically pushed the other two down further on the page. It’s because I set the clear both property in the CSS for the div it has the clear property set to both. The div will make sure there’s nothing on the right or left of it. It positions itself from where it would normally sit. Since this has class both it will push itself down the page as far as it has to to have nothing on the right or left. Let me show you what it looks like without the clear both set.

Not what I expected. You see it’s not doing what I want it to. I know why actually. One moment. If I put a float left property there it makes it like all the other divs, lined up side by side. When you attach the “clear.” If I said “clear left” it makes the div drop down until there’s nothing on the left. It drops here and slides left. Makes sense? This is confusing I’m sure
Student: I get why it keeps things from both sides but not the left

Professor: Any text you write is sitting on the left. It’s a default behavior of the browser. It starts left by default. If there’s nothing to the left it’ll shift to the left.

Student: Because of the hierarchy of the code nothing can be on the side of the yellow square and pushes the other two down.

Professor: Exactly. I changed the clear both to clear left. It’ll drop down until there’s nothing to the left and the browser will by default display on the left. I haven’t told it to not put anything on the right. Let me show you that.

Maybe not …

[Class laughing.]

That’s fine. That wasn’t critical to my point. I won’t play with it. Point is it has nothing to the left which is why it’s in this position. I also told it not to put anything on the right so it’ll force anything to be further down. It’s a way to draw a big marker on the page to say nothing is to the right or left of this so everything shifts below. The final trick in the end is to make it disappear taking out any height or width. There’s nothing to display the background color on. So let’s take it out.

It’s gone.

Actually there’s still a border I’ll get rid of. That one pixel is sitting here so that’s what the dot is here. Let’s override any borders. [On screen.] Say borders and pixels and it’ll override any style sheets set anywhere else. Now you would not know that there’s an invisible div setting the rows. That’s how it works.

So the important thing to remember which is — if I put a paragraph after this last box — I’ll take it out in a moment I just want to show you something.

The paragraph will normally not sit side by side. It’s sit below. In the last example [On screen.] this. Remember we made all of these and they were sitting one on another. That’s the default. But somehow for some reason this paragraph sits on the right of the last box. That’s not the default behavior of the browser. That’s only because of the float left. Take my word for it. When you have boxes that are floating you put a clear invisible box after every row. After the first row you have the box and after the second you have that invisible box. After every row make an invisible box which will make it behave appropriately. The invisible box will push everything down. That’s the rule of layout when you have boxes with float properties remember after the end of the row. In this case after 2 boxes you put an invisible box. If you abide by the rule you won’t have to think about it again. If you forget the clear thing at the end you’ll see the content after the box will sit someplace else.

Student: The box and the paragraph?

Professor: Every paragraph has padding by default. In CSS we can say to remove that. We can change that.

That’s a good question. I should show that. First let me change the size of the box so it looks more like the diagram. We have the basic parts in place. I just want to change the sizes which will move us into your question.

I’ll make it 200 not 400.

The sizing comes down to trial and error a bit. That’s 200 high that looks good. Let’s make …. I want to keep it compact. I’ll give the width 200 also. Yours could be bigger.

So we’re almost there now. Now I add space on the top and left to push the inside divs to the center. This is too far up and left according to the diagram. We want equal space on all sides. That’s called padding. There’s two spacing properties. One is padding. The space inside anything. Spacing the next. The space between the outer and inner box could be padding. So let me show you that.

On the container I give it padding of 5 pixels.

Student: Sorry. Excuse me.

Professor: What’s up. Ok. We can do it now

We’ll take a 10 minute break. Ellen wants to talk to you.

Speaker: I have receipts for anyone from yesterday. Anyone having checks for today we can have those now.

You’re the interpreters. We’re making sure that you’re registered with our office. They got in touch with us saying you’d be here.

Student: For what?

Speaker: the 100 dollar activity fee.

Professor: Don’t use the default program.

Professor: Where were we? So we’ll finish up the layout and positioning of these boxes. The example code is basically done. We’ll just tweak the padding, which is the spacing between the inner and outer boxes.

We’ll just play with the numbers. Let’s change the padding to 10 pixels. We could count the exact pixels with math, but we’ll just use our eyes right now. That didn’t work, so we’ll count the pixels.

We set the container to have a height of 200 and width of 200. So this outer div is a height and width of 200 pixels. I’ll remove the paragraph because we don’t need that anymore. So we have a 200×200 box. Inside of that box, how much spacing do we want around the four boxes? Let’s say 10 pixels. That means the inner boxes need to be 200 menus 10 on each side. So that’s 180. So 180 divided by 2 is 90. So each box needs to be 90 pixels wide. But we have a border applied which adds a pixel to all of our numbers on each side. So I’ll show you what happens when we set everything to 90.

When we set the boxes to 90, with a 10-pixel padding around each side, it looks like this, which is not what’s expected. [On screen.] Let’s look at the numbers again.

We have 200×200 for the outer div. The padding on all sides is 10 pixels. My math isn’t working. 200 minus 10 on each side is 180. 180 divided by 2 is 90. Why isn’t that working? Let me play with it for a second. My math isn’t working. Can anyone else see the problem? I’ll play with the heights by eye so we can finish this example.

So I was hoping that would happen earlier. This is what happens when the widths inside your container box are greater than the space available. It causes the inner divs to spill out one on top of the other. This happens frequently with CSS. You’ll wonder why these bugs are happening. It’s because your widths of the inner boxes are too big for the containing space.

So let’s change this back to 95. It should really be 90 or less. I don’t know why that’s not working. So 95 looks ok.

Student: 97 to 98 looks the closest to even.

Professor: Ok, we’ll say 97. You can do this by eye or do the math. My math is not working for some reason. So that looks right. [On screen.] In our diagram we have spacing between the boxes. We haven’t accounted for that yet. So let’s add that. That’s tricky. I’ll show you why.

If I put spacing around each box, that’s called a margin. So I want to differentiate between padding, which is the space separating a box from everything inside of it. So if we put padding around the outside box, that pushes the inside boxes away from the edge. So a padding of 10 pixels of the container box, pushes all sides in 10 pixels.

Margins are the opposite. Margins are the space outside of a box. Padding points inward of a box. Margins point outward of a box. So I want margins separating the outside edges of these inner boxes. I want to push things away from the boxes, so that’s margin.

I want to put a margin of 10 pixels. We know that will make the map of this stuff too big. So it’ll spill out of the box again. Let’s see if it happens. [On screen.] We have a problem. The spacing of these two added together is too big for the container, so it all falls out. So we have to subtract from the box width. So we subtract 4 times 10 pixels which is 40. So we separate 20 pixels from each box. Just take my word for it. So 77 would be the new width and height. This SHOULD work. [On screen.]

I’ll reiterate what’s happening here. We have an outer box of 200×200 with a 10-pixel padding inside of it. We have four 77-pixel boxes with 10-pixel margins on each side of each box. So the space between the top two boxes is 20 pixels. It’s 10 pixels from the left box and 10 pixels from the right box. It’s the same as the bottom two boxes.

So there’s 10 pixel padding from the outer box plus the 10 pixel margin from the inner box. So this can make you crazy doing all the math. I tried to do it by eye as much as possible. When I encounter a problem, I do the math to evaluate what’s wrong. But you can usually get by using your eye.

Student: The lines add one pixel?

Professor: Yes, the border is a one-pixel line. So that adds to the width of the box. So there’s six more pixels added to the whole amount. We can write a formula for that, but you can also just do it by eye.

We’re done with this example. It looks pretty much what we had on my blog. The technique is sound. That’s how you do rows and columns. If I wanted a two-column page with two rows of content, I would make this bigger and taller for the whole page. I would make the borders invisible and then place the content inside the boxes.

Student: How wide can you make it?

Professor: That’s a good question. There’s no clear answer to that. One thing you’ll commonly see is a container with a width of a big amount. Let’s say it’s 900 pixels. I won’t give this container a height. I’ll now go into how you most commonly use this technique in a real situation. Now we’ll make this the real size of a page.

I’ll save a copy of this before I start message with it. I’ll leave it alone and make a new example file. I’ll copy and paste the code to create a new file and put it in a new page. I’ll call the new page in a new folder in the Class 2 folder. I’ll call the folder “big layout.”

This is index.html. I’ll make the CSS file and save in that folder.

And make sure I put it in the big layout folder in a subfolder called styles. I’ll drill these concepts in of managing your files. This is main.css. You have that in your folder now. Drag it over.

And load in the browser. I did change something before I saved …. so I’ll make a normal size page using the same technique. The width is 900 pixels which is a normal width large format page. There aren’t standards but 900 pixels a wide but still reasonable sized page. You see in the container I’ll remove the height like I said I would. I generally will not put a height on a container. On a real page you don’t know what text you’ll have or the height. It’ll vary.

Student: Maybe it’s too early for this question. Isn’t the width variable like the height?

Professor: No. Not generally. There are a few different designs that you see on the web. It’s not common to see

Student: Floating?

Professor: Let’s look at a site. You do see it. But let’s see what’s available on the web. Any website.

Student: NY Times.

Professor: It’s important to see how other people do it. This is the Times site. I don’t know the layout but let’s find out. That’s the width. See it’s the same but centered. You can’t see easily can you? Um … that’ not working. Let’s go to a different smaller page for the projector. They use a fixed width centered lay out. The width isn’t changing. You see the content stays the same. It’s probably 900 pixels.

Student: How do you know what browser resolution your viewer is having?
Professor: You have to know your viewer. If you’re expecting people in 3rd world countries to have access to your site you don’t want a lot of graphics. So you design your site with that in mind. In America people have high res monitors. You can go to a 1000 pixels and still be ok. If you design for people with old monitors you want to keep it small. The are no real standards for that. Phone ringing …..

Adjust the width accordingly.

[Phone ringing]

[Class laughing.]

Hope it’s not a credit report. [Joke/joking.]

A really small monitor used 15 years ago was 640 pixels maximum. That’s half the size of this page. You’ll see websites developed in the mid 90’s with that. Let’s have an example?

I just saw one the other day I can’t remember. The UN is notoriously backwards.

Student: They just redesigned it

Professor: Let’s try that one. They have a width. I’m stretching this to my monitor here. This is set to 1500 pixels which is too big. That’s not too bad. They’ve changed the design. This is fixed width maybe 800 pixels wide. It’s staying the same even though I’m dragging it. It’s a centered fixed width. That’s what I’ll teach for this course. You may want a liquid lay out meaning it stretches. You’ll learn that easier after you learn the fixed width.

Let’ focus on the fixed width first then we’ll look at other layouts toward the end of the course.

We were centering the layout. We’ll make it smaller than 900. Let’s make it 700 pixels wide. So I’ll change that for the projector quality. I’ll remove the heading. That actually pushes down the boxes. We want this to take up the whole page now. This is a small change. So now we want this centered. That’s the next step. That’s actually a little tricky. It sounds simple ….

What you’ll do to center something is give the container div a margin setting. Remember the margin is the OUTSIDE spacing. 0 space auto So this is the setting we changed. What this means is this is a short hand property setting. I set all four sides of the margins. The margins for the top, left, right and bottom are one setting. When I say 2 values I say for the top and bottom apply zero and the left and right automatic. It applies as big of a margin as it can to the margin. That’ll give zero margins at the top and bottom and equal margins on left and right. It’ll move so the right and left margins are the same.

That’s how you center. You apply equal margins on both sides. This technique is common. It’s not the most intuitive. You wouldn’t think to center something you apply margins but that’s the way you do it. This will apply for browsers but Internet explorer doesn’t follow that. So you have to do it differently for Internet Explorer. Normally it’ll tell all texts to be centered. INternet explorer also applies that to boxes. So this actually tells Internet Explorer to center the box. I’ll leave a note in there for that.

“Center container div in IE.” That’s a comment in CSS. That’s just for you it won’t effect the code.

Here [On screen.] you leave the comment “center container in FireFox ” Comment just indicating what the two lines do.

So we have the centered relatively wide. Now we want to make boxes inside larger. So I’ll do that by eye and adjust them. So the box will have let’s say …. this is 700 … let’s try math 700 pixels wide divided by minus 10 pixel padding. That’s 700 [thinking] 680 pixels minus 4 times 10 is 640 minus 4 is …. [thinking] 636 divided by 2. What’s that. 636 divided by 2. 318. Let’s try that.

Probably won’t work.

Close. Not right. See the spacing isn’t the same. The one on the right is bigger. But I’ll write the formula out for prosperity. It’s the width of container minus the padding on the container minus [On screen.] the margin on inner boxes minus the order on the inner boxes. That’s the formula for the width of the box. So width of inner boxes = container width minus padding [On screen.]

So in our case the width equals 700 (width of container) minus the padding on the container which is two times. So it’s the padding on each side of the container. So it’s actually 2 times the padding. So 700 – 2 times 10. I’ll post this later. 2 times the margin … on left and right of container.

And minus the border on the left and right. So we have a 1 pixel border. That’s why my math is off. We have 1,2,3,4 pixels. There’s 4 borders on the INNER boxes. That equals … 700 – 20 -20 -4 = 656. That’s the width of the inner area. Now divided that by 2. That’s 328. Is that right?

Let’s try that.

You were close! I think you were right but I missed some calculations.

There it is. I’ll post that formula. I do it by eye not by calculation. It gets confusing to me. But when in a crunch you can do that. Notice how the container div stretched. It follows the outline of the boxes. That’s an important technique. Remember not to set the height for your container. Then you would be limiting the size of your site and you’ll have design issues pop up later. Any questions?

So what we’re doing is working on layout of the pages. This is simple with two rows, two columns. This can be applied to many pages. You can have one big box and use this technique. I’ll do that now and use the same tools. The floating property and clear property of CSS working in tandem to create what we want. I’ll open up Visio. I’ll show you how I would approach different problems of different layouts. I’ll draw some boxes and then we’ll try to code them. Anyone have a layout they prefer? A certain number of columns or rows?

Ok

Student: Variation like in the first line 2 columns and the second line 3-4 columns

Professor: Sure. Ok. So we don’t have to make it perfect. Just keep it simple. Don’t worry about exact spacing.

So let’s say 3.

So let’s not worry about the padding. We have two rows and I’ll throw one more in here for fun which is one big long column.

Just in case you ever find a layout like this, we’ll figure out how to do it. How would you approach this problem? How would you think about this in terms of code? That’s what this is all about. Look at a diagram and decide how to do it in code.

Student: You need 7 boxes.

Professor: Right. There’s one container, outer box. Every site you have has a div that’s the ID container. That’s a given. Then you have seven boxes inside.

Student: There are 6 inside.

Professor: Right. And they’re divided into three rows. So let’s do the HTML. You can do the HTML without worrying about how it looks.

I’ll make a new folder. With every example, I’ll make a new folder for it. I’ll copy and paste the code from the last example. What do we call this example? Think of a term for this layout.

Student: 3 rows.

Professor: Ok. Three_row_layout will be the name of the file. We need a style sheet in a subfolder called styles. So we make a new file, save it as. Make a new folder. Inside the styles folder, save it as main.css. So we have our two necessary files.

I’ve copied and pasted the code from the last example. That’s our starting point of the basic HTML necessary for a page. Now there are 6 boxes inside. So we’ll add two boxes to the existing code. We have 6 boxes inside one big box.

Student: You need to clear boxes.

Professor: That’s a good point. Let’s look. Where do the clears go?

Student: In between the two rows.

Student: After the 2nd one and after the 5th one.

Professor: Every row needs a clear so even after the last row, you need a clear. That’s something very important to remember. It’s not always necessary, but it’s better to get in the habit. It doesn’t get in your way and you’ll avoid later problems if you put a clear after every row.

We need 3 clears. Is that clear to everyone? That’s a critical part of layout is where to put the clears. Anytime you have a new row, after the end of the last row, put a clear. At the end of the second box of the top row, put a clear. It shows up below the row, but it’s like an invisible last column of every row.

So we have the three clears after each row. I messed up the code. [On screen.] So that’s the starting point. That’s our HTML code to start with. It’s now up to the style sheet to put the boxes in the right size. We have the right boxes in the right positions. Now it’s a CSS issue of making them the right shape. Let’s figure that out.

In our CSS, why recreate those from scratch? We’ll copy them from the last example. We’ll have to change them, but we have a starting point from the last example. We have center aligning from the last example. We have the border applied to every div. That’s for us to debug and test our code. We want to see the borders. We have a container that’s 700 width and 10 padding.

We have divs inside the container. And we have the clear. This makes things invisible. You’ll have this for everything.

Let’s upload those to the server so we know where we’re starting. In the browser I’ll load the folder three_row_layout. It’s just like the last sample. Now we adjust it so the second row has three boxes instead of two boxes. Right now we have two boxes on the second row. But the first two boxes at the top are ok.

Let’s think about that. How do I think about that? I want to get three boxes in the second row. Right now they’re all on top of each other. I have to reduce the width.

Student: Have an ID for the first two and an ID for the next three, etc.

Professor: I would make a class for each row. But it’s the same idea. For the first row, we used “box” as generic, I’ll change that to “row1_box.” The second row will be “row2_box.” And the third row will be “row3_box” even though there’s just one box.

Now we’ll apply different styles to different rows. For row1_box, I’ll leave it. So for the CSS, I’ll change the name to row1_box. I’ll give it a smaller height so we can see it better on the screen.

For row2_box, I’ll copy and paste the first box class and change some of the settings. You still have to float it left. That happens with all the boxes. I’ll keep the height the same. But now we have three boxes side by side, so the width has to change. What’s the formula for that? We have 700 pixels width in the container minus 10 pixels padding. 700 minus 10 pixels on each side is 680 minus 10 pixels times 6 is 60 pixels. 680 minus 60 is 620. And then subtract that from six borders. So that’s 614. So 614 should be the width of all of these three boxes combined. Divide that by three is 204.6. Let’s just say 204. You can’t do “point” sizes.

We’ll do the same calculation for row 3. That will have 700 minus —

Student: 778.

Professor: I’ll go through it so everyone sees it. 700 minus 20 pixels for the padding on both sides. That’s 680. 680 minus the margin of the inner box which is 20 pixels. So that’s 660. And then 660 minus 2. That’s 678.

So the width for row 3 is 678. Let’s upload that.

Student: What’s the height?

Professor: I made the height shorter to fit on the screen better. I set it to 128. But this is just for example purposes so you can see it on the screen. Ideally, you wouldn’t set the height. The content just makes the height whatever it needs to be.

We must of made some mistake here. But it’s not too far off. We’ll do the math again. 700 pixels wide. We have minus 10 on each side for the padding. That’s 680. 680 minus 6*10 which is 620. 620 minus 6 is 614. 614 divided by 3 is what we did last time?

Student: 211.

Professor: I don’t know how we got it so wrong last time. There it is. [On screen.] That’s the layout. It wasn’t that much different from our other layout. It’s just different calculations but the same ideas. Do the floating to get the boxes side by side. You have to have the clear div that sits in the code at each end of the row. We know that slides into the spot between the rows that’s invisible.

If we resize the window, our layout stays centered. That’s what most websites do. There are other kinds of layout techniques that behave differently. It could stretch and shrink, but we’ll get to that later.

Student: Is that recent that the web browsers centered things liquidly like that?

Professor: The technology wasn’t there to do it until the last five years, I’d say. So the CSS technology wasn’t as sophisticated as it is today. It didn’t even exist back in early 2000. CSS wasn’t available in all the browsers. So it’s just recently that this is possible. Screens and resolutions have gotten bigger.

Student: I was having trouble centering my things on sites. They said I needed Flash to do that.

Professor: There’s a lot of outdated or bad advice on websites. You have to pick and choose which sites you trust. That’s a huge problem for web builders. It’s difficult to get reliable information. You maybe needed Flash a while ago, but not anymore.

This is the standard way of making a layout. I want to do one more variation before you’re bored to death. We’ll do one column that takes up two rows’ worth of space. So we’ll make a new diagram. We’ll have a different layout which is commonly seen. So you have kind of unequal column heights. It’s the same concept and techniques. We just have to make sure everything’s lined up the right way.

How do you approach this problem? Anyone?

Student: Do a first element ID instead of a class for the long one.

Professor: We would probably have to have an ID. There’s still more stuff to do.

Student: Six boxes all together.

Professor: So one big container with five inner boxes. That’s our first step going through the HTML. We’ll make a new file. We’ll save it in a new folder called “tall_column_layout.” I’ll make a new folder called that. This file will be called index.html, of course. And then I have to make a copy of the style sheet and save that in a subfolder called styles. This is the practice you go through to make a new example.

There we have the same code put into a new folder. [On screen.] Now we’ll adjust the code with the right number of boxes and meaningful classes and IDs attached. So we have 6 boxes total. There’s a container and 5 inner boxes. Let’s make sure we have that in our code. I’ll remove the clear ones for now. So we have 5 boxes.

We’ll remove the class names. We’ll give them different class names in this example. We have the container with 5 inner generic boxes.

So you advised to give an ID to the big one. That’s reasonable. So that’s the first box starting from the top left. That’s how I think about it. The first one from top left is the big long box. We’ll call that “tall_box.” Then we continue to the right. So the top right box we’ll call “top_box.”

Student: Wide_box.

Professor: Do you want to give two classes or two IDs for the two wide boxes?

Student: Class.

Professor: Ok. You can do either one. So we’ll call it “wide_box” as a class and apply it to the top right and the bottom right boxes because they have the same width. What do you call the two middle boxes?

Student: “Middle_box.”

Professor: Ok.

Professor: We have our classes set up. Now we need to go to CSS and have style sheets. We’ll modify them to this design. Let’s get the style sheets named the right thing. The first is the Call box. That’s an ID so we change that to a # not a dot. This is going to apply to width. That’s a class we put on there. And the last one is “little box” which is also a class. Did we make that tall one an ID?

Student: Class

Professor: Let’s change that to class. It doesn’t matter so much. But we know there’s only one call tall box.

Let’s look. Tall, little, little, wide. Ok. Let’s now try to get the widths worked out.

Again, this is arbitrary for the tall. Total is 700. So it’ll take a third?

Student: Two. The one on the left is the same as the two in the middle

Professor: True. That sounds reasonable.

So that’s a nice. So this is 211 and this is 211. So make that 211. And the little boxes are also 211. The height we normally don’t give them but for now we’ll make it 400 pixels. That’s for the tall box. The wide box what’s the width for that? 2 times the small boxes plus the padding we’re missing. That’s 422 plus 40 I think? Plus 20.

Student: 111.

Professor: It’s actually bigger. The wide is bigger. 422

Student: Since we’re making the tall 400 shouldn’t that be the base since it’s all even

Professor: This is the width.

Student: I though you said height.

Professor: The width. The width of this is 422 plus the margins which is 20. So that’s 442. That’s it. Plus the 2 pixels. So that’s 444.

Let’s try this before we get more lost. It’s good to work incrementally. It’s easy to get something wrong. So we’re doing this little by little.

Upload to server and load in browser. That’s not bad. That’s actually good right? Close to what we wanted. This is a good problem. This is the container div. Anyone know why that’s there? There’s something we forgot to do.

Student: Clear boxes.

Professor: Right. This’ll happen if you’re missing the clear divs. This doesn’t make sense why this is there for no reason. Because the boxes are floating they’re set to left and taken out of context of how they are normally displayed. So the browser sees almost nothing although we know the boxes are in the container div. The browser treats it like nothing’s there unless we push it down. Take my word for it you HAVE to use float and clear. So insert a clear div at the bottom.

Upload that to the server. If you remember that rule you’ll be fine. If you try to figure out why you’ll get lost. That’s close [On screen.] So one thing to mention is that we didn’t put clear divs after each row. We didn’t do that. It’s fine to NOT do that. As long as the height and width are the right size it’ll force it. There’s no room here because the container is too narrow so it’ll automatically sit here. If we put a div there (clear) it’s not a problem. But it’s necessary at the end to make the container wrap around the boxes the right way.

That’s pretty much it.

This needs another 25 pixels or something.

Student: 430

Professor: 430? There we go. So that’s … that’s ok. That’s really the trick for every layout. You can modify this to fit different situations. But bear this in mind and you can master layout on the web. I think it’s time for lunch. Perfect timing.

Student: I’m not seeing on your server tall column layout.

Professor: You’re in SCP? Refresh

Student: I did.

Professor: Click the refresh button.
If you can’t find a file it’s because it hasn’t listed. If I create a file since the last time you loaded it it won’t show up. Questions? We’ll reconvene at 1:30.

[Break]

Professor: Is there someone sitting in the corner?

Student: Yeah.

Professor: I’ll wait a few minutes and then we’ll start.

Student: When you said that you can hack the code that appears on the client machine, you can do that with the Firebug, right?

Professor: Yes, you can use Firebug and other tools. You can bypass restrictions. If it’s client-side, use Firebug.

Student: So is that why they set up security measures for certain code?

Professor: If you keep it on the server side, it’s less likely to be hacked into. It’s much more difficult to hack into the server. So if you have a secure site, you want strong security on the server side.

Student: So I can change things around with Firebug?

Professor: Yes.

Student: But that only affects my appearance?

Professor: Yes. I’ll get started. What we’ll do every class will be the same. We’ll lecture in the morning and then you’ll work on the content for the rest of the day.

So we’re taking any of the layouts we’ve seen. Let me pull one up. We’ll figure out how to code it. So it’s like what we did here. But we’ll choose one that’s more difficult.

I recommend that most of you have something in your blog accounts. I’ll pull one up. [On screen.] I’ll pull up a wireframe from yesterday. This is Jeremy’s. For example, you can take this diagram you made and convert it into code. I can’t fit this on the screen.

What we’ve learned so far, you know how to approach this problem. Look at this diagram and start to think about how many boxes you have. How many divs do you need to make? There’s one container div around the whole thing. I would say there’s one div at the top with maybe an image tag inside of it as well as a heading tag.

I would make three column divs. One on the left, one in the middle, and one on the right that represents the high level of columns you have. Inside each column, I would put a bunch of divs in the one column. So we take the general idea of earlier and start to get more granular by filling in the boxes with content of a webpage. So that makes it a little more complicated, but it’s the same technique.

So that’s the assignment. If you created a diagram you think you can approach in code, use your own diagram from the wireframes yesterday. If you feel like your diagram isn’t finished or good enough or too difficult, use the Google Reader to find someone else’s diagram and code that.

This will take several hours to actually do, but this a good start for the rest of the day. Any questions? That’s what we’ll do for the rest of the day. Flag me down if you need assistance.

Professor: A word of advice for the assignment. Don’t start putting in the details right away. Lay out the big boxes first. Don’t worry about the little details yet. Just get the structure right first. In this case, it would be the container div, the top div, the left column div, the middle column div, and the right column div. Do that first. Get that looking sharp. Then you can address the details of the little divs inside the bigger divs, etc. Don’t get caught up in details at first.

Professor: Post your updates to your blogs. Just the link.

Make sure you back up your code on the server so you don’t leave here today without back ups.

That’s this one? Ok. Uh. So these two? So I would give them float left. The same thing you did with these two.

[End of class.] It’s 5 PM. So we have to leave the room. Make sure you save everything.

Let’s get started. My name is [name deleted for privacy]. This is [course name deleted for privacy].

In room 103, down the hall, there is breakfast delivered every morning. You are free to help yourselves. You are not supposed to bring it in here but as far as I’m concerned it’s ok. Hide it if someone comes in.

I want to show you a website we will be using a lot. The class blog. This is where I will be posting information about the class. Assignments, related topics, etc. You will want to read it. You should all go to this website. [blog address deleted for privacy]. Open that up in your web browser.

I’m going to assume you know nothing about Internet, but I hope you do. When I say web browser, I’m talking about Firefox which is on all of these computers. It’s a web browser that allows you to browse files on the Internet. You can open up the start menu to find it.

On the bottom there is an icon with an orange dot, that’s the Firefox icon. I will assume you know when I say web browser that I’m talking about Firefox or Internet Explorer. We will be using Firefox in this class.

Go to the blog means to put this in the browser up top and click the green arrow.

In the first section you will see there is a post. There’s a blog that I have written with basic information about the class. It has a link to the syllabus.

Is this projector difficult to read in the back of the room? I’m not sure what I can do about that. Is that better?

Please open up the syllabus for the class. I will run through some basics. Click the link. I’m going to run through the structure of the class. You can read this all here. I’m not going to read it for you, I will just highlight a few things.

This is a web building class. We meet Monday through Friday for two weeks, eight hours a day. We break from 12:30 to 1:30 for lunch.

The required text, there are none. We will be using on line materials. I don’t expect you to read at home. I’m not really assigning homework. We will use on line texts. These are recommended texts in case you need a book. I can’t vouch for them because I don’t read them, but they have been recommended to me. There are plenty of on line sources that are capable of helping you.

We will use a server called [server address deleted for privacy]. Practicing on this server will acclimate you.

We will break up grades in thirds. Quizzes are one third. Quizzes every morning on the concepts of the day before. They are meant to remind you about the topics from the day before.

There will be in class assignments. In the morning I will lecture you. The afternoon we will work on projects. I have to lecture to get the information out but it’s up to you to practice this. The idea is to do coding for half the day.

There will be final projects. They will be limited. I will ask you to start working on projects in the second week based on information from the first week. This is a very compressed version of the longer course. I don’t expect as much in depth work in the final project as I normally do.

Please ask questions of me and stop me or slow me down if I’m going to fast or you don’t understand something. If there is one person who doesn’t understand something there are many. Slow me down or stop me if you need further explanations.

We will all have blogs. You will be required to start a blog. This is not a sadistic tendency. This is to keep in touch about homework and keeping in touch individually. I can easily see how you are doing in this class.

I have this blog to communicate to you.

I won’t go through each class, but there’s an outline of each class and what we will cover. We will probably compress class one and two today.

Let’s go back to the blog. There is information about the process of web development.

First I want to go through an attendance list. Just raise your hand and say what you are hoping to learn in this class. What your background is with technology. A blurb about what you are hoping to learn.

Catherine?

Female Student: I work in publishing. I’m looking to see if I could have a different career path. I’m exploring options.

Teacher: Chong.

Female Student: I’m from a merchandising background. I’m looking to learn basics.

Teacher: Heidi.

Female Student: I worked in publishing. I got laid off in February. I’ve been programming for a decade but haven’t done web development. I want to shift my career path.

Female Student: I’m in the law school. I do content for a web site of one of the institutes and I want to see the background to understand more.

Male Student: I do Flash programming back in 2000 or 2001. I want to get back into it.

Teacher: Can you tell us about Flash? We’re not covering it here.

Male Student: I’m working at WNYC producing stories for their website. I need the technical skills.

Teacher: So you need this for your job?

Male Student: Yes.

Teacher: Jeremy.

So you know some of the HTML and things like that?

I’m going to teach an iPhone application course in 2010.

Those of you with background in HTML we will cover some of that. The first day or two will be slow for you. After that we will move quickly.

Mark?

Jenna?

Female Student: I have a communications degree. I want to further my interest.

Teacher: I can’t hear you.

Female Student: I did some electronics communications. I want to further my interest.

Teacher: James?

Male Student: I’ve been in programming for years, but more on the database side. I want to bring web development in.

Male Student: No background in Internet at all. I did one HTML class. I’m an airline pilot. I want to see what’s possible and see what opportunities are available.

Teacher: Patrick?

Male Student: I’m from California. I worked on a literacy project. We have text to speech technology. I want to set up a website to display my art and music.

Teacher: David?

Male Student: I’m from Manhattan. My last job had a web based program used for data gathering but no one in the company knew how to use it. I realized there that if I had more knowledge of the web and web design I could have streamlined more data.

Teacher: Are you in the web development class?

Male Student: Yes I am. Sorry that I’m late.

Teacher: Is there a computer free?

Female Student: No chairs.

Teacher: Can you look for some? Do you mind?

Male Student: I’m new here at NYU. I’m working on my business project website.

Teacher: Carrie Ann.

Female Student: I’m in sales and merchandising right now.

Teacher: We are not covering graphic design so much in this class. It’s a web development class. Given the time we can’t get into design so much.

Samantha.

Female Student: I want to learn to publish stories via website.

Teacher: Raise your hand if you know beginning HTML? Today we will cover everything from scratch. This is the only day we are going into the basics. From here on out we will move quickly.

Let me make sure he has a chair. I will be right back. Read the syllabus while I’m out.

Professor: Is that not plugged in?

Student: There’s no adapter for it.

Professor: I’ll just come around there. This isn’t part of my job description. [Joke/joking.] We usually have a tech guy here. So we’re having technical problems. I’ll go find someone in the building and be right back. Someone will come down and solve your computer problem. I’ll keep going with the class. You won’t really need the computer until later.

I’m running through a presentation as an overview of web development. I’ll explain the things we won’t focus on so much, too.

Here is my very rough outline of basic web development technologies. This isn’t everything but it’s the popular ones. XHTML, dHTML, JavaScript, etc., we’ll go through. I’ll post this on the blog after class so you have access to this list.

We have the problem in the corner back there.

First, I want to make sure everyone understands the Internet is composed of clients and servers. I’ll explain what that means.

A client is one of these computers in the room. Any computer that connects to the Internet is a client. Any computer with a web browser or a phone with a browser, etc., anything on the Internet is considered what I call a client. It’s the technology that connects to the Internet and retrieves data.

The server is a computer somewhere like Google. Their server is probably in Texas or California. Those are what I call the servers. Let’s say I’m surfing google.com. I send out a request and the server at Google sends back the information. So the client requests data. The server responds with the data. Does that make sense?

Clients and servers are both computers. When I check my email I’m requesting data from the email server. I want all the emails on the server to be put into my computer. There are web servers, email servers, database servers, etc. We’re focusing on web servers in this class. This becomes clearer as we go along.

Web development technologies are divided into technologies that run on client computers as well as server computers. Technologies that run on the client behave differently from the server. Any technology that runs and is processed on these computers is different from the processing on the server computers. We’ll code both kinds.

This is a short list of the client side technologies. [On screen.] And this is a server list. [On screen.] We’ll go through these.

You may have heard of these terms like ASP.net, etc. I’m trying to dispel any misconceptions about what they are and what they do.

The first client-side technology we focus on is XHTML. That’s the basic of any website. XHTML stands for [loud noise.] There’s another class up above. XHTML is extensible hypertext markup language. HTML is the same as XHTML. It’s just the current version.

Hypertext is the term used for linkages between documents. Hypertext markup language is what you use to link different documents. Hypertext is the technical term for a link. And the web is just interlinked documents.

We create these documents by using tags. Tags are bits of texts that indicate links or images, etc. Any content you see on the web has a tag that indicates that content should be on the webpage.

Look at the screen. The heading versus the body paragraph look different because of codes that indicates how they look.

You may have heard of XML. XHTML is a type of XML. I won’t go into that right now. HTML is primitive. There are a lot of things you can’t do. It’s not really a solution for all of the problems of web development. It’s meant to divide your content by concept. It allows you to say something is a heading or a paragraph, etc. It doesn’t talk about color and things like that. It’s just the structure of what is what on the page versus how it looks.

Different web browsers display HTML in different ways. Web browsers are not consistent. There are major differences in how things are displayed. That’s why web developers are employed. HTML is a buggy technology that requires a human brain to solve these tricky problems.

However, you can create websites without knowing any of this. I assume many of you have done this. You could use Dream Weaver that allows you to draw without any code. Has anyone used that program? It’s a way of coding without understanding how websites are really built. Most professionals will tell you that software is a piece of junk. It doesn’t let you easily create sites that are easy to maintain and update. It creates such bad code, that a developer that has to modify these sites, has to start from scratch. We’re definitely not using Dream Weaver in this course.

Stop me if you have questions. I’m flying through this because that’s the nature of the course.

Student: Will we have access to your presentation?

Professor: I’ll post it on my blog. I can post it right now if you want to look at it right now.

Take down this web address for my blog. We’ll be using this blog throughout the class. So you’ll want to refer to it. [On screen.] That’s the main tool I’ll use to describe things to you. [blog address deleted for privacy]. Any other questions so far?

Student: Elaborate why DreamWeaver sucks. I’ve been using it.

Professor: Why did it suck for you?

Student: I put something into it. But when I put it on the net, it didn’t look like it did on DreamWeaver.

Professor: That’s true. That’s true of your own coding, too. The code is not well written for DreamWeaver. You have to see it to understand. You’ll write code that works fine on one browser but not on another browser. Or you’ll try to change positions which throws off position of other things on your page.

The next technology is dHTML. That’s dynamic HTML. It’s not a technology. It’s a marketing term. It’s a combination of three technologies which are XHTML, JavaScript and CSS. It’s the convergence of those three things which are the core client-side technologies on the web. We’ll be discussing these. When they all work together, that’s dynamic HTML.

Maybe you’ve heard AJAX. This is a valid term for technology. It’s used in common conversation to dynamic HTML. It’s things that happen when you combine all of these technologies. I’ll show some examples but we’ll go into it later.

The next one is JavaScript. This has nothing to do with Java. It’s a marketing term to make it sound exciting and attractive. Java used to be exciting and attractive so we’re stuck with that name. It’s based on C. All C-type languages look similar. Java and JavaScript have similarities. But any C language is similar to any other C language.

JavaScript is used to interact with the user a lot. If I click something on a page, I’ll find an example. See how those lists pop up when I move my mouse? Anything that responds to an action is using JavaScript to trigger those events. Any interaction you experience is JavaScript. HTML is a static language. Nothing happens when you mouse over it. But JavaScript does that interaction.

JavaScript can respond to actions of the users. That’s the most important thing that JavaScript does. When you click something or mouse over something or type something or close a page, unload a page, etc., these are all detected by JavaScript and the page behaves in different ways accordingly.

Everything I’ve covered so far work on the client side. So they run on the computers here in the class or your phone, etc. These don’t run on the server. That’s an important distinction.

JavaScript can move XHTML elements around the page. Look at this image on the screen. XHTML is anything you SEE on the page. Any interaction with the elements like something showing up is being triggered by JavaScript. But what you see after JavaScript is triggered is an XHTML code. But it showed up because of JavaScript.

So when I first loaded, everything you saw is XHTML. When I mouse over, JavaScript is called into play that shows a piece of XHTML that wasn’t there before. That’s a differentiation between the two. When you see something, it’s probably XHTML. When something changes because of an action you take, it’s probably JavaScript.

Any questions?

The next technology is CSS. It’s client-side technology that runs on these computers. CSS stands for cascading style sheets. [On screen.] The term is a very specific term. It’s design templates that you layer on top of each other.

Student: Can I close the door?

Professor: Yes. Let me know if I have to speak up.

Everything you see here is in XHTML code. The actual fonts used for links and the colors and placement of the image is from CSS code. The XHTML code just says there’s a logo, a link and another link, it doesn’t say what they should look like. It’s the job of CSS to apply templates to indicate that links should be blue and the heading should be big, etc. Those things that indicate what each thing should look like are written in CSS code.

Is that clear?

Anything to do with design or style is usually involving CSS. Some of you who have programmed previously may have used HTML to do those things. That’s incorrect these days. They should be separated today. CSS is soley responsible for how content should appear.

Flash is very important technology that we are not covering in this class. It is used for animation mostly. If you go to any big website you will see flash somewhere. That’s flash [On overhead.] See how the animation is changing? If you right click on anything on the page this is Flash it will say about Flash player at the bottom.

If I right click on another image it doesn’t show. That’s not Flash. When you see an animation it’s probably Flash.

Flash is used for banner ads, advertisements, etc. Anything that requires sophisticated animation. Since we are not a class about creating banner ads or games this isn’t something we cover. This is something that’s important for web development, but we are not covering it in this class.

Flash can do some of the same things as JavaScript. It can interact with you. It combines some of the end results you will see in the stuff we are doing in this class.

Flash is very popular for designers and animators because it has smooth, graphic capabilities. Flash became popular because there was a problem in the web world in the early 2000s that all the browsers displayed things different.

If you code something for FireFox it will look different from another web browser like Safari or Internet Explorer. That was far worse a problem when the web was new. Flash came around to display things in the same way on all browsers. Flash is an independent application. It has its own control of how it looks.

Flash bypassed the problems that HTML and CSS had. It’s becoming less necessary to do that kind of thing.

Male Student: I would have to download that player to my computer?

Teacher: Yes. It’s a separate application.

Male Student: That’s not true with the other things we are talking about?

Teacher: These are all client side. They all display on the computers. They are not pre-processed. We need the software to run HTML, Flash, Java, etc. It happens that the web browser we use reads that software. Flash is not necessarily built in.

Male Student: I know a web designer who makes entire websites on Flash. Is there a trend towards that?

Teacher: There’s a trend away from that. If you want your page listed high up in the Google results it’s harder to get that done if your sight is a Flash site. It’s hard for Google’s robots because there is no text code. XHTML, for example, a robot can analyze the code for the page and know this page is about resignation. It’s easier for Google to discover the page. Flash isn’t written in binary code. It’s almost impossible for the robot to analyze.

Flash will always look and act the same on all web browsers. This is why it’s popular with designers. Designers want everything to look the same. They don’t want to code five different versions of their site. A designer may adopt Flash because it allows for one version. It’s generally frowned upon.

The last bit is Java Applets. Applets are like Flash animations. It does animation and other things like Flash. It does complicated design patterns. You don’t see it often on the web.

Java used to be an up and coming cool program. They have kind of been left in the dust by other technology that provide easier ways for programming. Java is looking old. We don’t focus on it at all. You see it very rarely these days. A lot of scientists know Java from back in the day they use it, but it’s not so much used in the design world.

On the server side, and by this I mean on a computer somewhere else. ASP is Microsoft server side programming language. It only runs on their servers. Those servers and Microsoft technology in general is expensive for smaller companies.

An advantage of having Microsoft is that the technology fits together. People before us figured out ways to get things to work together. There’s a smoother process. You don’t have compatibility issues because they are made by the same people.

They have a nice graphical user interface. You don’t have to write as much code. There are some advantages. We are not focusing on it because it’s very expensive.

We will learn PHP, which is very simple. This is hypertext pre-processor. It is like ASP but it runs on many different servers and supports many different kinds of databases. It’s a more flexible tool for the average person to learn. You will learn the same concepts and tricks as ASP but it’s a different language.

The reason we are using it is because it’s free. It supports any database. It’s a more flexible learning tool. It’s more commonly used with mySQL databases. It doesn’t have nice graphical interface tools.

ASP has the funds. PHP does not have the budget or inclination to go into as much development.

Database we will be using is mySQL. It’s a small database server. It is quite good. It can go up to a very large scale site with many visitors. It’s a very reliable technology.

Like PHP we are using it because it files on many platforms. It easily connects to PHP, which is what we are using to write our logic. It’s very popular. It’s a great tool. It’s widely used and perfect for our class.

PHP combined with mySQL make the core of server side application for a large number of websites. ASP and SQL are more common with large corporations. Enterprise level systems may use these technologies.

The last is JSP. These are equivalent technology. Java on the server is usually written in JSP. It does the same thing as ASP and PHP. There’s not much else to say about it.

These are what we are learning. XHTML, CSS, JavaScript, mySQL and PHP. When we run the first three we will run it on these computers here. It doesn’t run on the server. The last two only run on the server. You will never test them on the computers here. You may see the final code here, but they won’t process the final two.

There is a fundamental difference between the first three and last two.

This is my recap of each part.

XHTML creates the structure. The semantic structure. What’s a heading? What’s a paragraph? What’s an image? What text do I show on the page? The meaning.

CSS takes the code and puts on layers of design. Headings should be blue. Paragraphs should be 12 point font. Etc. The visual aspects.

JavaScript adds the interactive behaviors so when you click something something else pops up. Something you do on the page is written in JavaScript.

MySQL is used to store the data on any page. They don’t recreate this page every five minutes, the content is stored and the latest information is pulled.

Male Student: Sometimes the lead article on the left is longer than it is now. Don’t they reprogram it?

Teacher: I’ll bet you that it’s very unlikely they recode anything on this page. I’m sure it happens once in a while when something goes wrong, but they probably have different templates for the page. I think they just decide which template to use. They are not going in a recoding. It would be too time consuming. The data is coming from a database. Each article is entered into a database, it’s not entered into the page. The person who writes it stores it in a database.

We will get into the relationship between databases and sites in the second week of the course. We’ll focus on how to make things where we want them and then we’ll worry about the databases.

PHP creates templates. So the New York Times has five different versions, those are templates using PHP. The rules that a site uses is PHP. The page asks the PHP server for the information. The server responds with the PHP articles. PHP is the brains of a sophisticated web operation. We’ll discuss it more later. It probably won’t make sense right now until we go into further detail.

We usually take a ten-minute break at 10:30. So that’s in a half hour. Let me upload my presentation to the blog now that you’ve had a chance to look at the blog. You can mull it over at your leisure.

This is my blog interface. Who’s familiar with blogs? Who isn’t familiar with blogs? We’ll all be setting up a blog. That’s required. I’ll show you my blog and then we’ll go through and install your own.

I’m going to create a new post with my presentation information. There’s a log-in button down here. [On screen.] This is my interface for managing my blog. The New York Times probably uses the same thing for managing theirs. I’m adding a post. I’m running through this in case you’ve never seen any of this before.

So I’ll enter Class 1. Here’s a place I can write something for you to see. [On screen.] Now I’ll attach my document. I’m not writing any code. I can do things on the Web without writing code. I’ll attach the document. Do you want a PDF or PowerPoint? We’ll do PDF since you can probably all use PDFs.

Now I’ve linked up my presentation to the blog post. I click “publish.” When you go to my website, you should see that post. Make sure you reload the site. This is an easy tool to add information onto your blog pages. If you have any issues, I want to keep blogs to keep track of everyone and your understanding of the materials. This is a way to aggregate our performance together and help each other out, give advice, etc. It’s a powerful tool.

Now I want everyone to install blogs. You have the PowerPoint presentation up on my blog if you want to look at it.

So everyone go to blogger.com. Who’s not familiar with tabs in a Web browser? I’ll go through it anyway. See how I have two sites open on the same browser? It allows us to navigate as many sites as we want in one interface.

So open a new tab in blogger.com. Go to File, New tab. That pops open a second tab. One tab is blank. You can switch between the two by clicking on the headings. Open up a new tab and go to blogger.com.

This is the software we’ll use to create blogs. Is anyone familiar with this already? If you have a Blogger account, create another one for this class so it doesn’t mix with your personal stuff. You’re not required to submit personal information. So if you don’t want to be identified as a blogger, feel free to use data that doesn’t reflect your personal information.

Come up with a username and password. Sign up by clicking “create a blog.” You have to create a Google account to do this.

Student: Can I use my own Google account?

Professor: Sure. If you don’t want to do that, create a new Google account. So everyone create an account. I’m using a fake email address which you can always do if you want. Something@mailinator.com you can always use as a fake email address. Often companies like Google and Microsoft are selling your email data and personal information. They’re in the business of selling that information.

So I often use a fake username and password to access these sites. It’s not really “fake.” I can go to a website called Mailinator.com. It’s a useful site. [On screen.] You can create an email address that’s not your personal email. These should all be posted in the online syllabus.

At mailinator.com, there’s nothing private about it. Anyone can access any email addresses on here. There are an infinite number of email addresses. I can check for my name. No messages for me. I don’t use my name on this site. If I search for “Bob,” there’s probably a fake email address for this. It’s a shared mail resource. So I can use bob@mailinator.com. Any email sent to that address will show up in this space of mailinator.com.

When I create a Blogger account, my email address doesn’t exist. I’ve never used it before. So I’m entering that address at mailinator.com. Then I’ll check that at mailinator.com when they send me the verification email. You should all do this with your own email accounts.

I already have a blog so I don’t actually need to create a new one. Once you filled out the forms, click the “continue” button. Feel free to use fake email addresses or your real one.

On this screen you choose the title of your blog and the URL, which is your address of your blog. It has to be something at blogspot.com. Check to make sure the name is available. Once that’s sorted out, click the “continue” button.

Is everyone at this step? If you need more time, let me know. Now I’ll continue.

They have a couple different templates to choose. Pick one that you like. Click on the one you like. Click “continue.” Now your blog has been created. Click on “start blog.” You can make a first post once you’re through the process. Create a new post.

A post is anything with a title and a description. I’ll enter Post #1. Create something there just to see how it works. Then click “publish.” Once you’ve published, you can visit your blog by clicking “view blog.” Your blog looks something like this. [On screen.] That’s an easy way to create a website. Notice your address at the top is whatever you entered into the URL box.

I’ll check my mailinator address. I enter the name I used to sign up with Google. They sent me a verification email. This service allows me to do that without submitting my real email address. I click that link and it thinks I used a real email addresses. It’s a very handy service.

How many people used mailinator? If you did use that fake email address, it’s easy to forget your email address. Since you’re logging into Blogger a lot, write down the email address and password that you used for this Blogger account.

We should all have email addresses set up now. Has anyone not done that? It’s not a problem, just let me know.

Now I’ll ask you to go to my blog. Keep your blog open in a tab. This is an advantage of tabbing because you can keep several sites open at the same time. My latest post is Class 1 – Web Technologies Presentation. Click the “comments” link. Give me the address of the blog you just created. Copy the address of your blog and post it to my blog so I have a list of everyone’s blogs. You do this by leaving a comment to my post. I’ll use these links to your blogs to keep in touch.

As I refresh this, I should have 16 different blogs. Does anyone need help?

Student: Use the blog URL on the website?

Professor: Yes. If I go to anyone’s blog, up in the window at top is the blog URL. It’s an address. URL and address are synonymous. That’s what I need in the comment section of my blog. Put your name with it so I know whose blog is whose.

After we collect all of these, we’ll use Google Reader that allows us to watch each other’s blogs without checking 16 different blogs every five minutes. This Reader collects the data for us.

Student: I put it in a website. Is that ok? It’s not showing up in the comment. There was a website section.

Professor: You’re Davd?

Student: Yes.

Professor: Your name links to your website. That’s fine.

Student: How long should I wait before I try to re-post? It’s slow.

Professor: Oh, really? We all have the same IP addresses. That’s a networking aspect of the Internet. These computers are all connected to the same wire. So Google is seeing the same number for all of these posts. Just give it a minute or two. It’ll free up. We have nine so far.

While that’s digesting, we can go to google.com/reader. This is the software we’ll use to bring together everyone else’s blogs into one place. Now you don’t have to go to 16 different sites. It’s a Google product that lets you stay in touch with blogs all at the same time. It automatically pulls the data from every blog you enter and put it into one space.

I just want to make sure everyone’s blogs are listed on my site first. We have three more to go. There are 16 people in this class.

We’ll go through one by one of these links. We’ll copy and paste them into Google Reader. If you’re finished with posting, start setting up Google Reader. Go to google.com/reader. Go to subscriptions. At the bottom of the page on the left is “manage subscriptions.” Click that link.

Here is where you decide which blogs you are signing up. Sorry. I brought you to the wrong place. Google.com/reader. Click add subscription. You copy and paste each blog on my blog. They will be entered to your Google reader account. I copy one at a time, each link. I go to Google reader and paste it in the add subscription box. Then click add.

Go through the whole list. At the end you should have 16 blogs in your Google Reader. Actually, there are 17. This is a little tedious, but once we set it up once we won’t have to do it again.

For David Thomas the link is not listed, but you can right click his name and click copy link. It’s the same thing.

Male Student: Scott’s link isn’t working.

Teacher: Let me take a look in a second.

Did you copy his link? Is this the one you are having a problem with? Click his link. Copy it. Paste and put http:// in front of it. It should work. It worked for me fine. Is anyone else having that problem? It looks like it’s working.

Don’t forget to put my blog in. Copy it the same way from the top of the page. Enter [blog address deleted for privacy address deleted for privacy] as my blog.

At the end you should have 17 subscriptions. Is that right?

I think you should have 18. There are sixteen people in the room, 17 comments on the blog and then mine. So there are sixteen blogs, including mine that is 17.

When you think you are done go down to the bottom left of the page and click on manage subscriptions. That should show you how many blogs you are signed up for.

Raise your hand if you are still going. Take your time.

Once we are done and have these set up, each of you can go to google.com reader and see the latest blog everyone has put up.

It’s not showing up?

If you don’t have any new posts, your blog hasn’t had any posts yet.

Raise your hand if you are still going. Ok. Let me know when you are done.

It’s important to remember your Google user name and password. Write it down somewhere so you don’t lose it.

For those of you who are done, we are going to use a text editor called note pad plus plus. You can Google search in the text box. Search for Note Pad ++. The first link is the software we are going to install on these computers.

Click the link. Click the download tab at the top. There is a binary file. There’s a link below. That’s what we want to do. The link with NPP5.44 installer. That’s what we want. It will install the software on our computers.

It says your download will start shortly. Save that file.

We are going to do a lot of downloading and uploading in this class. If you are not familiar with this stuff you will have to get familiar.

Female Student: Which link under all files?

Teacher: The first one. NPP5.44 installer.

Some of it has the version for Mac, etc.

Female Student: Run it or save it?

Teacher: Save it.

Male Student: It said the download is empty.

Male Student: It’s on my desktop.

Teacher: I can’t show the desktop on this screen for some reason. Go to your desktop and I can’t show you how to get there. A button near the start button. The first button to the right. It’s the shortcut to access your desktop.

Another way to go is to click start, click my documents. This box will show up.

Male Student: We can’t access my documents from start.

Teacher: Is everyone having that problem? Instead of clicking my documents click on my computer. Now you should be able to get to the desktop by going to the window that pops up, and click the drop down. At the top is desktop. Click that. The file you downloaded should be on the desktop. This is the file manager for Windows. It shows you the files you have on the computer.

Somewhere there should be the NPP5.44 installer file. Double click it. Go through the installation. Click OK. You don’t have to change any settings.

When you finish it should run Notepad++. Windows comes with Notepad, which is a piece of junk. This is the same idea, but much better. It allows you to edit text files easily. It highlights texts. It understands HTML code and things like that.

Don’t use Notepad as a developer. It adds weird characters where you don’t want them. It doesn’t do any basic functions.

On a Mac BBedit is the standard software. I use Text Wrangler also. I think I have those on the syllabus as well.

If they are not there I will post them for you.

You can do this at home, the same thing we just did. It’s free software. It’s the best text editor for Windows. All of these things we are doing on the computer you can do at home to keep in touch. You have the same access to the software at home.

We are going to install a piece of software to allow us to transfer files from client to server. It’s called winSCP. Google it. We are going to run through the installation of that also. It’s a free file transfer client. When we create files we create them on the client, on these computers here. To run it on the web we need to run it on the server. We need to get the file from our computer here to our class’s web server. WinSCP is the best program available for a PC.

Download and install that like you did for the Notepad++. You can use the beta, which is not yet final, or the second latest version. Beta is not yet fully tested. Beta software is just not yet fully functional. So install 4.1.9. Install the package. Save it. Go to your desktop and run it. The window that pops up shows there aren’t downloads, but you can click “desktop” to access your desktop. Run and install the file. Click through the whole process.

Don’t restart your computer if it asks you that. You don’t need to do that right now.

For the Mac, there’s an equivalent software called cyberduck. It’s a different company but the same idea.

Does everyone have it installed? Raise your hand if you’re still working on it. Ok.

We can close the tabs for Notepad++ and WinSCP once you’ve installed the software. Now let’s transfer some files and get comfortable with all of this. There are a couple things we’ll install, but these are critical. A text editor and file transfer program are very important.

We’ll run WinSCP. I’ll just close down is stuff. In your desktop there should be a shortcut to WinSCP. Or you can go to your Start menu and click “all programs,” and you’ll see WinSCP listed in there. I can’t show that part of my computer screen for some reason. There should be a WinSCP icon that you can run the software. So click the shortcut or go to the Start menu.

The program will pop a window open like this. [On screen.] Quick access to your desktop you can click the Start menu and “my computer” and then click the desktop icon. I’ll be going through this quickly, so stop me if you have problems. Don’t feel afraid to ask me to repeat steps. Once we’re finished with the class, you should know how to get to your desktop, save things, access things. This is an important part of computer literacy.

On the desktop you have a shortcut to WinSCP or go to the Start menu and find it in the list and run it. Then you’ll have a window that looks like what is on the screen. Everyone ready?

Type [server address deleted for privacy]. Don’t use “wd.” Just type in [server address deleted for privacy]. “wd” is just for the blog. Username is [username deleted for security]. Password is “[password deleted for security]” I’ll write that on the screen. [On screen.]

Those are what you’ll need to connect to the web server. So your computers are the clients. The websites live on the server somewhere. That’s where you’ll put all your files. When you’ve edited your files, you transfer them to the server. So you access the server using the username and password. Write this information down so you always have this information.

Once you’ve entered all the information into WinSCP, make sure the file protocol is SHTTP which is secured transfer. That way people can’t intercept our info. Secured transfer makes it more difficult for people to hack into our server. Not all servers support secured transfers, so your own personal server may not be able to access it. Make sure you have the right setting.

Click “login.” That should bring us into the server.

Click “yes.” That’s fine. This is a shared server. So your computer thinks there might be a security issue, but it’s all ok. Just click “Yes.” Does everyone have left and right panes like this on the screen? There are different ways this can be configured.

Student: Mine says “searching for host.”

Professor: That means there was a problem with WinSCP. The host name was probably incorrect. Make sure you’re entering in the data as “[server address deleted for privacy].” Make sure you have the spelling correct for all the information you need to enter.

What this screen shows us is our client machine on the left and all the files on our server on the right. There’s a split pane view. This is how we analyze whether we’ve uploaded or downloaded a file. We can drag something from the server to the client or the client to the server.

Is yours working?

Student: No.

Professor: I’ll come back there. It might just be your computer.

When we drag something from the left to the right — don’t do it right now. I can drag this file over here. When I let go, it copies the file from the client to the server. That’s uploading. Uploading is copying something from the client to the server.

Downloading is when you get something from the server and drag it to the client. When you hear about uploading and downloading, that’s just sending something from the client to the server or receiving something from the server to the client. That’s just what the terms mean. Uploading is to the right. Downloading is to the left.

Double-click to [server address deleted for privacy]. That brings up a list of names. They’re former students. I want you to create folders just like this with your name. Use your first and last name as one word, lower case, no special characters.

Make sure you are clicked somewhere on the right side of the panel. Make sure you’re creating a folder on the server side, not on the client side. Make sure you have clicked somewhere in the right panel. Then go to “files, new, director.” It asks for the folder name. Type your first and last name with no spaces, all lower case.

You should then see your name listed on the right. If you don’t see your name, something went wrong. All the files I’m creating will be in my folder. Whenever you have a question of something your code doesn’t match something I did, you can always go into my folder and grab the original copy. Just don’t modify my copy in my folder. We can access everyone’s files, so there’s a risk of overwriting the files. Try to avoid that.

You can see the files I’ve created over the last two semesters. If you want to see where we’re going, we’ll follow the same basic track as last semester even though we have fewer courses. I will be putting all the files for this course in my folder called Summer 2009.

Now I want you to create your own folder. Within that folder, create a subfolder called Class 1. Click to get into your folder. Go to “files, new folder.” Create a new folder called Class 1. At the end you should have something that looks like this. [On screen.]

Once you’ve done that on the client side (the left side), go to your desktop. You can click C:local disk at the top. Desktop is an option there. Go to your desktop. Make a folder on the left side with the same thing. Use your first and last name, all lower case, no spaces. Have the same folder on the client side AND the server side.

Student: Mine doesn’t show the desktop. It’s stuck on “computer lab documents.”

Professor: Can you get to “my documents”?

Student: It says “computer lab documents.”

Professor: Can you make a new folder? So just make a folder. It doesn’t matter where the files live as long as we know where they are. The name of the folder should be the same as the one you made on the server side. We’re making two identical copies of our files. You want one folder on the client side and one on the server side. We want to reduce the number of things to think about. If we have identical files on both sides, it’ll be easy for us to see which files are on server and which are on client. You could name them differently, but that’s just more complicated.

Student: Why “new directory” versus “new file”?

Professor: Other people use these computers throughout the week, and they could easily overwrite your files. So I do that to keep everything separate. It’s a sanity thing. Just make sure one project isn’t mixed with another project. If you want to look at a file we made tomorrow, you’ll know where to look for it. Inside of the folder you created on the client side, make a Class 1 subfolder just like you did on the server side.

There’ll be the master folder with your first and last name. And in that file, you’ll have the subfolder with Class 1. Once you have that, double-click to get inside the Class 1 folder. My folder has lots of stuff, but yours should be blank. Then make another subfolder called HTMLframe. Have the same named folder on the server, too

Student: htmlframe?

Professor: Yes. Never have capital letters or spaces in your file names. There are three operating systems people deal with on the Web. Most people have Windows or PC versus Macs. Designers usually have Macs. Certain people have Unix machines. So there are three competing operation systems. To keep things consistent, we have to have a standardized way of naming the files. So the easiest way to do that is don’t use any spaces in your file names. You might have problems if you don’t follow this rule.

Inside the HTMLframe folder we are going to create a file. Finally.

Male Student: I got lost. HTMLframe is within class one?

Teacher: Top level is your name. Then class one. Then HTMLframe.

Inside htmlframe we are going to make a file and call it index.html.

Let’s go to Notepad++. The text editor we downloaded. Go to the all programs list. It should be at the bottom right. Run that. It should look like this [On overhead.] Let me know if you have problems getting to this.

Is that difficult to read in the back?

Let’s start with copying exactly from here to here [On overhead.] Ignore the first two lines. Once we do that we will add the top two lines.

This space, the indent, is a tab. It’s handy to use. Indent everything the way that I have. I will be particular about this throughout the course. You have to indent the code the correct way.

Start on line three. Ignore the first two lines. Start on line three. Copy exactly what’s here.

Male Student: Where did you find that?

Teacher: You are creating a new file. You are starting a blank document and write this. I will normally give you copies of my files first. I want you to do this once to get in the habit and get the feel for how to write this. It has to be exactly like this. You have to start being very particular. If you are not particular about grammar and punctuation you are going to have trouble coding. You need the exact characters. This code is not very difficult. There is not a lot here.

Notice that there are matching sets of tags. Remember XHTML is written using tags. That’s what they look like. There’s an html here and a slash html here. Every tag that has the word also has it somewhere else with a slash. There’s the opening html and the closing html. There’s an opening and closing for each thing. Recognize that that’s a fact and make sure everything you have that opens has a matching closing. There are some exceptions to that rule, but for now follow it.

Once you are done with those start typing in these two lines also. They are a little more complicated.

You will only have to do this once. After that we will just copy and paste.

I will scroll over once everyone has that section.

Has everyone got this bottom section? Raise your hand if you still need it.

I’m going to break the second line up onto a second line so you can copy it. It should all be on one line though. It’s ok to have it on multiple lines, as long as you don’t break any quotes. The beginning quote and end quote should all be on the same line.

Also notice that there’s no closing tag for the doctype. These are two special lines that are kind of separate from everything else.

Female Student: Is there a space between quotes?

Teacher: Yes. You can leave a line break in there. That’s fine.

What we are copying here is the basic outline of an HTML document. This will run in a browser and show some text. This is the bare minimum necessary to create something. We are going to see what this looks like in the browser in a second. You are going to want to save this in the folder we created called htmlframe. When we create a new HTML document this is tedious to write. You will get in the habit of copying and pasting it. This is the outline for a basic webpage. You may want to change some text, but the rest is the minimum necessary.

I will give you another minute to copy this, then we will test it out.

This is fine like this. Note that line breaks are not important in HTML code. You can put as many line breaks as you want. It will work the same way.

Female Student: What do we name this file?

Teacher: Index.html. Go to file, save as. Make sure it’s in the correct folder. It’s critical. Call it index.html.

All of our HTML files will have . html at the end of it. You may not see the dot but it’s always there behind the scenes. That makes sure it works the same way on all the operating systems. Remember to use lowercase and no spaces. The dot is a special character to indicate what kind of file it is.

I’m going to bring this up in the browser now.

Did anyone have a problem saving? Make sure you save to the D drive.

Open up the web browser. Get a new tab. Go to file new tab or control T and a shortcut. Go to file open. Find the file you just made. You should get something that looks like that. [on overhead.]Let me know if you don’t get something that looks like that, so we can figure out why.

We went to FireFox. Create a new tab. In the tab we open the file we just created. File, open file. Find on your hard drive the file you created. Click open once you select it.

Everyone has FireFox open? Open the document by going to file, open file. Navigate to where the file is. Open it up. Once we get the hang of navigating files things will go smoother.

Once you have that up there, we are going to go to View. Page source. That should pop open a window, still in FireFox, with the same information you had in Notepad. We know what this looks like because we wrote it. But you can do this on any page on the web.

It’s a good way to copy someone else’s code. If you want to replicate the New York Times website you can do this. Don’t do anything that violates copyrights obviously.

Now we are going to upload this file to the server. You can see the address at the top is file:/// This is a file on our client, not on the Internet. To put them on the web we have to transfer them to the server.

Go to WinSCP. You should have the two folders you have lined up next to each other. You may not see your files in there. You can click the refresh button to update the list of files in case yours isn’t showing up. You should see your file on the left, not on the right.

We are going to drag that file to the right. Drag it and drop it. Then click Copy. That’s we you transfer a file from the client to the server.

Anyone have problems?

Professor: Everyone has it worked out? Now we’ll view the same file on the server. Go back to Firefox. Go to [server address deleted for privacy]/(your name)/class1/htmlframe. Load it up on the screen. For the Internet, you usually type http:// That’s the language that the browser uses to communicate with the server. You don’t need to know that.

Change the green stuff to your own name. Hit the go button and that should bring it up on the server. I have another folder in there. It should look exactly the same. Let’s just make sure the syntax looks just like what I have in the browser bar but with your own name. If anyone has a problem, raise your hand.

We’ll take a ten-minute break. I missed it earlier. That was Helen Sapp [sp?] she has to get checks from everyone. She’ll be in Room 103. So give her a check if you haven’t already. I’m not sure how it works. But helene is expecting checks.

Student: It was on the site when you signed up.

Professor: Is it for the class? I’ve never heard of that before. They must have changed something. She’s in Room 103. We’ll reconvene in ten minutes, at 11:40.

Speaker: Two people didn’t pick up their folders. One other person?

Professor: Leave it here and I’ll take care of it.

Speaker: Have a good day, everyone.

Teacher: The information architect said this has to be the main headline because that’s supposed to attract your attention. We need a picture and a big font. There’s a teaser, it’s not the whole article. Just one line that will get you interested.

An information architect will say, we need a section that indicates the most interesting article on the site. They will also point out that you need the logo and the search engine, etc.

In an agency where you are developing sites, there is someone who has a job just deciding where different parts of the content should go.

What about these areas? [On overhead.] The two sections. They are very similar. It is some kind of template they are using. How do they interact? Do you mouse over?

Male Student: JavaScript.

Teacher: They say this image currently corresponds to an article. When I mouse over a different image it’s a different article. There is an image. There are three items in any box. There is a limit to how much information we are showing. There’s also the category title at the top. Some subsection has a title indicated at the top. This is a common layout of information.

Does this make sense? This is very easy. You know this stuff without thinking about it, but it helps to point out what you are seeing. You want to see how people are doing this on the web now. You want to see the common trends in web development.

You should be aware of what they are. You should be away of how people are displaying information. I will understand this site because I have seen 100 other sites that look like this. I just want the information as quickly as possible.

They put the logo on the top left. They put the title in the top center. They don’t want to re-invent the layout. They don’t want you to struggle navigating the site.

Male Student: There’s a new site of the BBC. There’s a news site.

Teacher: Let’s find another brand.

Male Student: CNN.

Teacher: This doesn’t look that different. The logo is the top left. Search is top right or center. Links are now underneath instead of at the top. There’s a featured piece of content on the site, an upcoming story. That’s more important than the latest top story since this is very easy to pick out on the page because of the color, they are trying to emphasize the topic.

They don’t have to worry about you not understanding the site. You know this is a teaser of some sort.

If you go down, what else do we have? The top story image. The top story title, which was next to the image on BBC, on this page it’s down below.

How many columns are in this layout? There could be many answers, but in general?

Female Student: Two. The gray line separates it.

Teacher: Down here there is more clearly two columns. You have the one on the right that’s a side bar, and the two central columns. The first is subdivided.

If you said this was a three column layout you could make that argument. The design makes it look separated. There’s no strict rule how to talk about these things.

There’s a list of the test news articles. They put that in the middle for some reason. They are giving you maybe twenty of the top news articles. It doesn’t seem to be divided into any category. It’s just a big list.

Here there are subsections. Again, they have the title of the article and a teaser of it. It uses the same template.

On the right, what would you call this stuff? Think of a name. If you had to describe the right of the page what would one word be?

Female Student: Links.

Teacher: It doesn’t seem very important. We hardly looked at it. Some of you may look at the video section, but really you can ignore the whole right column and have a functional news site. This is contextual data. This is the least important section on the page.

The stuff as you go lower and lower on the right is less and less important. This is the standard way to create a site.

I think the videos they put up in the top right. Of all the extra things they don’t really want you to look at, the videos are the most important. People do like videos. Most sites put it in a more common position than this.

Anyone else have another site?

Male Student: Bookshare.com

Teacher: This is a different kind of site. We can move past news sites. They are all the same.

What would be your first impression of the organization of stuff on this website? There’s a clear top navigation. Besides the fact that the logo is again on the top right. There’s a bar of top level categories on the page. If you are going to navigate further in the site these are the high levels of the site.

Sometimes you will see these vertically on the left. These days, they are mostly horizontal across the top.

They put a log in section here. This indicates that they are expecting a large amount of the visitors to be existing members. Otherwise, why is this at the top? It probably means most people are members, or they want you to know you could potentially be a member. That’s important for their business.

There’s also a search function. They have quick links on the right. They are also promoting a membership here. They want you to know you can be a member. You can keep track of them on social networks.

I guess this is the “pitch” for who they are so you sign up. This is all about getting you to sign up, is that accurate? There’s a “sign up today” section. The top is the navigation.

The footer is an important part of every site. Just like the header, the navigation and logo — there’s a footer with links to terms of service or legal documents. It’s a standard thing to stick on the site. This is how many columns?

Student: Two

Professor: It’s obviously two. Column one is the pitch, why you should be interested in the site. Column two is other contextual information that’s not as critical.

Next page? Anyone?

Student: EBay.

Professor: That’s hard!

Student: [Laughs]

Professor: It’s a good example of a site with a LOT of information. There’s a lot of stuff there and they need to make it easy for you to find stuff. The first thing is the logo. Top left right? Almost every site uses top left. They have easy access for logging in or signing up. They put it right at the top. Not as big as the last site we saw it’s more discrete. If you have an account you should have an easy time logging in. The search box is the most used on the site.

They have “top level” categories — they have sections, what links people use the most. They want this to be the most successful application. This is [On screen.] a promotion of a service they’re providing. Is this the add? I’m not sure.

I guess that’s add space [On screen.] This is for new users in case they’re not familiar with eBay. This is promoting products. This is a two column lay out. The larger on the left and smaller on the right. The front page looks like is a big add space as far as I can tell. That makes sense because this is about searching. The home page is where people navigate.

Down below they have a more extensive list of categories. The top level is at the top and the less important items down below.

That’s enough of that! You get the idea right? You understand how to look at the sites. This is not the job of a graphic designer. This is the job of the information architects. You’ll come up with diagrams that look like boxes. One box for each column, one box for the heading. On my blog I have examples of what I’ve made. [On screen.]

Somewhere is a link about information architecture. There’s an example of wire frame. You won’t always see them looking so clean and organized. There’s design elements, an image here for example. I indicated the text is white and background is grey. I deal with architects so I have to make this look nice. It’s really about the boxes and text. You don’t want to put a lot of effort to make this look pretty. This is an example of a standard diagram. You can see I’ve divided it to 3 columns. I’m outlining what the content will look like without going into much detail.

[On screen.]

Ok, so if we formalize the navigation items — search is a big thing. Bear in mind what you can put on your page. Search is one thing. Search goes at the top generally but not always.

Wikipedia is all about search right? You don’t have to follow these rules, you can put the search at the bottom if you want. On the pages inside they have search at the left and middle, not at the top. They moved it to a slightly less standard position. But most people put it at the top right or top center. So search is a big thing.

Logo goes at the top left usually. Log in is usually at the top left or commonly at the top right. People know where to look at it for some reason there.

Top level categories underneath the logos. You’ll see second order categories which is less important. They’re on the left. Sometimes they’re right at the top and not always below.

If you go to NY Times you have an example of horizontal navigation for top things and the left navigation for every category. It’s discrete and out of the way. Everyone knows where that stuff goes.

Go to NYU. Again similar website. Search at the top right. High level navigation is all vertical. They have a list of news article. And then the video at the bottom.

Ok, that’s my quick overview of information architecture. That’s all there is to it.

This can take weeks or months to figure out the structure of the site. What we’ll be doing is first going through the basic aspects of HTML. Then we’ll look at how to restructure pages ourselves. I think it’s a critical issue to know how to create top navigation systems, search boxes, etc.

Let’s go through now … we have 20 minutes until lunch. Let’s go through some HTML.

Questions about this?

So what we’ll do is go back to text editor and back to the index you made now we’ll play around with tags in HTML. First let’s discuss outline. The top indicates this is an XHTML this is part of the HTML language. At the end of the class we’ll go into xtml. If you want to know the tags there’s a link to a dictionary of all the tags. No one ever looks at this. It’s just there — no one needs it you’ll just copy and paste from this. If you copy this to your browser you can do that. It’s just there for really obscure reasons. One day maybe there’s a program that’ll only work from here?

Every document starts with this. This is technical stuff. This is the beginning of the HTML document. So every document opens with HTML which indicates to the browser this is HTML. Every HTML must close. So they have a slash which indicates the closing of the HTML. So far so good?

Every HTML document has two sections. The head and body section. I’ve indented those two things. So head is the next tag. The closing of the head is the next thing. I’ve lined them up so I can see them clearly.

Same with the body. It’s lined up with the ending of the body. So you can see that you closed off the ending. So those two things are required for every HTML document. What you put inside of that is less strict. The HTML, head and body are all necessary for any document. With no content this is the minimal for HTML. The title I think is actually required. So I’m wrong [On screen.] This is the minimum for a valid HTML document. You put the title of your page in there [hello world.] So I’ll put the title. I save this document now. You don’t have to type this yourselves if you don’t want to.

I upload that to the server now. Now I can refresh my page. You see if you can read [On screen.] the title. This is what shows up from the title tag. You change the title tag to change this section which appears at the top of the browser.

In the body I can put whatever I want. There’s no requirement for the body. So I put something in the body and upload and you see the text show up. Now we have the components for an HTML document and the browser knows what to do with it.

But we want to do something more sophisticated right?

I’m using the same thing I put in the title because the most important thing on the page is on HTML. There are other headings called “H2, H3.” I think H6 is the limit. So every time I change the document I’m editing it on the computer here. If I want to see it updated on the web I have to re-upload it to the server, which can be tedious. There are other ways to do this but for now I want you to use this method. H1. is biggest and H2 is smaller all the way up to 6.

I mentioned that CSS was used for styling for headings, subheadings. This decades for me that one heading is bigger than the other which is a default. It makes H1 bigger, and H2 smaller etc. You’ll change these as we go along. But for now we’ll use this.

So if I want to make a paragraph I use a Ptag. This indicates that this is a paragraph. I’ll save that and upload. [On screen.]

The browser has a built in display style for paragraphs. It assumes it should make it smaller. It has a default font that it uses. We haven’t told it which font so it will default to the font it uses.

We have headings and paragraphs. Let’s do the link.

We created another paragraph tag. Inside that paragraph I’m using a link tag which indicates to make a link. They will be taken to the address I put in here.

Let’s see what it looks like. There’s my link [On overhead.] If I click it I go to NYU.edu. This is the basic link.

Male Student: What is HREF?

Teacher: I will get to it.

Let’s do some terminology. These things I’m calling tags. H2 tag means the beginning and ending tags. I’m using one word to indicate both. You can say opening and closing tag. I say H2 to imply that.

This is the tag name. Some tags have attributes. That’s what this is an example of, it’s inside the brackets. First you need the name of the tag. What kind of tag is it? Optionally, you can put in attributes. HREF is one attribute.

Hypertext is a link. A hypertext reference references this page.

Male Student: So the text is the link?

Teacher: Yes. So inside the tag is not in the brackets, but between the opening and closing tags. You can see the opening bracket and closing bracket. Link is not inside the brackets, it’s outside. That’s how it shows up as one word. Anything in the brackets is hidden. They only see what’s outside.

Questions about that?

That shows up as the word link. We know there’s an A tag around that word.

Link tags don’t have to be in a paragraph text, I just did that to keep the page looking clean. If I didn’t put it there it would still work just fine.

Let’s see what that looks like. It’s the same in this case. To be consistent, I want to indicate on my page what’s a paragraph and what’s not a paragraph. I’m keeping the structure semantically intelligent. You can easily see a paragraph and what’s not a paragraph.

After links, the second most important thing is an image. First you find the image you like. Let’s say I want to have a donkey. I will Google search for donkeys. I can right click, save image as. Download it from the server to the client. I want it in the same folder. Everything goes into your own personal folder, always remember where you save things.

This is the same folder where my HTML file is. This is going to be donkey.jpeg. It’s just one format. You need to remember where you saved it and what type of file it is and what you called it. Always called it something with lowercase letters.

Now I will go back and edit my HTML file and say to put an image here. Now we will have something floating there.

We have a tag again. This is an img tag for the word image. It takes at least one attribute. src indicates the source of the image. This has to be in the same folder as the HTML file, otherwise we need to specify what folder to find it in.

If you look at my folder structure, I have index.html and donkey.jpeg in the same folder. Make sure you copy the files over, or you won’t see them. The image doesn’t exist on the server yet. Drag them over. You always want to make sure that your client and server look identical.

Refresh our page. Now you will see, down below, the image. That’s because I put the img tag.

This code will all be up on the server after I’m done. Don’t rush to copy it all down. But follow along as much as you can.

Female Student: You can close that with just a slash?

Teacher: I mentioned that every opening tag needs a closing. There are some exceptions.

This slash indicates closing, but it’s in the same bracket. It’s an internal closing. You are never going to put a word in an image. It’s a self contained unit. There won’t be anything inside it. Put a space and slash, that indicates closing.

You should get in the habit, when writing image tags, of only having one tag, but with the internal closing. That will not necessarily work for paragraph. A paragraph like this would indicate a paragraph with nothing in it, which is pointless.

Most websites consist of both tags. These are the core parts.

Let’s go through a few more tags. Let’s say I wanted another paragraph. I’m going to make a paragraph with line breaks just to show you how to do line breaks. Sounds easy.

I entered. It doesn’t show as line breaks. You need to use a tag to indicate the line break. The HTML doesn’t differentiate. It treats it as a space. To make it look like there is a line break you need a special tag. That’s a “br” tag.

Am I going too fast?

That’s a line break. It will tell the browser you really need a line break and didn’t accidently hit return.

One thing to note, these paragraph tags have implicit line breaks after them which are bigger than the line breaks you get with a “br” tag. These are default. It’s a double or triple line break. It’s like a margin from one paragraph to the next.

Let’s go through a list of things. Let’s say I want a list of students in a class. There’s a way to create a special bullet pointed list or numbered list. That’s using a tag called “ol” which is ordered list, which is a list of numbers. Or “ul” for unordered list, which is just bulleted.

Inside of “ol” will go “li.”

[Phone ringing]

Male Student: Sorry.

Teacher: An ordered list has a start and an end. Each LI is an element in the list. Everything inside the LI will show up. Now I’m going to show you what that looks like.

I have to now re-upload it to the server. Drag it and drop it on the other side. Refresh the browser. We will go through this process one hundred times.

Now you see the list. There’s a numbered list of items. [On overhead.] Let me put a bunch of break tags down so I can scroll it. The numbers are only there because we said this is an ordered list, an OL tag. Not a UL which would have bullet points.

Let’s make a UL. I’m copying and pasting it and changing OL to UL. Now the numbers will be replaced by bullet points. The LI tags stay the same. Now you see the unordered list.

With style sheets you can make an OL have bullet points and a UL have numbers. They are interchangeable. You can use the style guide to say which you want to use.

Running through the list of tags. A big one that many of you may know is a table. Let’s say you have a table of data, like an Excel chart, you would use a table for that. They have rows and columns. Rows are indicated with TR. Let’s say we need two rows. Now I have an empty table with three rows. These are the beginnings and endings of each row.

See how I have indented everything? That put the rows inside the table tag. If you don’t indent properly you will be overcome with tags.

Within any given row you can have cells, just like an Excel sheet. To have a heading you need a TH tag. That means the heading of that column.

So I have a heading 2. [On screen.] So this table will have two columns. The second row has data which is TD (table data).

I’m indicating which columns are which. This is going to be row 1 and copy that to make another row. This is row 2, column 1 and row 2, column 2. This looks hard now I think with the table. I’m keeping track of which row is which. It’s easy to see because it’s indicated. The columns within is when it’s harder.

[On screen.] You will get the hang of it.

So I’ll upload that to the server. We have a tabular layout now. So there’s a heading and the default browser made the headings bold. They’re lined up so the columns are under the proper headings. That’s a table.

We won’t make a lot of tables in this class. Unless you have a data chart you won’t use many tables. Maybe you’ve created websites in the past, they used to make tables to make column layouts. That’s bad coding for today’s standards. It’s uncommon to see that today for lay out. We’ll use other ways to do that that’s more flexible. This is an old fashioned way to make two columns. If you did that in the past we won’t allow you to do that now.

Sometimes you may want to show text that looks pre-formatted text like an address. It’s like paragraph but it indicates that line breaks should be maintained. If I put in “NYU School of Continuing and Professional Studies “[On screen.]

Remember I said line breaks need a BR tag? Here I’m in pre-tag I can use regular line breaks and it’ll show up on the web. Pre indicates pre formated. Every space will show up on the web browser.

Let’s see what that looks like. It will be default tab it in because I have tabs in the code. It maintained the tab and read them and literally put the code on the page. So the tab has the line breaks. The browser has different font for the PRE. You can change that but that’s the default for pretag. You don’t see them used often. People will use pretags for addresses. Try to use the tags for what they’re made for.

That’s the pre tag. Let’s say you want to make something stick out from the paragraph. If I have a paragraph. [On screen.] I’ll break this up into 2 lines. We know line breaks don’t show up on the bowser unless it’s a pre tag.

I’ll highlight the words “very important” with a tag called “strong.” So strong says to the browser that the words are important. It says “make them look more important than the rest” which means it’ll show up bold. So the browser will make it bold to look more important. You can change it with style sheets. But it’s not the default.

Student: What’s the difference between that and bold type?

Professor: There’s no bold type. Because we don’t put design information in it it’s about design intensions. We replaced bold with strong. It’s up to you in style choice.

You see the browser made it bold. So a few more things and we’re done with the HTML effects. This is easy? This is the easy part I think. We’ll get into layout and structure. But the tag list is limited. Let’s say we want a search box. It won’t work. But we’ll get it up there for now. That’s a form (search box). So form tag surrounds any form like controls like select lists for example.

The first type will be “user name.” This is a bit more complicated, not too much. Can you read that? The font is smaller. So this is a label.

I’ll show you what it looks like in the browser. The user name sits next to the search box. That’s because I indicated the word “username” is a label. The input box itself is generated because of the input tag. The attributes after the tag are inside the brackets. It takes the type, or text in this case. It’s a one line bit of text.

ID we’ll get to tomorrow when we get to Java Script. For now it’s an ID. I call it username but it could be any other word. Name should be the same thing as ID. “Name” is an older ID. It doesn’t matter which word you use as long as you’re consistent.

The “for” will indicate the username.

So remember that these three things should be the same word. I can use any word as long as it’s the same. I can call it T1 and as long as it’s the same in all three places it’ll be fine. That’s a better example because you won’t confuse the words.

These are internal things that make the browser work.

I’ll turn on the browser. The label tag has only one purpose. If I click user name it puts the cursor in the label box. If I didn’t put the label tag there it would be the same but it wouldn’t put the cursor inside when I clicked on it. You can skip the label tag if you want but it’s a nice feature.

I’ll make another one … [On screen.]

So this is a label for “password field.” This is a different ID. The password label is for [On screen.] These are the same. Just change the words for the different elements. So when I click on username it puts the cursor there. When I click on password it puts the cursor on the password. That’s the label tag.

Student: Question … T1 and T2 in HTML is that a term or random term.

Professor: That’s my words for identifier. I gave them different names to differentiate them. The attribute will have the same syntax. Something equals something else in quotes. Some have special meaning. For ID and name it’s up to you.

This is a special word “text” so the browser knows what to do to make it one line of text. If I change “text” to “Password” the browser will know to make it hidden so you don’t see my password. Now when I enter username it looks like regular text. But the password is now hidden because I used the “text = password.” This makes plain text and the other makes the password hidden.

Let’s say you want to make a drop down list. That’s called “Select.” Inside the select tag. When I say inside I mean inside the open/close. Inside the select tag is option tag. So this is a drop down list with three options. This is how you make a drop down list. You can use select tag and you’ll have options. The text you write in options will be the drop down list.

Let’s see what that looks like. I put “/select” instead of “/option.” That should be opening and closing option. This highlights for me. So it’s an easy way to make sure you properly open and close.

Student: I was wondering how you did that.

Professor: Even for the one that doesn’t have the closing tag it’ll highlight it for you. For the image tag it highlights the closing part to tell you you did code properly.

There’s line break and input. So upload that. And refresh. Now when I click the drop down list the first option is by default selected. I can change that by clicking other options.

Student: If you want a blank first option you leave it blank?

Professor: Yes. Let’s do that. So yes. You have a blank option. [On screen.] Or I can put “select” as instructions to the user. Again it’s another option.

Another type of form element you have would be a radio type. Just like with the text option you want to give it an ID and an name. We are also going to put a label on this one. Label for = then put the same word.

I skipped our lunch break. Let me finish this, then we will take our break.

We have a radio button. The type just equals something different. It’s the same tag, just different subvarieties.

If I go to the browser, after uploading that to the server, you can see that I have a radio button. I can click it will label or the button itself.

I’m going to make a couple of other radio buttons because I want to show you their function. This is going to be R2. It’s the same exact code, but I changed the word R1 to the word R2. We will now have two radio buttons.

If I click R1 and then click R2 you can see they they are both selected. A lot of times radio buttons are used to select one or the other. To do that you give them the same name. Let’s say I call this one R1 and just change the name. Then I re-upload. Now if I click R2, R1 gets deselected. Just by giving them the same name only one can be selected at a time. It’s just the name value in this case.

The ID will always be a unique identifier. Any element with the ID R2 will be the only one. Later on that would throw off the JavaScript code. It doesn’t matter for now. IDs should always be unique. They should only have the same name if you want it to be part of the same option.

I’m just going to throw together one with different names so you can see the difference.

Here you have a case of mutually exclusive radio buttons and here you have a case of not mutually exclusive buttons.

I’m almost done going through all the different HTML elements. Let me finish that before we take our lunch break, unless anyone really objects.

Another important element, as far as forms go, is the text area. It’s one word, textarea. This is used for multi line texts. The textarea input is otherwise very similar to input.

There’s the textarea tag, again. This is one thing to be wary of with text areas. See how the formatting is weird? Think of it as the pre-tag. If you don’t want tabs or line breaks you need to get rid of them in your code. Every line break and tab will show up in that box.

Now you see it more like how you would want it on a browser.

It’s ok to indent the tag itself, but anything inside the tag should not be indented.

One more form element I want to cover. The check box. Just like we have radio buttons where you select either or of a set of options, the check box can select many options.

The idea name can be the same here. It’s only radio buttons that you want different IDs.

Let’s put a label next to it. I am going to make two check boxes with different name tags. Remember to try to be consistent. The label, ID and name should all match. They should be different for each check box. You can see consistency. There are slight variations.

I’m going to upload that to the server. Refresh it. Now you have two check boxes. Because we have the label, you can click on the label itself or the check box.

That’s all the form elements. This is like the vocabulary you have from reading forms. These are the options you can use. You can use any or all of these options.

One more that I missed. The submit button. There are three variations on a button. Just like the other kinds we’ve seen, this is another version of input tag. There’s submit, which will send the data you entered. The reset button will clear the elements inside the form. The button will do nothing, unless you are in JavaScript or some other technology and tell it to do something.

Let’s look at that. If I submit the form you will see that FireFox will load the page again. It submits the data to the server. It makes a request to the server.

To reset the form click reset.

Do nothing will do nothing.

The data you did enter will be removed if you click the reset button.

Male Student: Can you go back so I can see the lines?

Teacher: There’s one last thing I want to show you before we go to lunch. These are all of the major tags you will ever see on a webpage. There’s one more that’s not as commonly used, but it might be interesting.

The iframe tag. This loads one webpage inside of another webpage. It has one attribute, called source, that brings the other webpage in. This will show you the NYU site inside our page. You need a closing tag on iframe.

This will hopefully load up another site within our site. Let me show you that. See how the little window down here has the NYU site? Styling will make it bigger or smaller, give it a boarder, etc. The idea is that you put one page within another page.

That’s it for our HTML tutorial. That’s really all there is to it. I’m sure some details of these things you will get wrong a few times, but once you get the hang of it you see they are not that complicated as long as you stick with certain rules.

That’s it for our pre-lunch talk. Take an hour break. Come back at 2:17.

Any questions before you go?

Don’t leave valuables in the room. The door will be open.

[lunch break]

I’ll get started again … so I just posted to the blog. Wd. [On screen.] There’s just more links. There’s a link to the first link up there as well as the outline of the HTML document. There are tabs there too. These are posts from last semester so they’re thorough for what the tabs do. Go through this at some point, it’ll be helpful. Any questions so far? Confident? No? Let me know if you have questions.

We’ll take a break from coding for now.

First I want to do a mock example of how you would think about the visual aspects of a website. We’re just getting warmed up, it’s the first class. What’s a website you want to make? What’s the requirements? You will diagram how you would information architecture that. It’s good to conceptualize so start getting in the habit of thinking of these things. Let’s brainstorm and I’ll make a list and you’ll diagram it. Then we’ll get back into coding.

Anyone have an idea of a website you want to make? Something not TOO complicated. Last semester we did an artist website.

Student: Musician?

[Class laughing.]

Professor: Other ideas.

Good idea! Ok. So let’s think about that. Travel diary. You have a list of all the places you’ve been with maps and photos. Ok. That sounds challenging. It’s not an artist website. So let’s do that.

Let’s start. First I’ll bring up a document to outline what we want the site to do. Microsoft Word. Let’s come up with requirements. [On screen.] Requirements for Travel Let’s think of a title. Anyone? Travel diary?

[Class laughing.]

It doesn’t have to be the most creative thing. Ok. What do you want. Pretend you’re the client.

Student: List of locations.

Professor: Ok.

Student: List of …

Professor: Let’s do them separately first.

Map of places you’ve been [On screen.] This is for ONE person right? So where you’ve been right?

Student: List of places then you can have a Java thing that …

Professor: You’re talking about design? That’s what this is about. We’re breaking it down

Student: Section for photos

Professor: Ok. So photos are organized by place? So I first get to a place and then see the photos of that place?Or are the photos on the home page? Ok, so we’ll make it photos of each place.

Anything else?

Student: Details

Professor: Diary details. Is that the same thing. Is the detail the same thing as the diary.

Student: The text of what happened in each place. The diary is attached to the map

Student: Diary then a recommend list of experiences or additional elements.

Professor: Ok. Everyone agree? Dairy then recommendations. This is a daily diary. [On screen.]

List are recommendations? Or? What else?

Student: Get like a model. So if we get a lot of people looking at the site to set up the framework for advertising.

Professor: So you want to make money on the site eventually and you want to put in framework for ads. You want ads from Google or targeted to locations or restaurants? How do you see it?

Student: Photos. Every time we go to that country you list information so if someone goes there they know of a restaurant to go to.

Professor: Like an affiliate service? How would you get a cut?

[Class laughing.]

The way some people do it is if you have a link to Amazon — Amazon tracks who links them and they discount you. I don’t think that would work for restaurants. They don’t have that equipment {tracking}. You can have ads for your destination. You can sell ads to the resort or something like that.

Let’s say “ad space for a resort ” You can sell EACH individual page. Anything else?

Student: Link to currency converter or weather ….

Professor: One second. [On screen.] Currency converter place. Link to weather. [On screen.]

So you want them to comment on Face Book not the site? Well let’s keep it about this site for now. That’s a little too confusing. In real life you want to do that. So comments. For each photo? Or the whole album? You can leave comments on each photo or the whole album. But not? Vote — whole album? Each photo? Both? On particular photos. You want comment board for each photo. Ok, what else?

Student: Comment for each log or diary entry?

Professor: That makes sense. Agree?

Ok. Other ideas? That’s it? Would you be interested in this site?

Student: I want to have an email everytime someone writes on it like FaceBook.

Professor: As the owner of the site? Yes. That’s something we wouldn’t put in the wire frame.

Student: User reviews going to the comment board? if other people want to share too?

Professor: Up to you

Student: Display it separately.

Professor: I would see this person wrote about something I write my own review.

Student: To a different resort.

Professor: I would think that’s for comments. You can have a discussion board …

Student: Like a forum

Professor: It’s complicated. We want to limit complexity for now. Other things? What about this person. They need a profile? Something about what they’re interested in? Or is this for family and friends? You decide.

Student: If you want ad space you would target at more than your family.

Professor: It’s an optimistic site. But there are people that do this so …. “about me.”

Ok? We have contact information?

Student: Video?

Professor: What about combining that? Photos AND video, they go together.

Student: I don’t know if this goes here or address it individually. Under recommendations you can put shopping.

Professor: That makes sense. Any hierarchical organization you want to figure out right away. So recommendations broken down by category.

Ok. Anything else? We have maps, photos, diary, comments for each diary entry, recommendations, currency and weather. Each thing is about individual places. So it’s about figuring out where they’re looking at then displaying the options right? So that’s YOUR job.

We have the requirements. That’s the assignment. To diagram what the page would look like. Wire frame diagram. These are the requirements. Let’s figure out how to diagram. On the computers are Microsoft Visio [sp?] do you see that in the start menu? That’s the main tool on the PC to create diagrams of things.

On a MAC there’s a tool called Omnigrafille [sp?] I mentioned it on the blog post. Information architecture [On screen.] VIsi is more powerful but is confusing. Designers don’t like it.

So what we’ll do is — you should see a screen like this when you upload Visio. So we’ll make a general diagram. So what Visio does is give you shapes here [On screen.] And you can drag one on the page and draw. First we’ll do a horizontal lay out. We’ll switch to landscape. File, page set up, landscape. That gives you more width and it’s easier to use. First if I were to make a wire frame diagram. We have a post on the website. It’ll look something like this. Lots of boxes of texts. Nothing too fancy.

So first is to grab a rectangle and drag it to the page. Put it starting at top left. We won’t worry about things looking nice. We just drag the rectangle with some padding so if things go wrong we can fix it. This is called the “Page.” It’s the outline. So we have a blank canvas now. If I want a logo in the top left I draw another diagram and type “Logo.” [On screen.] You can click on any boxes to change font, texture, color. I can change font by going to this area like in Microsoft Word. I’ll make it bigger.

The default settings are smaller than you usually want. But you can make it look very nice. So I put the word “logo” in there so my client would know where it would be. We can discuss that and have a visual reference to see if the design would work. So if I want the title I would draw a box and stretch it out and type “Title.” It doesn’t matter what terminology. You want to probably change the font.

So I won’t make a big website. I’m just showing how you would approach this. I want a left navigation.

Student: I type in box and it zooms in and out.

Professor: That’s Visio. There’s nothing you can do. If I type in this it’ll zoom in. Once I’m done I can click off the box and it’ll undo it. You can’t override that. This is why people don’t like Visio. I use Visio for all my diagrams. It does some weird things I agree. But when you get the hang of it it’s nice.

It’s a relatively expensive software. It doesn’t come with basic installation. It has many negatives for it. Many people use power point that comes with Office. And you can do diagrams there. Some people just write it on paper. It’s just boxes and text. Using this program is more for the client and for your personal organization.

Ok. This is how I would start. I would start at a high level. I draw the box for the main content. I would line them up as much as possible. From here, I would get more granule. This is the starting point. I would think “what goes in the left hand? What links are in the navigation? What links do I want? Where will the links go? Where are the search boxes? Are there images?” Remember the BBC had images. Every detail I would place in the diagram.

Do I want the heading of an article next to that? Probably, so I would draw it in. You start to get granular with these things. [On screen.]

This is article, image. So I would add more and more detail until I have the exact representation of everything going on the page. The idea that there IS an article is what I want on this paper. There needs to be a place for the title.

Forget what these things are or the image content for now. Then you would say ” I want to link to … the homepage.” Every detail is now going in the page in the diagram. That’s what I want you to do for this site. I don’t want you to make it look pretty. I don’t care about the font color, box color, etc. The important part is that you represent all the information in a diagram. So I want you to spend 2 hours working on this. So we may end class on this. If we have time in the end I’ll do some more work. Questions?

Student: Should we have photo sections?

Professor: Yep. Every page. Do it for ONE location. Don’t do 10 different locations. Let’s say for example each location has the same template.

So I’ll post the requirements to the blog and it’ll have that information so you have that reference. Raise your hand if you need attention. I’m happy to come around and help out.

[Students working.]

Professor: I called about the credit services to clear my credit.

[Class laughing.]

That list of requirements is now up on the blog.

How’s everyone doing? Is it going ok?

I can let you work on this for an hour and finish class this way or go into more information. Raise your hand if you feel like you are doing well and want to move on to something else. Raise your hand if you want to work on this. We will do more lecture.

Let’s get into CSS.

I’m going to post what I have done to my blog. Do the same with what you have done so far. I want you to see what you have done with this assignment before we do anything else.

Go to File on your Visio. Save As. I’m not sure about the easiest way to do this. Hold on a second. In Visio there’s no easy way to save.

Go to Save As. This is only going to save one page at a time. You will have to go through each page and do this. Save as Type, select PNG. It should be there somewhere. Portable network and graphics. It’s a standard format. The same way we did jpeg earlier.

Call it whatever the page name is. This is the homepage for me. I will make it home.png. That’s just for this page. I have several pages so I have to do the same step for each one. Make sure you select png.

This is my location page so I name it location.png.

Male Student: Where do we save it to make sure it’s there tomorrow too?

Teacher: That’s a good question. I can’t guarantee that anything will be here tomorrow. I know they wipe things out every night. I believe some folders are secure and don’t get wiped out. Everything we do either store on a flash drive, a server or email it to yourself. Before you leave the room today back this up somehow. Don’t just leave it on the computer expecting it to be here tomorrow.

Go through the pages you have made and save them as “png”s.

Female Student: Do we create a new folder?

Teacher: You might want to. That might be a good idea.

Once you have all of those images saved in a folder I want you to upload them into a post on your blog. An advantage to having a class with many people you can see different techniques. We can keep track of each other’s work. You can see what you do and don’t like in other people’s work.

I’m going to post mine in my blog. If you have trouble posting your work just let me know and I will come around.

Remember we have these blogs that we set up on Blogger. You have to go to your Blogger account and post your work there.

In Blogger you can click the icon here to add an image in your blog post. The little blue icon with the landscape in the background. It will ask you to locate the file. Click browse to find the file you want, the image file. You can choose the layout, if it sits to the let or right of the text. Click accept the terms of service then upload the image. That will place the image in your blog post.

You can preview that.

First of all you have exported your images and saved it on your hard drive. You go to your Blogger account. You add an image, the blue landscape icon. Click the browse button to find the image you are looking for. Select the image you want to add. Then upload the image.

If you have something selected, like just this box, it will only export that one thing. Make sure you click off the page first.

People dislike Visio for this very reason. It has a lot of quirks. If you can’t export all the images at once click off the page.

With Omnigraph, the Mac software, you can export all the images.

Female Student: It adds the pictures on top right?

Teacher: I’m not sure what you mean. Like that? [On overhead.]

Female Student: I’m adding them to the same posting.

Teacher: I want one blog post with all the images in it. One by one you import them. They should line up one by one either on top of each other or side by side.

Female Student: Can you control where they go?

Teacher: I think you can drag them.

Male Student: I already lost my Blogger password. Do I use the Mailinator address?

Teacher: If that’s how you signed up for your blog? Then that’s what you use.

After you clicked publish? You want to change something?

I posted my wireframe. It’s not the most beautiful one but it got your mind working about how to lay out a site.

Is everyone doing ok uploading your photos?

Everyone doing ok? I’ll just give you a minute to finish that.

We have about a half hour to get into cascade style sheets just a little bit in preparation for tomorrow.

Who’s still working on exporting? Another minute or two then we will move on.

Do people have questions about anything so far?

Female Student: Should we upload to the server?

Teacher: You need a backup of some sort so either send it to yourself in an email or put it on the server.

Female Student: Is the email better?

Teacher: It’s fine if you want to put it on the server, we have plenty of space.

Any other questions about anything so far?

For those of you who are waiting, let’s get Notepad++ opened up again. Re-familiarize yourself with the WinSCP. Make a new HTML file in there.

I’m going to make a new folder called CSS basics. I told you not to use special characters in your file names. Underscore is actually ok. When I want to put a multi word file together I use underscore. This is going to be CSS_basics. This is a new folder in my class 1 folder. In this folder I will save a file called index.html.

I just copied and pasted the outline of an HTML document from another file. I recommend you get familiar with doing that. I’m going to delete everything in that copied HTML. This is my blank document for this example [On overhead.]

We are going to talk about how to use style sheets to change the design of your XHTML tags. Remember that we have this idea that headings, by default, show up black with New Roman font. Each heading gets smaller from there. Paragraphs have 12 point font. We use CSS to adjust those default settings.

First let’s put something on our page. Let’s put a heading in there. And let’s put a paragraph.

Male Student: Are we using the same NotePad++ file from before?

Teacher: No. We created a new file. It lived in a folder called CSS_basics.

Keep a blank document of the basic tags somewhere so you don’t have to keep rewriting it and can just copy and paste it from that document. Store something that has nothing in the body. It will be the same frame we use in every HTML document. I call it the HTML frame.

Save this into css_basics. Save the file name as index.html.

Put a heading in there and a paragraph. We are going to upload that into the server. We will go up a level from where we were. I’m going to upload that whole folder, CSS basics, into the server. In the class 1 folder, on both the server and client, I want the CSS folder with the index file in it.

Now I’m going to access it through the web browser. Just like we had the other file up, we are going to point to the new file. Let me put it up on the screen. Your name goes in the section where it says “your name.” That’s what you lit up in the web browser.

If you have uploaded these files to the right place you should see that file show up in the browser.

Following along with me is the most important thing. I will let you know when it’s necessary to copy and pick up. It’s ok if you just watch and see what I’m doing right now. I don’t want everyone to get out of sync because of the uploading and downloading, it’s not critical.

In this file I will create a new tag we haven’t seen before. It’s a link tag. I’m going to load in a style sheet. Here’s my XHTML document and here is the pointer for the style sheet.

I’m going to break it up onto multiple lines so you can see it.

You can have it on one line, you can break it up, it doesn’t matter as far as HTML is concerned. You can see it’s a tag name, named link. There are three attributes. REL, which is what is the relationship. TYPE indicates what type of file it is. There’s a particular type of file called type/causes. HREF is the hypertext reference. We saw this before in the link tag. This is a link pointing to another file.

My blog is a good place to look this information up.

That is going to tell the browser. The browser will read the document when we load it. The browser looks at the code, when it hits this line they know we want it to look for a style sheet. It’s going to look for style.css. We need to create a file called style.css that has the style sheet.

Make a new file. Save it as style.css in the same folder. This is going to be a blank file for now. The only content we have on this page is a heading and a paragraph. We are going to change the color of the text in the heading, and we are going to change the font of the paragraph.

This is CSS language now. It’s pretty simple also. For H1 tags, bracket, give them a color, green. This is CSS code saying for every single H1 tag on the page, it gets the color green. That’s the font color.

For every paragraph, let’s give it a background color.

These are two style sheet rules. One for H1 tags and one for P1 tags. These have to be XHTML tag names. They have to be identical to the tag names we want to create the style for.

It’s ok to have it on one line like that. Perfectly fine. It’s the same with HTML.

But don’t do that in this class, unless you really have a reason for doing that like compressing your file size or something.

This should, theoretically, make the heading green and the background color of the paragraph pink. Let’s try that. We have to re-upload all of that stuff to the server. The CSS basics file. Now our client and our server are in sync again. Now refresh the page.

There it is [On overhead.]

That was really done by a simple thing. Remember the first thing we did was tell the XHTML code where to find the style sheet. In that file we tell it what to do with the different text.

There are many different properties with each tag change. Background color. Font style. Font size. There’s a huge list.

Let’s do some more and play around with CSS a little more.

Let’s say I have another heading down below that’s also a paragraph. We don’t want it to be pink, we want it to be blue. The way I showed you now [On overhead.] this applies to all paragraphs.

Let’s make another paragraph. Let’s see how we can make it different. It just has a different bit of text inside this paragraph. Let’s upload that to the server. See my second paragraph is now pink because we made the rule that all paragraphs are pink. I want to change this one paragraph.

Actually, let’s make a third paragraph and leave those two as pink. We are going to give this paragraph an ID inside the P tag. ID equals P3. It’s just the word I’m choosing. Any element can have an ID, you name it what you want. This is so I can access this paragraph separately. No two elements should ever have the same idea because you won’t be able to access them individually.

In my CSS code I will make a rule that applies only to paragraph tags that have an ID. P. Pound sign. Let’s give it a background color of blue.

That was the rule for paragraphs in general. This is a rule for only the paragraph that has an ID of P3. That’s what the pound sign means.

Let’s re-upload that. That third paragraph is now blue.

Questions so far?

Male Student: The CSS code is on a separate NotePad++?

Teacher: It’s a separate file. These are files. This is one text file. That’s another text file. We link to the CSS file from the HTML file with this link tag. It tells the browser to look for a style sheet file called style.css. When the browser loads this page we say go to this HTML page first. It sees the tag for the style sheet and loads that as well.

Male Student: How do you identify paragraph three again?

Teacher: In the XHTML we have to somehow mark paragraph three as being different. We give it the special attribute of P3. Any of them can have an ID. It’s a unique identifier. We can individually address this particular tag.

Other questions?

Female Student: Can you go back to the other file?

Teacher: These will all be on the server, if you feel you are left behind you can download it. Just go through my folder.

We are going to do something different now. There are two concepts that are related but different. The ID concept you just saw. You individually address one particular type of item.

There’s also the idea of a class. You can address not just one, but a set of tags.

I’m going to make a bunch of other paragraphs now. I’m going to make another heading just to break up the page a bit.

We have another heading saying these are now paragraphs that are going to use classes. I’m going to have three paragraphs again. Let’s make a few more. I have six paragraphs all together.

Let’s say I want to have an even/odd system. The even paragraphs have one style, the odd paragraphs have another.

I’m going to upload this to the server so we have a baseline for what this looks like right now. They are all pink. We have a style sheet saying all paragraphs are pink. So far so good?

I want to make the odd paragraphs yellow and the even paragraphs red. You know that I can attach an ID to each of these saying ID equals P1, P2, P3, etc. and give individual styles for each. But there’s an easier way, that’s classes. I can say class equals odd and give all the odd paragraphs a class equals odd tag. All the even paragraphs get class equals even.

Instead of using IDs I’m using classes to change the styles of a bunch of different elements at once.

I’m going to go to the style sheet and say all odd paragraphs have a background color of yellow and all even paragraphs have a background color of red. P dot odd have a background color of yellow. P dot even have a background color of red.

Remember, with the pound sign you tell CSS to apply the style to something with a specific ID. With the dot notation you say to only apply the style to the paragraphs with the class of equal or odd. Those can be more than one element.

Does this make sense? We override turning the paragraphs pink because we attached classes to it.

Our HTML has only changed in the sense that we attached a new attribute to certain paragraphs. The difference between the ID and the class is that IDs can only change a single element, classes can be used repeatedly on many elements.

Questions?

Female Student: Something unrelated, in my NotePad++ instead of having the cursor like that, it’s going under each of the things and it doesn’t let me insert anything.

Teacher: Let me see.

I’m going to quit there for today. Any questions about anything so far? We covered one and a half courses of material in one day.

Female Student: Can you do the last part again, starting at H2?

Teacher: In this document?

Female Student: Yes.

Teacher: We covered all the basic HTML tags. How you write them and what they look like on the screen. We covered the general structure of an HTML document. We started the basics of CSS. We also talked about information architect.

There’s a great website that we will use as our on line book for these technologies, HTML and CSS. It has HTML and XHTML. These two sections are very good introductions to HTML and go over what we did in more detail. Their CSS section is excellent. If you want to check those out tonight or at any point while I’m talking feel free.

This is our textbook [On overhead.] for this part of the class. We will use different resources for the JavaScript.

This is linked from my blog. There is a lot there. Be sure to check those out either during class or at home.

That’s it for today. Hopefully not too bad.

Male Student: Since we covered more than one class what should I read for tomorrow?

Teacher: We are still doing CSS for tomorrow. Are you looking in the syllabus?

Male Student: Yes.

Teacher: We just about combined class 1 and class 2. So I guess check out class 3. On the syllabus you will see links to the tutorials.

Tomorrow we will be in what I wrote as class 3. If you want to get a preview go through the tutorials of CSS.

That’s it.