Contact
Subscribe
Jul 25, 2009 
Web Development
Friday, July 24, 2009
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.]
2 Comments 