Discussion
Download Lecture Slides
Table of Contents
Transcription
Related Services
Web Development Tools
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
- Intro 0:00
- Browsers 0:17
- Introduction to Browsers
- Example: Browsers
- Firefox Add-ons 3:14
- Firefox Browser
- Example: Firebug Add-ons
- Example: Web Developer Toolbar and ColorZilla
- Domain Names and Hosting 10:23
- Overview of Domain Names and Hosting
- Your Own Domain
- Installing a Local Web Server 12:42
- Installing a Local Web Server
- Apache Web
- WYSIWYG Editors 15:56
- Introduction to WYSIWYG Editors
- Content Management System 18:31
- How Content Management System Works
- Example: WordPress
- File Transfer Protocol 22:26
- File Transfer Protocol
HTML5 Online Training
I. HTML | ||
---|---|---|
Your First Web Page | 17:01 | |
Web Basics and Web History | 32:23 | |
Web Development Tools | 26:28 | |
HTML Elements and Attributes | 21:50 | |
Essential Tags Part 1 | 41:42 | |
Essential Tags Part 2 | 24:20 | |
Markup Language | 29:38 | |
Page Structure and Meta-data Elements | 32:50 | |
Text-Level Semantics | 30:13 | |
Heading and Sectioning | 23:39 | |
Forms | 47:51 | |
Links | 36:41 | |
Embedded Content | 46:05 | |
The Canvas Element | 19:25 | |
Content Models | 29:08 | |
The DOM | 13:10 | |
Favicons | 13:14 | |
Embedding Flash and Other Objects | 15:07 | |
Offline Cache | 19:53 | |
Web Development Principles | 26:47 |
Transcription: Web Development Tools
Hello, and welcome to Educator.com.0000
This lesson is going to give a little bit of an introduction to a couple of the web development tools that you can use to create your websites.0002
And it will also help with the development process for getting your website up on the Internet.0011
The first and most important thing that you will need, probably, besides a text editor to create the code, is a browser.0020
It is actually very useful to test your web pages in as many different browsers as you can install on your computer.0027
And you should be familiar with as many as you can, across platforms,0035
especially in terms of the ones that are more popular, market-share-wise.0041
You can also install beta versions of browsers; and this will help you get an idea for what is coming up soon.0046
so that, by the time your website is done being developed, all your users0053
may have downloaded the newer versions of the browsers, and you can make use of it.0056
Or if you just want to keep on top of things for what is coming up...0061
Basically, you need more than one browser, because...here is our typical layout of the website,0065
with content, HTML, CSS, a scripting language, and then media (like images and video);0074
all this, as we talked about before, gets put together in the browser and sent to the screen as a web page; it all gets incorporated.0080
However, every single browser does it slightly differently.0092
Now, the principles of the Web should allow for every page to look the same.0096
But really, what is more important on the Web is that all of this stuff is accessible in every browser, whether or not it looks the same.0103
So, the fact that Safari may make this website look slightly different, and output a Safari page instead of a Firefox page, is not a problem.0112
It doesn't have to be pixel-perfect, looking the same in every browser.0121
What does need to happen is: all of this content needs to be available, especially the plain-text data and the image and video data.0125
It all needs to be accessible; and then, scripting needs to be available to use, if it is important for the functionality of the site.0137
This styling is not so much important; and the HTML, of course, is what makes it all possible.0146
But every single browser is going to be slightly different.0152
So, just to show you, I have a couple of browsers installed, just on this Mac here.0155
I have Firefox, Opera, Google Chrome (the latest version), and Apple Safari.0161
And throughout this course, you will see me using a lot of these different browsers for different demonstrations,0169
depending on what I want to show, and if something is maybe a newer feature and is not supported,0174
or if there is a certain bug that I want to point out.0179
And you can install a lot of browsers, and you can have them all open.0184
And you can, as you are editing code, refresh it in different browsers and see the changes in each browser.0188
The next most important thing that you will want to get familiar with is Firefox add-ons.0196
I highly recommend developing in Firefox, just for convenience' sake.0202
Obviously, you need to check in other browsers; but I tend to, when I am doing browsing, use Chrome,0207
because it is faster and has some features that I like.0214
But when I am developing, I use Firefox, because it has add-ons.0216
And this is the URL to an entire section of their add-on website that is dedicated just to web development add-ons.0220
This is their add-on website, addons.mozilla.org.0231
And I am going to show you three add-ons, really quickly, right now.0235
So, click over to Web Development; and you can see the featured add-ons.0240
And then, always look at the top downloads; these are the most important ones.0245
You will see Firebug and Web Developer right here, already.0249
I am going to install Firebug first; it is quite simple to add an add-on in Firefox: install and then restart.0253
The nice thing about Firefox is that, when it does restart using that dialog, it will pull up all the windows that you had running already.0278
Let's give it a second for it to load; and now, Firebug has been installed.0296
And you can see, right down here in the corner: there is this little bug, and that is Firebug.0306
Let's go to a website--say Educator.com--and if we want to analyze some of the things in this page...0312
Say you are visiting this website, and you notice this little curved thing up here,0326
and you want to know how the web developer did that, because you want to do something similar.0333
You can right-click on it, and click on Inspect Element (if you have Firebug installed), and it pulls up the Firebug dialog down here.0337
And what this shows you immediately is the HTML DOM.0354
Now, as I hover over the different elements here, it will highlight them above; and it zooms in on the thing that you clicked on initially.0358
So, you can see that, in this case, the web developer is using little images that he has placed in the corners of this div to accomplish that.0367
And then, over here on the right side is the style that goes for whichever element you have clicked on.0378
If I want to modify that style, I can actually do it on the fly.0386
Here is the top; I can move this, and you can see that it is moving these little, tiny squares down.0392
They are a little bit small, so it is hard to see; but I can do things like start disabling things.0403
And I break stuff, because I have disabled it; and there are other neat things I can do.0409
There are a couple of other tabs, like the CSS tab that lets you edit the whole CSS.0416
The Script tab is disabled by default to make things a little bit quicker; but it will enable you to debug your JavaScript as you go.0421
DOM Navigator shows you all of these different elements in the DOM that are calculated, instead of having to go through the HTML by hand.0429
And then, of course, you can always click on Edit and manually edit the HTML here by hand, as well.0437
And then, the console is another thing that lets you...especially for JavaScript, you can put little notifications in there0445
that will pause the loading of the page until you are done and ready for it to be loaded.0453
That is Firebug; it is extremely useful for navigating around pages, looking at the code,0460
getting directly at the part that you want to see, and things like that.0466
Let's go back to the add-ons page, and I will show you the Web Developer toolbar...add.0472
Just give it a second to install; and I am actually going to add another one, just so we don't have to restart again--ColorZilla.0493
And I will restart Firefox.0514
The Web Developer toolbar has some of the same functionality as Firebug, although it has a lot of other new things, as well.0517
You can see: this bar has been added up here.0529
Let's go back to Educator.0532
Now, let's say that I wanted to see what this page would look like without any CSS.0538
I can disable styles, and then I can just see the raw HTML and the content, and how that is displayed.0545
This is a well-made website, because I can still navigate it with the CSS disabled.0555
I can also disable things like JavaScript and images; I could disable all images, if I wanted to.0561
There are a couple of broken images up here.0575
And another useful feature is the outline tool.0578
If I wanted to outline all of the block-level elements, now I can see, just looking at the top,0583
without looking at the source, where a lot of these elements are put together, and how this page is constructed.0593
Before, I showed you how to look at this corner here to see that it is made of a little image with a block-level outliner on.0601
I can just see right away that there is something going on there; and I can see what is going on.0611
And that is that for Firefox add-ons.0620
All right, so domain names and hosting is something that you are going to want to learn about0625
if you are actually getting to the point where you are putting a website up on the Internet.0631
Now, hosting is, of course, when something is on a server, and it is made available to users to download and view.0636
And there are a lot of ways you can host on existing websites--like your school's or your ISP's will often offer a little bit of space.0645
And your URL to your space will be something like myschool.edu/~your first and last name, or something like that.0653
If you want to have your own domain, like mydomain.com, you need to first buy a domain.0664
Go to any Internet registrar (like GoDaddy.com--that is the most popular one right now; Network Solutions was the original one).0670
And you can purchase a domain name, and then what needs to happen is: you buy hosting from another company,0678
or you can do it all through the same company.0689
GoDaddy provides hosting; a lot of companies provide hosting; you can get a hosting for as cheap as $1/month to as expensive as $1 million/month.0691
I don't even want to guess what Google's hosting costs would be if they had to put a number on it,0701
because they have server farms all over the world that are just incredibly fast.0707
But you get what you pay for, to some degree.0712
If you are going to have cheaper hosting, you will get more downtime.0716
You may have a server that is shared with thousands of other users on that same hard drive on the same server.0719
So, you can get slow; you can get more vulnerable to..0726
if one of the accounts gets hacked, and it has viruses, yours may be affected as well--things like that.0729
Once you have bought hosting and you have bought a domain name, you just have0737
to go into your domain name settings at the registrar and change the name servers to point to the domain of the host.0741
And then, as long as you have files on the dedicated folder on the host, then people going to your domain will see your files.0750
And that is pretty simple; where it gets interesting is if you want to install a web server locally, on your own computer.0758
Now, you can do this, and it will behave a lot like a server would on the Internet,0773
which means you can have back-end programming; you can send0779
with HTTP requests and with HTTP headers; different MIME types of things...0784
And it makes your development a lot simpler, if you are dealing with anything that is very complicated,0790
that would involve a server negotiating with the browser, or any sorts of interactions0794
that assume that you are in an online context, that don't really work offline or locally.0802
I am going to pull up Firefox really quickly, and we can go to Apache.0810
OK, I think I may have CSS disabled, or images are disabled...there.0836
This is the Apache Software Foundation's website; and they are open source, and they developed the HTTP server,0847
which is the most common (especially for cheaper, like Linux and UNIX hosting) type of web servers; and it is very secure.0856
And because it is open-source, you can download it and install it on your home computer.0866
It used to be kind of complicated, but it has gotten very, very simple now.0870
You can just go to their website here, click on Download Link, click on the version you want to download, and then scroll down to the list of files here.0874
Now, there are a couple of UNIX files, and then there are two Windows files.0889
This binary would be if you want to build it yourself; this is just an easy-to-install one.0895
So, you can click on this: I am on a Mac right now, so I won't do the Windows version.0903
But download it, unzip it, and then install it; and you will have, pretty quickly, an Apache web server running on your home computer.0909
Now, you will have to do some configuration; and if you want to install PHP, for example,0919
so that you can use some server-side scripting, you can do that.0924
But very quickly, you will be able to play around with that; and it will make a big difference0927
in your understanding of problems that you might run into when dealing with the server that you are hosting in, as well.0931
Now, you will notice that Mac is not on here.0938
Mac (and Linux, I think) already have an Apache server already installed.0941
And you just have to go find it and enable it in your settings.0947
Last, this part here is what-you-see-is-what-you-get editors, or WYSIWYG.0959
You will often hear people call this just "whiz-ee-wig," which I always thought was its own word; but I guess it comes from this WYSIWYG.0967
Now, WYSIWYG editors are editors that don't always give you exactly what you see, despite what the name says.0976
And that is partly because rendering will be different in every browser and in every operating system, etc.0988
But what you will get is a rendering of what it is going to look like as you are editing it.0996
So, the normal way of a web developer coding might be to code the content directly in HTML,1001
lock in all of these things, and then send it to the browser; so they are in a text editor the whole time.1013
With a what-you-see-is-what-you-get editor, you are not looking at code so much1018
as you are looking at a page that is being rendered similarly to how a browser would,1021
depending on which what-you-see-is-what-you-get editor you are using.1028
And then, you can click on little parts of your website that you are looking at and edit it (paste things in).1032
And the WYSIWYG editor will take care of all of it for you.1041
Now, this is actually not the greatest thing, because it is going to be using computer-generated code,1046
and it is probably not going to be standards-compliant, and it is probably not going to be the most efficient.1052
And it is probably going to be a big mess.1056
Now, there is a lot...Dreamweaver is very, very popular, and a lot of people can use it develop websites1061
that otherwise wouldn't have the technological know-how to make and produce websites.1067
However, you do need to still know a lot of HTML in order to really get it to work,1074
because there are going to be so many problems that you are going to have to go in by hand and add things in yourself.1079
And WYSIWYG editors...there are different scales of them.1086
There are ones that give you a very close approximation as you are editing.1092
And then, there are the ones that just show you the basics; they might show you just italicization and different sizings of fonts and things.1097
But they won't show you some of the more complicated CSS styling and things like that.1106
Now, a content management system is another way for someone who does not necessarily have a lot of skill,1112
or maybe just not a lot of desire, in terms of going back and coding and source coding.1121
A content management system will run your website for you.1129
They often include WYSIWYG editors as part of the editing system.1134
But you will login to your content managing website, and it will show you a list of different files in the database.1137
You will connect up through JavaScript and through your HTML, perhaps forms, to your server,1146
which is going to connect to a lot of server-side script--for example, in WordPress; these would be PHP files.1155
And these PHP files will allow you access to a lot of different database files that are, for example, blog posts and images and things like that.1162
And you can edit them right there from your browser--all of this right from your browser.1170
And all of it is managed by a very complicated set of server-side scripts.1175
And those server-side scripts not only manage the content, but will also allow you to view the content,1182
both as a user and as an editor or contributor.1189
And they run all this together; and as I said, they often have WYSIWYG editors built in.1193
Let's look at WordPress: wordpress.com is a place for you to create a WordPress blog on the WordPress server.1201
And I have created one ahead of time, educatordemo.wordpress.com.1212
This just took me a minute to set up, literally--just seconds.1219
And it has some defaults here, and you can customize this a lot.1225
This is what I would look like as a visitor; and notice that the URL is educatordemo.wordpress.com.1228
I can log in, and then once I am logged in, I am seeing the options to make a lot of changes to my content.1235
So, WordPress is blog-focused; you will see posts here, and there will be a list of all your posts.1256
You can also add pages, and there is a lot of other stuff you can do.1264
Click on this post, and then I can edit my post directly without even needing to upload anything to our server, download anything...1268
This is it right here; and you can see, this is partially a WYSIWYG editor.1276
If I write some text, and I want bold, I can highlight it and click this little button, and it emboldens it.1281
I can also import images and things like this.1292
And then, when I am done, I click Update; and then, I can view the post.1295
And it pulls up this post that I just created; the text that I want bold is what I added right there.1301
WordPress is one of the most common, and it is also one that is used for blogging.1308
There are a lot of other ones, and they can be focused on all sorts of different things.1315
They are very, very powerful and very useful, especially if you know1322
how to get into the server-side code and modify the program to be the way that you want it to.1325
WordPress is a great example, because it is open-source, and you can modify all of these PHP files on your own,1331
if you know a little bit of PHP, to make it do anything you want, in addition to looking any way you want.1337
The last thing I am going to talk about in this lesson is file transfer protocol, also known as FTP.1347
Now, if you are not using a WYSIWYG editor that automatically takes care of this for you,1354
or a content management system that takes care of this for you, you are probably going1358
to be making files by hand and uploading them by hand to the server.1363
And you should probably learn how to do this at some point, because it is a very useful skill to have.1369
And even in a content management system, you are going to do this from time to time.1374
For example, when you are installing WordPress, you don't have to go to wordpress.com.1379
You could use wordpress.org, which allows you to download all of the code for those PHP files1383
and install your own version of WordPress content management system on your domain.1389
And then, you have complete control over it.1394
You just upload the files, do a little bit of installation...and you have it there on your server, ready for you to use.1397
So, you need to learn FTP.1405
The concept of FTP is: instead of a browser here being the negotiator between your computer and the server, you have this FTP program.1409
And every computer has FTP installed by default--in the command line, though.1418
But if you want to install FileZilla, which is another open-source program, you can do that.1426
And this is a Mac, and it is installed; it will also work on PCs and Linux.1433
It is a very convenient way of doing this without having to learn too much.1439
The basic idea is that you have some files on your hard drive; here is your hard drive; here is the server's hard drive; and here are your files.1446
And you want to upload them, so you connect through your FTP program to the server.1454
You have established a connection; it sends back a response--"connected OK."1460
And then, you can access your hard drive and either upload directly into the hard drive, or you can download directly from the server onto your hard drive.1464
So, the way that this looks in practice is: login; now, we are here connected on my server;1478
these files here on the left are my local files on my hard drive; these files here on my right are on the server up in the cloud.1485
And if I want to download a file--maybe even a file that is not normally visible to most users--I can click on it and drag it over.1493
And you see some code fly by, and I have downloaded it.1499
And then, the same thing can happen for upload: it is just drag it over, and it uploads.1504
You can select multiple files; you can do a lot of things, like changing permissions on the files on the server.1509
You can access the htaccess file, which will just be a file with a little (this cursor doesn't like double-clicking) period in front, and then htaccess.1515
And it has a lot of settings for your server; you can modify how you are going to send MIME types based on the file extension, and things like that.1528
And overall, it is one of the most fundamental ways that files are transferred for web developers.1538
It is not really used as much in a user system, because this is designed for sending files.1547
All HTTP sends files just fine, as well; and some content management systems will use that.1553
That is a good introduction to a good number of the tools that you will want to use in becoming a web developer of some kind, and doing web development.1561
And you will run into a lot of other tools that you can use.1573
And you may, depending on what you are doing, need additional tools for different things.1577
But this is the basics that everybody is going to run into or need at some point.1581
All right, thank you for watching Educator.com.1586
0 answers
Post by Ebssa Tesema on June 22, 2015
i noticed that he typed apache web server and he got apache.org...how does that work?
1 answer
Last reply by: michael Boocher
Sat Aug 3, 2013 5:34 AM
Post by Norma Saderi Moreira on January 18, 2013
how much does it cost a domain ?
0 answers
Post by william Avendano on February 15, 2012
is ipage a good host to use?
1 answer
Fri Aug 19, 2011 6:05 PM
Post by William Hollingsworth on May 27, 2011
Hello:
Why would I NOT want to host on my own computer? It's expensive to use a hosting service, so why NOT just use my own computer as my web page host?
Thanks,
Rich
0 answers
Post by VIncent Maguire on May 20, 2011
I had the same problem with starting at a random place in the video. RIght click on the slide and choose settings. Then pick the 3rd icon - local storage settings and increase the local storage. Now you can go forward to any point.
1 answer
Fri Aug 19, 2011 6:12 PM
Post by Tammy Shields on March 8, 2011
How do I start in a different place in a lesson rather than always starting from the beginning?
0 answers
Post by AZIZ KARSAN on January 1, 2011
the training cuta out after the Morzilla add-on section