IntroductionCourse overview| 00:00 | This title launches an all new series
to the lynda.com Online Training Library
| | 00:05 | that focuses on real world projects
created through hands-on training.
| | 00:13 | My name is Laurie Burruss. Time and
time again, what I see is that designers,
| | 00:17 | artists and developers don't really
understand the processes involved in
| | 00:21 | doing a project. They may know features,
but not the thunk behind a project.
| | 00:27 | Where in this case, how a web site is
conceived. Too often people think,
| | 00:31 | "I just need to learn the software
application." But it's important to bring your
| | 00:35 | passion, emotion, creativity and
your design skills to all that you do.
| | 00:41 | Over the course of the title, we will
explore the Internet, the World Wide Web,
| | 00:46 | browsers and third-party extensions,
the structure and feature of a homepage
| | 00:51 | and the user's experience. Upon
completion of this course you will be able to
| | 00:56 | create a visual wireframe that shows
the structures, features and affordances
| | 01:01 | of a good homepage. This real world
project serves as a proposal document and
| | 01:06 | a working communication tool between
the designer, the client and the team.
| | 01:11 | The hands-on training projects are all
about getting you from where you are to
| | 01:15 | where you want to go. So let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library or if you
| | 00:06 | are watching this tutorial on a disk,
you know how this works. You have access
| | 00:11 | to the exercise files used throughout
this title. But with this series, we are
| | 00:15 | doing things just a little
differently. We are offering free support
| | 00:20 | documentation to all members.
| | 00:22 | In this title, we have 3 documents
available. Any links or resources that were
| | 00:27 | shown throughout the title are
available in this PDF. The Project Overview
| | 00:34 | contains the project description, the
goals and objectives and what you will
| | 00:38 | complete upon finishing the project,
how it relates to industry and the actual
| | 00:43 | step by step instructions on how to do
this project. And the last document is a
| | 00:48 | quiz that in a fun way challenges you
and makes sure that you have grasped the
| | 00:53 | main concepts that we have discussed
throughout this title. You can also just
| | 00:58 | follow along from scratch using your own assets.
| | Collapse this transcript |
|
|
1. How the Internet WorksHow the internet works| 00:01 | When I first started teaching Web
design, I jumped right into teaching
| | 00:04 | Dreamweaver. But I quickly realized
that most people don't understand how the
| | 00:08 | Internet or the World Wide Web works.
| | 00:10 | We are looking at a visualization of
what the Internet looks like. Looking at
| | 00:15 | this image, does it remind you of
anything? The usual answer I hear is this
| | 00:20 | picture looks like a living
organism and that's exactly right. It's not
| | 00:24 | straight lines going from box to box,
covering the globe. It's actually a
| | 00:28 | system of networks and where there
is more traffic, you see the hot spots.
| | 00:32 | For me it looks like a galaxy with smaller
system within, like planetary systems,
| | 00:37 | and within these are individual planets
and stars. And all of these systems or
| | 00:42 | networks are all connected in some way.
A common mistake made is to use the
| | 00:47 | phrases Internet and World Wide
Web interchangeably. The Internet is a
| | 00:52 | network of networks and all kinds of
people can contribute to this. And there
| | 00:57 | can be domestic networks, academic
networks, business networks, government
| | 01:02 | networks, etcetera. Through those
networks, services are delivered to people at
| | 01:07 | their personal computers. The kinds
of services with which you are familiar
| | 01:11 | might include email, online chat, file
transfer, linking to web pages and lots
| | 01:17 | of resources from the World Wide Web.
One source to start learning this
| | 01:22 | vocabulary is Wikipedia. You can see
the definitions put together and submitted
| | 01:26 | by people around the world. But the
important concept to remember is that
| | 01:31 | Internet is a network of networks. The
other phrase to understand is World Wide Web.
| | 01:36 | The World Wide Web is not the
same as the Internet. It is a system of
| | 01:41 | interlinked hypertext documents.
Hypertext documents means that texts or words
| | 01:46 | when clicked will link to other
documents. In order to see these documents
| | 01:51 | you need a browser. Within these
hypertext documents you can display text,
| | 01:56 | images, videos and other types of
multimedia. The World Wide Web is still a
| | 02:01 | teenager. It's not even 20 years old.
It's evolved quickly from being simply a
| | 02:06 | text document that displays on a
network to being a full-service, rich media,
| | 02:11 | immersive experience.
| | 02:13 | How do the Internet and the World
Wide Web work? How do we not just have a
| | 02:17 | jumble and scramble of networks and no
communication and people making rules
| | 02:21 | all over the place? We have a group
called the World Wide Web Consortium.
| | 02:26 | Notice that its extension is .org.
It's an organization; it's not a business.
| | 02:32 | It doesn't make money and many, many
institutions, businesses, industries,
| | 02:37 | individuals all over the world
submit, test, try out examples, work on
| | 02:42 | committees to come up with standards
and recommendations. Think of it as being
| | 02:46 | an online manual. It is sort of the
guide to the Internet. It's a working
| | 02:50 | living document that people are
constantly updating and providing new
| | 02:54 | information to. It may be ugly but it
is simple to read and use. I tell new
| | 03:00 | people on the web to start by looking
at the left column. Most of the topics
| | 03:05 | that you would need to know in a Web
design course or even at your own Web
| | 03:08 | design business are right here. So for
example, if we click on HTML, that takes
| | 03:14 | you to everything that the Consortium
has to say about HTML. It has places to
| | 03:19 | share, articles, historical
information, places for learning, examples,
| | 03:24 | recommendations of what versions we
should adapt. Essentially everything that
| | 03:29 | is related to HTML, the common
knowledge and research and the agreed upon
| | 03:34 | practices show up on this page.
| | 03:36 | I am returning to the homepage now
for just a moment. And there is one other
| | 03:40 | link that I recommend called New
Visitors. This link informs you about how the
| | 03:45 | World Wide Web is organized and what
it does. Do you have to pay for this
| | 03:49 | service? No. Do the people who work in
the service get paid? Some do but it's
| | 03:54 | basically like this huge non-profit
organization. It's really to our advantage
| | 03:59 | if we want the Internet and our web
sites to work correctly to agree on how the
| | 04:03 | rules are set up. What we are going to
adopt. What are best examples of best
| | 04:08 | practices. We are really lucky to have
the W3C and we as web designers should
| | 04:13 | support its research and recommendations.
| | 04:17 | Before the Internet not everybody had
access to information, not everybody could
| | 04:21 | communicate with each other. The great
thing about the W3C is it's a collection
| | 04:25 | of people agreeing to how they want to
communicate throughout the entire world.
| | 04:29 | It's a global experience. The World
Wide Web is an example of pure democracy
| | 04:33 | in action. Anybody can put up a web
page. Now granted, not everybody's web
| | 04:38 | page is going to have thousands of hits
per day, but even getting your message
| | 04:42 | out to one person is some form of
communication. Wonderful things develop on
| | 04:46 | the web. We hear how ideas that we
thought would not succeed as a web site have
| | 04:50 | indeed succeeded beyond
what we could ever envision.
| | 04:53 | E-bay is a great example, the best
garage sale site in the world where people
| | 04:58 | make their livings. I feel fortunate
to live in the age of the Internet.
| | 05:03 | The World Wide Web Consortium makes my job
as a Web designer easier. So, at the end
| | 05:07 | of this movie bookmark this link
because you will use it again and again.
| | 05:11 | It's your online textbook to all things web.
| | Collapse this transcript |
| How a user connects| 00:00 | Once you understand the big picture of how the Internet and
the world wide web works, the next thing to take a look at is how
| | 00:07 | you the user connect to this service.
| | 00:09 | There are really four parts that you need in
order to be able to see a web page on your computer.
| | 00:16 | The first thing is the web page
or what we call the HTML document.
| | 00:20 | The second thing, which you are all
familiar with, is the web browser.
| | 00:24 | The third thing is the Web server
and the last thing is a way to connect
| | 00:28 | the Web server to your computer, what we call
the ISP or the Internet service provider.
| | 00:34 | So let's take a look at how this all works.
| | 00:37 | Over on your personal desktop computer,
you've got a webpage displaying
| | 00:43 | but it's displaying through a browser. Now what most people
don't realize is a browser is a software application. It's an
| | 00:49 | application, and .EXE or. DMG, that you have to download to your
machine, just like anybody else. Most of us aren't aware that it's an
| | 00:56 | application because when we buy our computer it's preinstalled,
but it's certainly okay to have more than one browser and
| | 01:03 | if you're a web designer, you often have four to six browsers
of various versions to be testing for your audiences and
| | 01:10 | for whatever your client's needs are.
| | 01:12 | So get used to the fact that you'll
have a lot of browsers on your computer.
| | 01:17 | What the web browser does is you type
in an address and it goes out to the server
| | 01:23 | and gets the page and brings it back for display.
Its job is to go out to the server, get that page and display it
| | 01:30 | properly. I call it the TV set of your computer.
| | 01:34 | Just like when you go into Target there's
all different brands of televisions you can buy,
| | 01:39 | browsers are the same way.
They come in lots of flavors.
| | 01:43 | The third thing you need is what we call a server and
this we don't know as much about and it seems like it's this god-like
| | 01:49 | thing that lives out there
| | 01:50 | in another world. It's sort of like 2001: A Space Odyssey. But the way
I like to talk about the server is it's basically just this big
| | 01:57 | storage room.
| | 01:59 | And what this big server does is store your website
and any assets, any links, anything that belongs with your
| | 02:05 | website, images, movies, animations, right there in a directory.
And when your browser pings it, it looks for the file and
| | 02:15 | sends it back to the browser. Its job is to do that day and night
and the only thing that can happen is sometimes you get too
| | 02:22 | many people trying to get to the
server and you don't get good delivery.
| | 02:26 | The last thing you need is what we call the Internet service
provider. The Internet service provider is a way to connect
| | 02:34 | to the Internet. You have to have a way for your computer
to connect to that server and this is a paid, monthly
| | 02:41 | service that you can get.
| | 02:42 | Both the Web server and the ISP provider are monthly services.
| | 02:48 | For just a moment, I'm going to switch out to the Internet
to show you a couple of examples of Web hosting services.
| | 02:56 | I bookmarked two companies that do what I call comparison charts
on Web hosting services. Now a large company will probably
| | 03:04 | provide its own servers, set up that in its IT department,
and deal with all of those issues, but most of us individuals and
| | 03:11 | small businesses will be using a web hosting company.
The best thing to do to start thinking about how to do this and how
| | 03:17 | to set this up is to go out to one of these charts,
look at the comparison, compare the features, compare the services,
| | 03:23 | come up with the basic monthly cost that you can afford.
| | 03:26 | Typically you get a much better deal if you buy it for a
two-year contract as opposed to month to month. This company
| | 03:34 | is called mybestratedwebhosting and as you can see
it changes all the time and it always has the last update
| | 03:39 | that was put there. Generally these
hosting services run from $7-$12 a month.
| | 03:45 | The other web site host comparison chart that I like is
on e-wisdom. Although it doesn't show the comparison quite as well,
| | 03:53 | it does show the features of each web hosting company just
a little bit better and ranks them from its most recommended to
| | 03:59 | its least recommended. So in this one you can see that
Lunar Pages is at the top, whereas in the other website Blue
| | 04:05 | Host was at the top. It doesn't matter what you'd use
but you should get a reliable one and these kinds of sites steer
| | 04:12 | people into the right direction.
| | 04:15 | Typically these comparison Web hosting charts are put together
by users and recommendations of the clients and what
| | 04:22 | the client feedback has been on using these hosting services.
So this is a good place to start. The other place to start
| | 04:28 | is start with your friends and people who already have gone
through this experience and ask them what they like, but
| | 04:33 | cheaper is not necessarily better.
It really helps to look at both the price
| | 04:37 | and the features
| | 04:39 | and then choose one.
| | 04:40 | With the webpage, the browser and the server you have all
of the appliances you need but you need a way to connect to the
| | 04:46 | Internet. There are a number of types available from very
large to very small. The largest one that most of us are
| | 04:54 | familiar with is the T1 line, the one that we think every media
company uses, and the smallest one is the modem, which although
| | 05:02 | used in some early areas and distant areas
in the United States is fast becoming extinct.
| | 05:07 | Most people these days are looking into using either DSL or
cable as a way to connect to the Internet. DSL stands for
| | 05:16 | Digital Subscriber Line and it works with phone lines
and cable works with the cable that actually provides
| | 05:22 | for your cable television.
| | 05:24 | In my neighborhood in Pasadena,
| | 05:26 | these services are provided through what we call communication
service companies. You can get your television, your phone
| | 05:31 | and your Internet service all through the
same company and they're providing that for you.
| | 05:38 | But the most exciting and probably the one we all want the
most these days and hope to have everywhere are WiFi and
| | 05:45 | cellular phone networks, and the reason why is that it
means no wires and it means access at anytime, anywhere,
| | 05:53 | any place. That's why we all want it. It's a little bit like
being in some magic Teflon bubble where we open our computer,
| | 06:00 | click on our browser and we can make that connection.
| | 06:03 | And I think that's fast what we're moving towards and it's
important to understand that as a web designer. So let's take a
| | 06:10 | look to what can it be like to be a web designer in next
two to five years. It actually means that when we're delivering
| | 06:16 | our webpages to the browser that we'll be looking at them
| | 06:20 | on a laptop, on a cellular phones, on a computer, on a movie
screen even maybe. There's going to be a number of ways in
| | 06:27 | which we deliver our Internet content out to a variety of
devices. So when I tell my students to get prepared to be a
| | 06:34 | web designer, I say forget what happened last year. Just
think what's going to be happening five years from now, because
| | 06:39 | they're going to need someone who knows
how to do it and you could be that someone.
| | Collapse this transcript |
|
|
2. Using Your BrowserChoosing a browser| 00:00 | Before you start designing and
developing a web site in Dreamweaver, it's
| | 00:05 | important to sit down with your client
and figure out who the target audience
| | 00:08 | is because you want your web site to
work in all of the browsers that your
| | 00:13 | typical target audience would use. For
instance, if you are working on a web
| | 00:18 | site for a large college campus like
Pasadena City College, you might be
| | 00:22 | testing in eight or nine browsers.
New browsers, unknown browsers, extinct
| | 00:28 | browsers, because you have 23,000
students who will be hitting that campus, who
| | 00:32 | have all kinds of machines, who have
all kinds of ISP connections, who have all
| | 00:37 | kinds of browsers and you want to make
that content accessible to as many as
| | 00:40 | people as possible.
| | 00:41 | However, if you are a small Boutique
Designers, you might only target only two
| | 00:46 | of the top browsers because you know
you have high end clients who are coming
| | 00:49 | to your web site and you are not trying
to target 23,000 people, just a couple
| | 00:53 | 100 top end design companies.
| | 00:57 | That said, let's take a look at what
people are using right now. On this web
| | 01:01 | site called market share, it's
astounding but true that Microsoft Internet
| | 01:05 | Explorer has three quarter of the
market share of browsers. This fact is
| | 01:10 | because with any Windows machine is
sold, by default Internet Explorer is
| | 01:16 | installed on that Operating System.
That is one of the biggest reasons that it
| | 01:20 | is pervasive. The other popular
browsers currently are Firefox, Safari, and
| | 01:26 | Opera. Netscape and Mozilla are
essentially on their way out or becoming
| | 01:31 | extinct. But you might have target
audiences who have old versions of these,
| | 01:35 | and you still might have to test for
these in the future depending on that
| | 01:39 | discussion about what the target audience is.
| | 01:41 | So, Let's take a look at
some of the top browsers.
| | 01:44 | Internet Explorer 7 as I have said
before is the number one browser installed
| | 01:49 | on most machines that are accessing the
Internet. It came out about a year ago.
| | 01:55 | It's had mixed reduced, it's been a
little bumpy but you will be designing for
| | 02:00 | this browser and you will have to get
used to the idea that this is one of the
| | 02:03 | browsers you will be use for testing
and deployment. I keep it installed on my
| | 02:07 | machine all the time and test in it frequently.
| | 02:10 | Second web site I'm going to show you
is the Safari web site. It is produced by
| | 02:15 | Apple. A year ago, most of us didn't
design for this as much because one of the
| | 02:20 | issues was it wasn't cross-platformed.
When choosing a browser for your web
| | 02:23 | site, you want one that works on both
platforms. You want to make it as easy
| | 02:27 | for people as possible. People don't
care if it is Mac or it is Windows,
| | 02:31 | they just want to be able to access the Internet
from whatever machine that they are sitting at.
| | 02:36 | Opera browser is also a great browser.
I do have it installed, I use it, I do
| | 02:41 | test in it. It does follow Web
Standards. It is cross-platformed but I think
| | 02:45 | its biggest drawback is it
is very small market audience.
| | 02:49 | In this course, we are going to be
using Firefox 3.0. It's easy to get to, it's
| | 02:53 | easy to install, it has great support.
It's just three steps. Click on the
| | 02:58 | Download button, follow the
instructions and if you are looking for the
| | 03:02 | applications, if you are on a
Mackintosh it will be in your Applications Folder
| | 03:06 | and if you are working in Windows, if
you go to your Program Files you will
| | 03:09 | find Firefox 3.0 loaded there.
| | Collapse this transcript |
| Installing the Web Developer toolbar and Firebug| 00:00 | Now that I have downloaded and
installed Firefox 3, one of the things that I
| | 00:05 | like to do as a web designer/developer
is to install two extensions that help
| | 00:11 | save me time and are basically like
having a full time person working for me.
| | 00:15 | The first extension is the Web
Developer toolbar and the second extension is
| | 00:19 | Firebug. I'll demonstrate the Web
Developer toolbar first. This extension was
| | 00:24 | designed and distributed by Chris
Pederick. We are on his web site. It adds a
| | 00:28 | menu and a toolbar to your browser and
it gives you all kinds of tools that the
| | 00:32 | web designer and the developer can use
to enhance, test, dissect, validate, do
| | 00:39 | all kinds of things that a designer
needs to do to see how that page is
| | 00:43 | displaying in the browser.
| | 00:45 | It is easy to do. You just click on
the link. If Firefox pops up this yellow
| | 00:51 | bar, go ahead and allow it to make a
pop-up window. When you see the Install
| | 00:58 | Now button turn dark blue, click on it
and that means it is installed, go ahead
| | 01:05 | and restart Firefox. Firefox in its
new version in 3 will try to restore your
| | 01:12 | tabs and windows and go ahead and let
it do that so when it opens again, you
| | 01:16 | won't have lost your bookmarks and tabs.
Another great thing about Firefox 3 is
| | 01:22 | it also gives you a great affordance,
it tells you that, yes, it is been
| | 01:25 | installed. Then you have the option to
disable the extension or to uninstall it
| | 01:29 | at that point.
| | 01:31 | We want it there, so we are just
going to bypass that and close that window
| | 01:35 | out. If you look at my browser now,
you will see that there is a new toolbar
| | 01:39 | that didn't exist there before. This is
the Web Developer toolbar. If you go up
| | 01:45 | to your View menu and click on Toolbars,
you can see that it now shows up in
| | 01:49 | your Toolbar window and the check mark
means displaying. If you want to get rid
| | 01:53 | of it, you just turn that off and if
you need to be using it and you are doing
| | 01:57 | work on your web sites, go ahead and
turn it back on. We will be using it
| | 02:01 | throughout this course.
| | 02:04 | The second extension I would like to
show you is called Firebug. You can get a
| | 02:08 | lot of extensions beside just the Web
Developer toolbar and Firebug on the
| | 02:13 | Firefox web site. They have a whole
section just devoted to add-ons. This is a
| | 02:17 | relatively new extension. It has been
around for probably a year or year and a
| | 02:20 | half. Lots of web designers and
developers are using it. Again the same idea,
| | 02:26 | this integrates into Firefox, it
actually allows you to do live edits to your
| | 02:31 | web pages and preview them in the
browser monitor. That's pretty cool. You can
| | 02:35 | see what it would look like if
you made a change on the fly.
| | 02:38 | So let's go ahead and add it to Firefox.
Again a pop-up window shows up.
| | 02:43 | Once it is ready to install, the button
turns blue, click on the button, Install Now.
| | 02:47 | Yes, it is ready to go. Everytime
you install an extension, you have to
| | 02:53 | restart Firefox. Click on that button,
click on Restart. It gives you that
| | 02:59 | chance to disable it or uninstall if
you are not happy, but we are. This is
| | 03:03 | exactly what we want. I'm going to
click off of it and you will say to me,
| | 03:07 | well, how do we know that
we just installed Firebug?
| | 03:10 | Well, this one is a little trickier
than the last one. It shows up down in the
| | 03:14 | bottom right hand corner of your
browser, you will see a little bug. If you
| | 03:19 | click on that bug, you will see as I
roll over, a tooltip shows up saying, this
| | 03:23 | is Firebug. And there you go. There is
your Live Real-time Editor where you can
| | 03:29 | preview changes on the fly. It is a
fantastic little tool. Firebug is a little
| | 03:35 | bit complicated to use then web
developers, so I just want to show you two
| | 03:38 | other sites that would really help you
get up to speed, if you are not using it
| | 03:42 | all the time. One of the things I have
learned in technology is use something
| | 03:45 | frequently for a couple of weeks and
then maybe you don't use it for three
| | 03:48 | months and you will need a little
refresher course on how to use that tool.
| | 03:52 | So, let's look at this first web site.
This site is CSS, JavaScript and XHTML
| | 03:59 | Explained. It is a great site. I happen
to have bookmark to its material about
| | 04:04 | how to use Firebug. Gives a great
introduction into the use of Firebug, how to
| | 04:08 | install, how to work with it, how
to do things that you need to do for
| | 04:12 | troubleshooting. It is basically a
little online manual, which this web
| | 04:16 | designer has developed for us to really
understand how to get the full use out of Firebug.
| | 04:23 | Second web site that I would like to
take you to is the Firebug Keyboard
| | 04:26 | Extensions. Now, this sounds crazy,
but you saw how difficult it was to see
| | 04:30 | that little bug the first time. If you
have to memorize anything about Firebug,
| | 04:35 | what you need to know is how to open
it easily and so go ahead and learn the
| | 04:39 | Command key. It is F12. Before I let
you do it, I'm going to show one other
| | 04:42 | thing. Once Firebug is installed, if
you need to find it through your menus,
| | 04:46 | you would go up to View > Firebug. Or
as I showed you just a few minutes ago,
| | 04:52 | you can click on the little bug, but
the easier way, the fast way, the power
| | 04:56 | user way is to use your Command
keyboard and you can open this site and you see
| | 05:01 | that F12 or Command+F12 or Ctrl+F12
will open it up in its own window.
| | 05:07 | So, that was easy. We have installed
two extensions. You look like we are power
| | 05:10 | users for Firefox 3 and we look like we
know what we are doing as web designers
| | 05:14 | and developers. Don't be afraid of
extensions. Firefox really can turn you into
| | 05:19 | a power designer/developer.
| | Collapse this transcript |
|
|
3. Deconstructing a Web PageDeconstructing a web page with a browser| 00:00 | Although I'm sure you have all used
browsers before, I want to take a few
| | 00:05 | minutes just to talk about Firefox 3
and some of its new features. But also
| | 00:09 | more importantly, to talk about what
it's going to be like for your users.
| | 00:14 | So let's just talk about this. Let's
see some of the things that people can
| | 00:17 | change in browsers and how browsers
work. First and foremost, a browser is a
| | 00:22 | software application. You must remember
that because of that, it's not a part
| | 00:27 | of an operating system. You can't
expect it to be the same for all people and
| | 00:31 | again, people can choose
which browser they want to use.
| | 00:35 | In this course we are going to be
using Firefox 3.0, a great new browser.
| | 00:40 | If you want more information about the
browser than what I'm going into, I'm just
| | 00:44 | going to go through cursorily some of
the main new features. You can go to the site
| | 00:47 | called computer.howstuffworks.com.
It will talk about features and
| | 00:51 | extensions and the history. I really
suggest on your own time that you go check
| | 00:56 | out Firefox extensions. They're cute
name for that is add-ons, Firefox > Add-ons.
| | 01:02 | So let's go to a site. I'm going to
go to my Digital Media Center site at
| | 01:06 | Pasadena City College and let's look
at the site in the context of how it
| | 01:11 | displays in the browser. So first off
in the browser we have our menu bar like
| | 01:16 | all applications do. But most of us
won't use the menu bar very much.
| | 01:20 | We'll go straight to the toolbar
that displays at the top.
| | 01:24 | Now I want to warn you that any toolbar
that it displays in the browser window
| | 01:27 | can be turned off. So if you ever come
into browser window and notice that your
| | 01:32 | users are using their windows in an
odd way, be sure that you understand that
| | 01:36 | right here in View > Toolbars, the
checkmark means the toolbar is displaying.
| | 01:41 | If it is not checked, the toolbar is
not displaying. A lot of people customize this view.
| | 01:47 | Now, to go to the toolbar, I'm sure
you have all used this before. It looks
| | 01:50 | different. It looks groovier. It is
groovier but these are the same old buttons
| | 01:55 | that you are used to. This goes back
one page. This goes forward one page.
| | 01:59 | What's important here is that as you
roll over you do see a tooltip and that's
| | 02:04 | very helpful. It gives your user an
affordance. If you click on this little
| | 02:07 | triangle here, you will see Recent
Pages that you have looked at and as you can see
| | 02:11 | I've looked it two different pages recently.
| | 02:14 | The Refresh button is sort of a
secret weapon for a web designer. This is a
| | 02:19 | great way to see if there is dynamic
content. When I come to a web site, I like
| | 02:24 | to see what is it going to be like for
the user if they come one, two or three
| | 02:29 | times to the site. In the PCC Digital
Media Center web site, we have made it so
| | 02:34 | that the images refresh every time you
come into the site. I can test this by
| | 02:39 | clicking on the Refresh button.
| | 02:42 | With JavaScript, we are randomly
generating a series of images that every time
| | 02:47 | I click on the Refresh button,
generate a new random image. I like to see
| | 02:55 | if the web fesigner has the intent to
create new experiences and to make it
| | 03:00 | feel like it's a fresh experience and
the Refresh button is a great little tool
| | 03:04 | to see if that's happening.
| | 03:05 | The X button, this button, if you
are in a long download or a never ending
| | 03:10 | download or you think Firefox is
snafu-ing some way, go ahead and click on this
| | 03:14 | X button. It won't take you back to anything,
but it will stop the download process and
| | 03:18 | you can take the time to go back and
enter the new URL. The House icon is for
| | 03:24 | the homepage. By default Firefox makes
all of its downloads go to this homepage
| | 03:30 | but anybody can change this. I think
this is a smart page. It's a Google-like
| | 03:34 | page clearly with the Firefox
branding on it. But in the Preferences,
| | 03:38 | in Firefox you can change this.
| | 03:40 | To go to your Preferences in Firefox,
on the Macintosh you would go to Firefox >
| | 03:44 | Preferences. I'm going to go back to
the Digital Media Center site and
| | 03:48 | I'm going to use the Go Back button to do
that. This was then completely redesigned
| | 03:53 | in Firefox. It looks great, a lot of
good work that is done behind the scenes.
| | 03:56 | But this particular section is what
I usually called the address bar.
| | 04:00 | It is important to note that when you type
in URLs, there is a format that you must use.
| | 04:05 | Typical is the http, which means
Hyper Text Transfer Protocol. You will see
| | 04:11 | other ones as we go through this
lesson including mailto, https. But this is
| | 04:16 | the most standard one. The other
thing to note is that the three-letter
| | 04:21 | extension shows you the kind of
business or institution. In my case, .edu
| | 04:26 | stands for education. This web site is
part of the directory of the Pasadena
| | 04:30 | City College web site.
| | 04:33 | All the new browsers are supporting
this feature, which is that you can insert
| | 04:36 | an icon. A small icon that gives site
identification to your web site. Again,
| | 04:42 | remember people do a lot of scanning
when they are looking at the Internet,
| | 04:45 | not as much deep reading. This is a great
way again to give an affordance back to
| | 04:48 | your users saying, "Yeah, you are on the
right page. You are at the PCC web site."
| | 04:52 | Let's look over on the Right. These
are my new three favorite buttons. If the
| | 04:57 | site has the possibility of being an
RSS Feed, this button shows up. As you can see,
| | 05:02 | you can subscribe to this page.
If you subscribe to this page for the
| | 05:06 | Digital Media Center, you will be
notified about new events, new workshops and
| | 05:10 | new news items.
| | 05:11 | This star is the icon for the bookmark
page. it works a lot like Delicious does.
| | 05:16 | They have made bookmarking easier to
organize inside Firefox and this last
| | 05:20 | arrow gives you a list of all of your
history for what you have been doing in
| | 05:25 | the most recent session.
| | 05:27 | The last bar on the right is the search
engine. Search utility is what we call
| | 05:31 | these. These are called tools. A lot of
people know that it is there but don't
| | 05:35 | know that they can change it. If you
click down on the triangle, you will see
| | 05:39 | that there is the most the most
common search engines available, but if you
| | 05:42 | have got your own particular kinds,
you can click on Manage Search Engines and
| | 05:47 | make your own customized list of
search engines. The way the search engine
| | 05:51 | works, as you probably all know, is you
enter keywords or key ideas and then you
| | 05:56 | click Enter or Return.
| | 05:58 | As you know, there is a button
called Search. This was put in here for
| | 06:02 | accessibility purposes. Screen readers
for people with visual impairment need to
| | 06:07 | have that read to them, what the
buttons do. They don't always know that it
| | 06:11 | is an Enter or Return. So they will be
read out loud to search and then if they
| | 06:15 | want to search, they will hit
Enter or Return on their keyboard.
| | 06:18 | Moving around through browser window,
if you see the sidebar with the blue bar,
| | 06:23 | it means there is more content below
the fold line. And what do I mean by the
| | 06:27 | fold line? Pages can't fold. This is a
newspaper term and it means what you can
| | 06:32 | above the fold of a newspaper and below
and that term is being carried over to
| | 06:37 | web site design as well. What you
can see above the bottom of the browser
| | 06:41 | window bar and what you can see below.
On a homepage you would want to see
| | 06:44 | mostly everything above the bar.
| | 06:47 | As you can see this one scrolls
down quite a bit. I'm at a pretty low
| | 06:51 | resolution. If you were at a higher
resolution, you would be able to see more in
| | 06:55 | this window. Moving down to the bottom
right, you can click on the kind of waffly-
| | 07:01 | like lines here and drag. You can see
that you can change your browser window
| | 07:06 | to any size. This is probably the most
important thing that I can tell you that
| | 07:09 | a lot of people do not browse with
their window at full screen size. They are
| | 07:14 | multitasking. They have got lots of
other applications open at the same time.
| | 07:18 | Notice that with the PCC site, we have
made an attempt to make it a stretchy
| | 07:22 | layout, so that as the browser begins
to get smaller it still works within that
| | 07:27 | browser window.
| | 07:28 | It's something you must consider with
your users, especially as you target your
| | 07:32 | audience and figure what kind of
users they are. Note as in the last lesson,
| | 07:37 | FireBug will show up as a little
icon down here when I roll over it.
| | 07:41 | You'll see the name FireBug and the version number.
| | 07:44 | I am going to go over to the last
button. This part right here on the left is
| | 07:50 | called the status bar. It will change
all the time depending on what you are
| | 07:55 | doing. When you are loading a page,
it actually gives you information about
| | 07:58 | what's loading at the time of the load.
Once the page is loaded, you will get
| | 08:02 | the feedback Done, which is great.
I leave my status bar on all the time.
| | 08:05 | Being a web designer I kind of want to know
how the page is loading, what it's doing,
| | 08:09 | is it doing the right thing? But for
the user they will be rolling over links
| | 08:14 | and they will be using in a little bit
different way. Every time they roll on a link,
| | 08:17 | the status bar actually gives
them the full URL address, which is very,
| | 08:22 | very important.
| | 08:23 | Lots of times people don't have the time,
aren't able to connect, need to know,
| | 08:28 | this is a great way to see what the
actual, complete URL is. And as you can see,
| | 08:33 | as I roll over them, it updates
it down on the status bar. So if you
| | 08:36 | needed to get some information quickly
and write that down and later on come
| | 08:39 | back, you can. I really like this
feature, it keeps people from feeling like
| | 08:44 | they are lost and don't know
where they are being sent to.
| | 08:46 | Another great feature in Firefox 3 is
the History. It's a little bit different,
| | 08:51 | the way it displays in this version. So
if you come up to History and say Show
| | 08:56 | All History, notice that it opens in a
brand new window. Now, a lot of people
| | 09:01 | don't like this because it means you
have another window, another thing to keep
| | 09:05 | track of on your Desktop. But don't
worry. We can display it the old way,
| | 09:10 | the way it works in most browsers. So as
you can see, you can see history, your
| | 09:14 | tags, all your bookmarks and you
can have a lot of control over it.
| | 09:19 | Let's go ahead and click on the red
button or Close box. So if you want to show
| | 09:24 | it up in the sidebar, go back to your
new favorite menu item, View, where it
| | 09:28 | seems to control all things that you
see inside your browser, and choose
| | 09:32 | Sidebar and you will just see you have
a choice between Bookmarks and History.
| | 09:35 | Most people like to see their History.
They use it as a way of kind of keeping
| | 09:38 | track of what they are doing and
voila! There we go. This is what is our
| | 09:43 | History of what we have been doing today.
You can see what you have yesterday,
| | 09:46 | two days ago. You can order the way
you see the view, by date, site visited,
| | 09:51 | last visited. And most importantly,
if you want to close this up, you just
| | 09:54 | simply click on the little icon
with the X and close the sidebar.
| | 09:58 | So, I want to sum up with you that the
browser can make a difference for the
| | 10:02 | user and that as a web designer
designing for your target audience, you need
| | 10:06 | to consider how they might be using
their browser. The main thing I want you to
| | 10:10 | know is they can customize it, do
anything they want. It's a moving target.
| | 10:15 | Don't think that just because you have
your browser set up a certain way, they will too.
| | Collapse this transcript |
| Reviewing the head and body of a web page| 00:00 | So now let's use the browser and the
tools provided for us within the browser
| | 00:05 | to really look at this web page,
dissect it and understand how it works and how
| | 00:10 | it is put together. When I look at a
web page, one of the first things I do is
| | 00:14 | I like to look at the code. Now I know
this is scary, but you got to take some
| | 00:18 | baby steps and just hang in here with
me and let's do this. To find the code,
| | 00:23 | you up to the View menu and choose
Page Source. You will see Command+U or
| | 00:27 | Ctrl+U next to it. Let's use the
keyboard shortcuts to bring up the code.
| | 00:32 | I'll close this window, go up to
my keyboard and type Command+U.
| | 00:36 | There it comes. This is the actual HTML
document. This is the code and what the
| | 00:44 | server and the browser see to
understand how to display your page correctly.
| | 00:48 | It doesn't look anything like what we see
in the browser and yet amazingly enough,
| | 00:52 | all the information that you need is
right here in this page document. I want
| | 00:58 | to take your attention right to the top
of this document. What I'm highlighting
| | 01:02 | right now is called the DOCTYPE. It
is an absolutely essential, mandatory
| | 01:08 | required part of the page. Your
pages and your designs will not display
| | 01:14 | properly without it.
| | 01:16 | If your page doesn't have it, there is
no telling what will happen, when you
| | 01:19 | put it up on the server and it gets
displayed in the browser. There is a lot of
| | 01:23 | information you can learn from looking
at the DOCTYPE, but the most important
| | 01:25 | thing for you for this first time at
looking at it is that we are using what
| | 01:29 | version of HTML to do this page. XHTML 1
.0 Transitional and the language we are
| | 01:36 | using is English. Underneath it, you
will see that there is a URL that actually
| | 01:41 | takes you out to the World Wide Web consortium.
| | 01:45 | So, I'm going to take you out to the
URL that we just saw up in the DOCTYPE and
| | 01:49 | show you what kind of information
gets displayed. I don't expect you to
| | 01:52 | understand this or even to really want
to get to know how to understand it, but
| | 01:56 | I want you to know this is the kind of
information that is being sent back and
| | 02:00 | forth between the server and the
browser so that your page displays correctly.
| | 02:04 | This is called the DOCTYPE. It is
real information that the server needs to
| | 02:08 | know in order how to transmit
information back and forth between the user's
| | 02:12 | desktop and the server.
| | 02:13 | So, let's go back into the web page
that we were looking at before and let me
| | 02:19 | go ahead and bring back up the code
that we were looking at before and a
| | 02:23 | technique that I like to use is to
set them up side by side so that we can
| | 02:27 | actually sort of look at that
presentation and that structure at the same time.
| | 02:34 | So, we looked up the mandatory DOCKTYPE
and the next thing I want to draw your
| | 02:38 | attention to is that we are looking at
one page inside a browser. The way that
| | 02:43 | we know we are looking at one page
inside a browser in the Code view is by
| | 02:47 | looking at the tag HTML.
| | 02:49 | HTML is our sort of pointer that this
is web page. All web pages have this tag.
| | 02:55 | All web pages have tags and the way we
know that they're tags is we see these
| | 02:59 | carets on either side of them. So, if
I select the HTML and scroll down this
| | 03:05 | page all the way to the bottom, you
will see at the bottom of the page I see a
| | 03:12 | close tag and I know that it is a
close tag because it has the forward slash
| | 03:17 | within the tag. That tells me that's
the end of this tag. Everything between
| | 03:22 | these two tags, the opening HTML and
the closing HTML hold the content and the
| | 03:28 | directions for displaying this web
page properly in a browser and then I'm
| | 03:33 | going to scroll back up to the top
and deselect that by clicking outside.
| | 03:38 | There are two parts to every web page
or HTML document and when I say web page
| | 03:44 | and HTML, I'll be using that inter-
changeably. There is the head, let me select
| | 03:48 | that for you and again it will have a
closing tag. I'm going to select the head
| | 03:52 | and scroll down until I find the close
tag. I'll be looking for the word head and
| | 04:00 | looking for the forward slash as an
indicator that that is closing that. So,
| | 04:04 | everything in here is called the Head
tag and it is essentially instructions.
| | 04:09 | The second part on a web page is the Body tag.
| | 04:11 | Let's click on that body tag and scroll
down and there we go. Everything in the
| | 04:20 | body tag is what we see in the browser.
So, let's go out and look at a slide
| | 04:24 | that I have that will illustrate this
just a little bit easier. It is a lot to
| | 04:28 | look at a code page for your first time,
it is a little daunting and a little
| | 04:32 | scary and if you are a designer, it is
not at all what you hoped you would be
| | 04:35 | doing. You wanted to be making pretty
pictures and cool looking web sites with
| | 04:38 | the cool layouts. So, I have created
this slide to make it just a little bit
| | 04:42 | easier for you to understand. I have
talked already about how every page is in
| | 04:46 | a tag called HTML. That's the
shorthand for saying this is a web page.
| | 04:52 | And I have also talked that there is
two parts to every web page, there is the
| | 04:55 | head and there is the body. So, let's
look at this. the head is the thinking
| | 05:00 | part or the brain of the page. It
flip passes the page around and gives the
| | 05:05 | instructions and the good news is it is
invisible to the user because the user
| | 05:09 | don't really want to know how web
pages work, how browsers work, how servers
| | 05:14 | work, they just want to see that page.
So, that's for me, the head tag is the
| | 05:19 | instructions on how to make that page
work and all the parts that need to be
| | 05:23 | part of that page for it to display properly.
| | 05:26 | The second tag that we talked about was
the body tag and when we look at people
| | 05:31 | and go out and stare at people, the
first thing we notice is their body types.
| | 05:35 | So, if you think about it, what we
see in the browser is the content or the
| | 05:40 | body and I have tried to make this
really clear by putting a red dashed line
| | 05:45 | around this to sort of simulate this
is what we see in a browser window. So,
| | 05:50 | everything in the body tag appears in
the browser window, that's the actual
| | 05:55 | stuff we see.
| | Collapse this transcript |
| Understanding the structural elements of a web page| 00:01 | Let's go back to the web page now
that we have a better visual image of that
| | 00:04 | and see if we can play a hide and seek game.
| | 00:07 | So we are back in the web page and we
are looking and we are looking in the
| | 00:10 | Head tag and we are saying gosh,
this seems familiar. A title. I remember
| | 00:16 | seeing a title and Laurie said that
everything that we see in the browser would
| | 00:21 | be in the Body tag. Well, let me
remind you, yeah, you did see that, but you
| | 00:26 | didn't see it in a browser window.
You saw it in the top bar of the browser
| | 00:32 | window. It needs to be in the Head tag
because the title is part of the browser
| | 00:38 | window, not part of the web page.
It's information we are passing onto the
| | 00:42 | browser and then browser displays it up
in the top of the window. So that's why
| | 00:47 | it's in the Head tag.
| | 00:49 | The rest of the information, if you
look back down here, doesn't really display
| | 00:53 | anywhere on the web page. If I look at it,
it's a lot of gobbledy-gook for me
| | 00:58 | the first time, but I do see the word
style sheet and we have talked about how
| | 01:02 | we are separating structure from
presentation and that presentation is style
| | 01:08 | and structure has to do with code.
So we have a pretty good idea that
| | 01:11 | our styles are linked in this case.
| | 01:14 | We also see something called meta
and this is what-- I'm sure you have
| | 01:18 | heard this word meta tags. Ways we
can identify our web site, keywords,
| | 01:22 | descriptions, authors, all kinds of
things like that. And search engines use
| | 01:27 | the meta tags a lot.
| | 01:30 | We see another reference to style. This
is an embedded style. So we are seeing
| | 01:34 | that styles can show up a couple of
different ways in the Head tags and there
| | 01:38 | is a couple of different ways to add
styles to our web page. And as I have
| | 01:43 | pointed out before, more of these
meta tags. This one is really easy to
| | 01:47 | understand. It's called the Description
and if we were using search engines,
| | 01:51 | they would look for these key words to
delimit it and then we can actually add keywords.
| | 01:57 | Now it's important to know you don't
add the whole dictionary; just add those
| | 02:00 | keywords that really apply to your web
page. So that's about all we can see up
| | 02:07 | in the browser. But let's go to the
body part of the page, the second tag that
| | 02:11 | I said is important, and let's see if
there is anything that we can see in this
| | 02:17 | code that we see up there. Well right
off the bat, if I highlight NYPL style
| | 02:23 | Guide Home, I see that up there. Now,
what I see up here is very simple and
| | 02:30 | straightforward. There is a logo
and a very nicely styled Header tag.
| | 02:36 | But down here I see there is all kinds
of stuff. There is a link somewhere in
| | 02:39 | there, there is an image, there is
width and height, all kinds of information,
| | 02:45 | and I see one other thing, really
important, there is tag called H1.
| | 02:49 | And I'm able now that Laurie has told me,
there is the forward slash, there is the end tag,
| | 02:54 | so we can see all the instructions
for that Header up here in this tag.
| | 02:59 | If I take a guess what H1 means,
it probably means Header and I have been
| | 03:04 | thinking about hierarchy or importance.
One means it's the most important.
| | 03:08 | Let's go back up to our page and
look at it. Well, that's true. It's the
| | 03:12 | largest Header tag or Header section on
our page. If we scroll through, it has
| | 03:18 | the most importance. So it's
an H1. Starts to make sense.
| | 03:22 | And if I scroll over it, I see that it
does have a link and it links me to the
| | 03:27 | homepage. I haven't explained this yet,
but a homepage usually starts with
| | 03:32 | Index.HTML, and as you can see
down here, we are seeing Index.HTML.
| | 03:37 | Okay, it's a pretty fun game. I'm
going to give you another problem.
| | 03:41 | Let's do it the opposite way.
| | 03:42 | Let's go up here. I see CSS Steal
These Style Sheets. Can I find that somewhere?
| | 03:47 | And there we go, right down here,
I find it. Again, I see this HREF.
| | 03:53 | That means it's referenced to something
on the Internet, a link to something.
| | 03:57 | I see that it links back to the homepage,
because a homepage usually is an Index page,
| | 04:02 | and what I really want you to
notice is that it's wrapped in a tag called H3.
| | 04:07 | Well, if H1 means Header number 1, most
important, H3 means, it's a lesser tag.
| | 04:15 | It's moving on down the pecking order
or down the hierarchy and as you can see,
| | 04:19 | it's slightly smaller.
| | 04:22 | Again, let's go back up to the web
page and let's click into what looks more
| | 04:25 | like body text. The two CSS files linked.
I'll see if I can find that. Oh! It's the
| | 04:31 | next line of code down here. I can find
that and I can see that it's wrapped in
| | 04:36 | what we call a P tag.
| | 04:38 | By now, you are probably saying, Gosh,
I have seen this stuff somewhere before.
| | 04:42 | Well, if you have ever used Microsoft
Word or if you have ever used a DOS word
| | 04:46 | processing application, you have seen
this before, because what do we do inside
| | 04:50 | our Microsoft Word documents but format,
and when we are formatting and styling those,
| | 04:55 | we are adding tags.
| | 04:56 | And what we usually doing when we are
working in Microsoft Word is we turn
| | 04:59 | those tags off so that we can't see them.
But if you go up into your Microsoft
| | 05:03 | Word document, we all used to work with
them on all the time, you can turn them
| | 05:07 | back on and see the different
formatting tags. So essentially, when I'm talking
| | 05:11 | about tags, I'm talking about format.
| | 05:15 | Let's try a little bit more difficult
one. Let's go back up to the web page,
| | 05:19 | and if you look here, this looks like a
set of instructions, a list basically,
| | 05:27 | and it's a numerical list and going
back to what I know about Microsoft Word,
| | 05:31 | that would be an ordered list. So let's
see if we can find that list down here
| | 05:36 | in the code. Right off the bat, there I
see it, there is the list. I don't see
| | 05:42 | any numbers, not anywhere are there
any numbers. But in front of each one of
| | 05:46 | the list items, I see the word li,
which means it's a List Item. L for list,
| | 05:52 | I for item.
| | 05:53 | And I did mention saying that it's an
ordered list because I know about those
| | 05:57 | from Microsoft Word and there we have it.
ol, the shorthand for Ordered List.
| | 06:02 | So if I click all the way down here and
grab this whole content, that is the tag
| | 06:08 | that says this text that's displaying
in here is going to be an Ordered List
| | 06:12 | and every time you see the word li,
put it on a separate line, and this would
| | 06:17 | be a Numerically Ordered List. Wow!
I'm feeling pretty good. I know a lot more
| | 06:22 | about HTML than I thought.
| | 06:24 | We could keep going down this page,
looking through and trying to figure out
| | 06:28 | each section of this page by doing
that. Let's try one more. Let's look for
| | 06:32 | Sophisticated style sheet. If I can't
find that, a little tip I can give you is
| | 06:36 | you can click up here and use your
Find and you can go down to the bottom of
| | 06:42 | your web page and type
"sophisticated" and looking for style sheet and
| | 06:50 | hopefully it will get us down into that area.
| | 06:55 | So by using the Find tool up at the top,
I was able to find Sophisticated Style Sheet.
| | 07:00 | I see that it matches what I'm
looking at up here. I see that it's got a
| | 07:05 | lot of tags wrapped around it and tags
that I don't really understand. And this
| | 07:10 | is a little bit more advanced, but
it's basically what we call a Definition
| | 07:13 | List. So you are not going to know all
of these tags and that's really okay on
| | 07:17 | this first round.
| | 07:18 | What's really important is that you
understand that as we go through the page
| | 07:22 | and look for things, like this word
Linking, that if we look through our code,
| | 07:27 | we will find something that correlates
to that. And H4, we already know about
| | 07:32 | headers, this makes sense. This is a
smaller tag, a smaller heading, and so
| | 07:37 | we are seeing what it's called an H4.
Not an H1, not an H2 or an H3. So we are
| | 07:42 | beginning to understand how we can go
through what we see to understand how
| | 07:48 | it's given to our browser to display.
| | 07:51 | The next thing I want to show you is
how do we find out where the presentation
| | 07:55 | style sheets are. We have to go back
up to the Header, and the reason we go
| | 07:59 | back up to the Header is because
instructions and all things related to this
| | 08:03 | page will be mentioned in the Header
tag. So, I would like to scroll down just
| | 08:08 | a little bit and show you that you can
actually have styles defined inside the
| | 08:13 | Header tag. This is what is called an
embedded style and in later movies, I'll go
| | 08:17 | over this again and again. But there
is just one style here for the moment.
| | 08:22 | If we scroll back up to the top, we see
the tag link and what I really caught
| | 08:27 | my eye was style sheet. Oh! This makes
sense. Let's try to translate this into
| | 08:31 | human language. Link to a style sheet.
Okay, attach this style sheet to this
| | 08:36 | web page is essentially what that means.
| | 08:39 | I want you to select after the
forward slash mark, right up to the end, and
| | 08:45 | that's our file name with its directory.
This is a cool, hot tip I'm going to show you.
| | 08:51 | We are going to do Command+C,
go back up to our web page, delete
| | 08:57 | everything except for the Root folder,
then paste what we just copied. Hit our
| | 09:05 | Return or Enter key, and voila! There
is the Web style sheet. The cascading
| | 09:13 | style sheet appearing in our
window with all the styles.
| | 09:17 | Again, I know for you it's probably a
little intimidating, but a lot of it
| | 09:20 | probably you can say oh, I see they
are using Georgia as the font. I can see
| | 09:25 | that that word is Bold. So a lot of
these things that we have been talking
| | 09:29 | about, even though you don't know
anything about style sheets, you can start
| | 09:32 | to understand how this page is styled.
| | 09:35 | Again, getting back to that
concept of separating our structure from
| | 09:40 | presentation. Okay. I'm going to hit
the Back button to go back to our original
| | 09:45 | page and go back down in here,
and I notice that there is another style
| | 09:51 | and it's attached in a
different way. It's attached as an import.
| | 09:55 | It means it's imported into.
| | 09:57 | So, even just by looking at the Head,
I found out there's three ways that I can
| | 10:01 | style the page. I can have it
embedded in my HTML document, I can link to a
| | 10:07 | style sheet and a third way, I can
actually import a document into the HTML
| | 10:14 | document. Let's try this again. After
the forward slash, to the end of the doc,
| | 10:21 | the dot three-letter extension, do a
Command+C or Ctrl+C. Delete everything up
| | 10:28 | to our Source folder in the directory
line. Do Command Paste. Hit Return or
| | 10:35 | Enter. Wow! We were able
to find another style sheet.
| | 10:41 | Now I'm guessing from looking at the
name "sophisto" that it doesn't mean
| | 10:45 | "mephisto," like double, but it
means the Sophisticated style sheet.
| | 10:49 | Let's go ahead and hit our Back button.
And the great thing about this web page is
| | 10:55 | that it actually describes exactly what
you and I just did. It talks about the
| | 10:59 | three different ways that you can have
a Presentation added to a web page.
| | 11:04 | It talks about the link, the embedded
style and even the Sophisticated style and
| | 11:10 | then explains this all. If you like
this page, it's a great page to bookmark
| | 11:14 | and really will help you as a beginner.
| | 11:16 | I just want to sum up some of the things
that we learned. The browser is a great
| | 11:21 | web design tool. It's a way for us to
look, dissect, analyze and understand how
| | 11:26 | web pages work. We can see the code,
we can find out where the styles are
| | 11:31 | located, and we can look at the way
the page is displayed in the browser.
| | 11:35 | So without knowing anything, without
knowing any code, without opening up
| | 11:39 | Photoshop, opening up Dreamweaver, we
already have a great understanding of
| | 11:44 | how this web page works. This works
with any web site that you put in here.
| | 11:49 | I would recommend at this time that
you take the time while you have got it
| | 11:53 | fresh in your mind to go out, pick a URL
and try doing this on your own. Seeing
| | 11:57 | if you can find a style sheet, seeing
if you can locate the code and seeing if
| | 12:01 | you can identify those three important
parts of the web page that I want you to know:
| | 12:05 | the Doc Type, the
Head and the Body. Good luck.
| | Collapse this transcript |
| Using the Web Developer toolbar to reveal the CSS| 00:00 | In the last movie we looked at Firefox
3.0 and saw how the browser actually
| | 00:05 | has features to help us understand the
construction of a web page. We were able
| | 00:09 | to view the HTML source, we saw where
the style sheets were located, we looked
| | 00:15 | at the View and the Preferences that
the user can actually change, and how the
| | 00:19 | viewport will actually change if they
make those changes. In this movie we will
| | 00:24 | look at the Web Developer toolbar.
The toolbar appears right below your
| | 00:28 | Navigation toolbar. If you go up to
the View menu and click on Toolbars,
| | 00:34 | you can see that you can toggle this
toolbar off and on. We will leave it on
| | 00:39 | for the moment.
| | 00:40 | The first feature that I want to show
is the CSS dropdown menu. So let's click
| | 00:45 | on CSS, scroll down to Disable Styles,
move our mouse over to the right and
| | 00:51 | look at All Styles, and notice there is
a keyboard command associated with it,
| | 00:55 | Command+Shift+S or Ctrl+Shift+S. This
previews the web page with no styles
| | 01:02 | tuned on-- or so you would think.
However, let's go back up and try this one
| | 01:07 | more time. Let's click on the CSS
dropdown menu, click on Disable Styles, turn
| | 01:12 | that off, remember these are all
toggles, click again on CSS, scroll down to
| | 01:19 | Disable Styles, but this time let's
turn off all Browser Default Styles.
| | 01:24 | What you may not realize is that each
browser has its own set of style sheets
| | 01:28 | as well. Now that we have turned
those off if you look carefully at the web
| | 01:32 | page, you will see that it looks
compressed, and it's squished together.
| | 01:36 | Let's go back up to the CSS dropdown menu,
scroll down to Disable Style Sheets.
| | 01:43 | Again, let's turn off all styles, but
notice we have the browser's default
| | 01:46 | style turned off as well and this is
truly looking at the page with no styles
| | 01:52 | at all. We have neither the default
browser styles, nor the styles that were
| | 01:57 | designed by the web designer or
developer. There are no margins, there is no
| | 02:01 | padding, we simply have text and images
and the default styling for the links,
| | 02:07 | and that's all that's there. This is a
bare-bones HTML document. To turn this
| | 02:12 | back on, click on the CSS dropdown
menu, go to Disable Styles, click on All
| | 02:17 | Styles and you still have one more
step to do. Remember we turned off the
| | 02:22 | Browser Default Styles. Let's click
on CSS, let's scroll down to Disable
| | 02:27 | Styles, and toggle off Browser Default
Styles. Yay, we are back to square one.
| | 02:35 | This is the way the page
should properly display.
| | 02:37 | The second feature I want to show you
in the dropdown CSS menu is View CSS,
| | 02:43 | Command+Shift+C or Ctrl+Shift+C. This
is a very important tool. It shows you
| | 02:49 | all the styles associated with that
web page. In this case there are embedded
| | 02:53 | styles, there is the Simple style sheet,
and if we scroll down to the bottom,
| | 03:01 | you can see we also have the
Sophisticated style sheet. I'm going to scroll
| | 03:05 | back up to the top, all the styles
display, you can toggle them open or closed,
| | 03:12 | Collapse All, Expand All, but one
other great feature is that if we simply
| | 03:16 | click on the title of the style sheet,
it opens that actual document. Look up
| | 03:23 | at our URL, see the actual navigation
and directory to the style sheet, and
| | 03:28 | shows us that style sheet. This is
great for beginners or new people doing web design.
| | 03:33 | It's a way you can print these,
you can look at them, study them,
| | 03:36 | see how people did things. It's a great
way to check to see if things are set up
| | 03:39 | correct, how they have commented, the
order that they have put their tags in
| | 03:43 | their styles in the style sheet.
| | 03:45 | To get back to the page, we just
simply click on the Tab and close it, and
| | 03:49 | we are back into the page one more time.
Let's click on the CSS dropdown menu
| | 03:55 | again and scroll down to Display CSS
Media Type. This page doesn't really work
| | 04:01 | for this feature, but I wanted to
mention it because more and more web
| | 04:04 | designers and developers are creating
style sheets for hand-held devices, for
| | 04:08 | cellular phones and for print. You can
attach more than one style sheet to any
| | 04:14 | web page and many, many companies are
requiring that the actual HTML document
| | 04:20 | style sheets work for a variety of
media. So this is an important one to look at
| | 04:24 | on your web pages as your
checking to see how they are developing and
| | 04:27 | designing. I'm going it let
go, go back up to the top.
| | 04:31 | The last feature I want to show you
is the most fun feature, the scariest
| | 04:34 | feature, but one I highly encourage you
to use. Let's click on CSS. Scroll down
| | 04:40 | to Edit CSS, Command+Shift+E or
Ctrl+Shift+E. As you can see your window
| | 04:46 | radically changes. It actually feels
like you are in an editing document.
| | 04:51 | At the bottom you can see your style sheets.
They appear a simple tabs, so you can
| | 04:55 | see Simple, Sophisticated, Embedded.
We'll go back to Simple, but again, all of
| | 05:01 | the style sheets attached to this web
page appear. The cool thing about this is
| | 05:05 | we can actually change things on-the-
fly in real-time. Let's look at the body tag.
| | 05:10 | You will see that there is a style
called color. That's the color of the font.
| | 05:14 | Currently, the font color is black.
That's its default color. I'm going
| | 05:18 | to select the black or the
hexadecimal for the color black and type in the
| | 05:23 | word Red. Generic colors can be typed in.
| | 05:26 | And notice without doing anything, it
instantly updates in the preview of the
| | 05:30 | web page. This let's me see what my
web page looks like with all of the fonts
| | 05:35 | red and to decide whether that's a
feature I like, does it look better.
| | 05:39 | It's really important as a designer and
developer to experiment, to try things out.
| | 05:43 | You don't want to be bossed around by
the code or by the style sheets, but you
| | 05:47 | want to be in control doing the
best job that you can to present the
| | 05:50 | information with the best design.
| | 05:53 | To get back to normal, you click on
these two little green arrows chasing each
| | 05:57 | other. That resets everything and you
are back to normal. There are few other
| | 06:02 | features I would like to show you.
This button right here allows you to change
| | 06:06 | the view of your document. You can have
it be side by side. A lot of designers
| | 06:11 | and developers like this. They like to
have the code in a vertical side-by-side
| | 06:15 | position and then to get out of this
particular tool you just simply click on
| | 06:19 | the red X. As you can see the Web
Developer toolbar has a lot of powerful
| | 06:24 | tools and the CSS is one that you will
use frequently to see how other people
| | 06:29 | are designing their web pages and also
to try different things in your own web pages.
| | Collapse this transcript |
| Using the Web Developer toolbar to investigate images on a page| 00:00 | The next dropdown menu that we will
explore is Images. A powerful way to view
| | 00:06 | your web site. Let's click on the word
Images, see the dropdown image, and the
| | 00:11 | first one that I would like to show
you is Disable Images and we will choose
| | 00:14 | All Images. Wow! Now there is no
images on the page. All we see is text.
| | 00:21 | You may ask why is this important? But
with complicated web sites, or you are
| | 00:26 | looking at complicated web sites and
layouts, turning off the images is a great way
| | 00:29 | to see the bare-bone structure of
the web site, and to learn how it's structured.
| | 00:35 | Let's click again on Images > Disable
Images and toggle that back on.
| | 00:41 | Let's click on Images and look at the
dropdown menu. You will see there is a section
| | 00:45 | with a lot of different attributes of
images. We are going to look at these
| | 00:50 | attributes one by one, but it is
possible to turn them all on at the same time,
| | 00:55 | it's a little confusing for the
beginner web designer. Let's look at Display
| | 00:58 | Alt Attributes first. This is an image
and this is its Alt tag. Alt tag means,
| | 01:04 | Alternative Text. If you are targeting
a disabled audience, or you are trying
| | 01:10 | to make your site 508 Compliant, or
WAI Compliant, it's necessary to add Alt
| | 01:15 | tags. I generally always add Alt tags,
and it's considered to be a Web Standard
| | 01:20 | to do so, despite who your target audience is.
| | 01:24 | So, what would happen is the screen
reader would see the Alt tag, and read it
| | 01:28 | to the visually impaired user, and in
this it would read NYPL Style Guide.
| | 01:34 | Let's go back up to the Images, toggle
that off, click on Images again, scroll
| | 01:41 | down and let's Display Image
Dimensions. This is a great tool again for
| | 01:46 | beginner and intermediate web designers.
A lot of people migrating from print
| | 01:51 | to web don't have any idea, what size
to make things, or how they look in a
| | 01:55 | browser, or what size or proportion it
will be in a browser. When you turn on
| | 01:59 | this attribute, you get the exact size
of the image in pixels. The width comes
| | 02:04 | first, then the height.
| | 02:05 | So, in this case, this image is 425x50,
I use it frequently, and it's very,
| | 02:11 | very helpful, especially if you go to
a web site and see something that you
| | 02:13 | like, or you think it's the right size,
or has about the right weight or scale
| | 02:16 | to it. Let's return to Images dropdown
menu, toggle that off, click on Images
| | 02:23 | again, and let's click on Display
Image File Sizes. This is an overlooked
| | 02:29 | feature that beginning students and
lots of web designers don't pay attention
| | 02:32 | to, even experienced one, but it's
important to look at you file size, every
| | 02:36 | image on your page adds weight. It
adds additional weight outside of what the
| | 02:40 | HTML document is, outside of what the
CSS style sheets are. It's important to
| | 02:45 | look at this and to try to make very
small clean mean images, this one is 3KB,
| | 02:51 | which is very small, and it's a GIF.
| | 02:53 | Let's click up to Images, toggle
that off and now let's click on Images >
| | 03:00 | Display Image Path. This is my favorite
feature, because if you are not a good
| | 03:05 | typist, or you don't know how to find
things, this really does say. This is
| | 03:08 | where these images are, and occasionally,
we would like to see it in image and
| | 03:11 | see how it's constructed to see
whether it's a GIF, a JPEG, how closely they
| | 03:15 | cropped it, all kinds of things.
| | 03:18 | So you look at your source to
understand where the directory and the name of
| | 03:21 | the file is, click up in the address bar,
Delete, type in Images, which is the
| | 03:30 | folder. /styleguidehead.gif and click
Enter or Return. Yeah, that takes you
| | 03:42 | right to the image. If you right-
click on this image, you can see there is
| | 03:46 | number of things you can do. Copy it,
save it, send the image. This is great.
| | 03:50 | It gets you right to the image and
you can look at the image in your own
| | 03:54 | photo-imaging editor and
see what's going on here.
| | 03:58 | To get back to your web page, you just
click on the Go Back button and there we
| | 04:02 | are back in there. Let's toggle that
feature off, go up to Images > Display
| | 04:07 | Image Path. If at any time when you are
using Web Developer toolbar, you can't
| | 04:11 | get back to where you want to get,
just hit the Refresh key up here, and that
| | 04:15 | will take you back to where you want
to go. Let's click on Images and choose
| | 04:21 | View Image Information, and this is
one of my all time favorite features.
| | 04:28 | All of the images that appear in this web
site, whether they are background images
| | 04:32 | or actually content images,
will appear on this page.
| | 04:35 | In this case, the first piece of
information that we find out is that there are
| | 04:38 | three images that are related to this
page. This works just the same way as
| | 04:42 | that CSS Display Information works.
| | 04:46 | The first image is a GIF, which is
basically white or invisible. Second image
| | 04:50 | is the background image or logo that we
saw on the upper left-hand corner, and
| | 04:54 | third image is the one which we just
went to the style guides. So what we
| | 04:57 | thought was text is actually an image,
and this is even easier then what I
| | 05:02 | showed to you before. But before I
click out and show you how to get there,
| | 05:06 | notice it gives you the size, the file,
all of the features, all of attributes
| | 05:10 | are in one place. So if you want a one-
stop shop, get everything you need, this
| | 05:16 | is the feature to use in the Image
dropdown menu, here we go. So easy! No
| | 05:21 | typing, no thinking, no looking for
style structure. Let's click out of that
| | 05:26 | and go back to our original page.
| | Collapse this transcript |
| Using the Web Developer toolbar to outline a page| 00:01 | Let's move over to the Outline dropdown
menu, click on it, drag down to Outline
| | 00:07 | Block Level Elements. This is a very
powerful feature. I know we haven't really
| | 00:13 | designed our first web page yet, but
I want you to know that essentially
| | 00:17 | everything on your page is made out of
a block or a rectangle, and this gives a
| | 00:21 | visual image of what that looks like.
It's also color coded. So the layout
| | 00:27 | images or div tags are usually blue, as
you can see here, the h1 tags which we
| | 00:32 | learned about, which are the header
tags, are red and list tags are green, but
| | 00:37 | we could even make this display with
more information that will make it more
| | 00:41 | valuable to the web designer.
| | 00:42 | So let's go back up to Outline and go
all the way down to Show Element Names
| | 00:48 | When Outlining. Wow, this really makes
it clear. It not only shows the block,
| | 00:54 | or the rectangle, or the box, or the
division, and all these words get used
| | 00:58 | almost interchangeably when people talk
about layout, but it also gives you the
| | 01:02 | tag that is associated with each of the
blocks. It shows you how the blocks are
| | 01:08 | nested, it shows you the order in
which they appear, and it gives the idea of
| | 01:12 | what the actual structure or the
wireframe as web designers call it, of the
| | 01:17 | page is. If we go back up to the
Outline dropdown menu and turn off Outline
| | 01:22 | Block Level Elements, and come back in,
and turn on Outline Current Element,
| | 01:28 | you will notice that again we get the
extra dialog box up here, and as we roll
| | 01:35 | over different parts of the site, it
automatically shows us one block at a
| | 01:39 | time, so we don't have to see all of
them previewed all the time, we can see
| | 01:43 | just one at a time, and really dig down
into the site. For instance, we can dig
| | 01:48 | down into here, and then into here, and
then out, all the way as I said back to
| | 01:53 | the original tag that holds the
whole web page HTML. Great tool,
| | 01:57 | really powerful, very helpful when you are
beginning to start doing layout and design in HTML.
| | Collapse this transcript |
| Using the Web Developer toolbar to resize the window| 00:01 | Let's look at the Resize dropdown menu.
This category is important for a number
| | 00:06 | of reasons. We need to know what size
monitor our target audience uses, and we
| | 00:11 | need to look at our web page
in a variety of window sizes.
| | 00:15 | The first one that I like to look at
is Display Window Size, and it makes a
| | 00:20 | little dropdown warning info box here,
and it shows you the window height, and
| | 00:24 | it shows you the viewport height and
width as well. It's not really in a good
| | 00:28 | location, it can't really work around
it, it's okay, and it's kind of scary
| | 00:33 | with that warning sign. So let's click
OK out of that. Let's click on Resize
| | 00:36 | dropdown again, and let's
choose Display Window Size In Title.
| | 00:42 | This one is a much more efficient
and helpful tool for the web designer,
| | 00:46 | because as you can see, the browser
window size displays here, and in the
| | 00:50 | brackets you see the viewport. If I go
down to the bottom of the page, click on
| | 00:55 | the right corner and start resizing it,
it will automatically update both the
| | 01:00 | browser window size and the viewport
size, and let me see how my page looks in
| | 01:05 | a number of different browser window
sizes. I'm going to click on the green
| | 01:10 | button to go back to full size, and
return back to the Resize dropdown menu and
| | 01:15 | toggle that off.
| | 01:16 | What I want you to notice next is its
default window size is 800x600, and this
| | 01:21 | is the default size for a essentially
15 inch to 17 inch monitors, although I
| | 01:26 | believe personally that most people
have 17 inches and above these days because
| | 01:30 | cost of monitor has gone way down.
But a lot of companies have strict rules
| | 01:34 | about what browser sizes you can target,
and 800x600 is still used by a lot of
| | 01:39 | web design and development companies.
| | 01:41 | So that sends to an 800x600 window and
let's see what your web site looks like
| | 01:46 | in that size. You can change this easily.
I'm going to go back and extend to my
| | 01:51 | full screen again, and you can come up
in Customize that window size by going
| | 01:56 | down to Edit > Resize Dimensions. In
this dialog box, you would click on the
| | 02:02 | Add button, put in the dimensions that
you want to target, you can put them in
| | 02:07 | any order you want, you can delete them,
and it gives you a wonderful way at
| | 02:11 | looking at your web site in several
viewports, and several window browser
| | 02:15 | sizes, and keeping a library that your
firm, or your design company, or your
| | 02:20 | client want to target. I'm going to
cancel this. I'm not going change this. I'm
| | 02:24 | going to leave it at its default.
| | 02:25 | The Resize toolbar is an easy toolbar
to use. It's a great way to target your
| | 02:32 | web site in a number of different
sizes to target certain screen and monitor
| | 02:37 | sizes, and to preview what your
web site looks at different scales.
| | Collapse this transcript |
| Using the important miscellaneous tools in the Web Developer toolbar| 00:01 | Let's take a look at the Miscellaneous
dropdown toolbar. It's often overlooked,
| | 00:06 | but it's one of my favorite toolbars,
because it has some very sexy fun tools
| | 00:10 | to use. Click on it, drag down, and
what we are going to look at is Display Ruler.
| | 00:16 | I love this tool. Notice that my
cursor changes to a cross hair.
| | 00:23 | I click-and-drag in a diagonal motion,
and voila! I can see the size and
| | 00:28 | the measurement of the object I have chosen.
In the first part you see the width
| | 00:33 | and height, and in the second part you
see the position, you can go up here and
| | 00:38 | edit these if I want to see what it
looks like at 450 and 50, to see what that
| | 00:42 | shape would like, would that be more
aligned with what I want, I can do that.
| | 00:47 | To draw somewhere else, you just
simply click, draw again, and as you can see
| | 00:52 | it gives you a great way of choosing
and looking at things and I can guess this
| | 00:56 | image is about 200x200. One of the
ways I actually use it in a real way is
| | 01:01 | like, I like to see where this margin
is. It's about 100, 102 pixels. I like
| | 01:06 | this margin here. How far down to we
start from the top of the browser window?
| | 01:11 | 50 pixels. It's a great way again for
beginners and intermediates to get a
| | 01:16 | sense of what size or what dimensions
they should be putting in for margins and for padding.
| | 01:22 | Let's click again on the Miscellaneous
dropdown menu, toggle that off, click
| | 01:27 | again on Miscellaneous dropdown, and
choose Small Screen Rendering. It's a
| | 01:32 | great tool to actually use with clients.
If they say, well, what does this look
| | 01:35 | like on a hand-held device? What the
Web Developer toolbar does is simulate
| | 01:41 | what it would look like on an
alternative device, particularly a hand-held
| | 01:45 | device like a cellular phone or a PDA.
It's not actually your web site but
| | 01:50 | gives them a guesstimate of what it
might preview like on one of those devices.
| | 01:55 | Again, a very nifty tool, and one that
it will wow, your clients and make them
| | 01:58 | think you know what you are doing.
| | 02:00 | There is one more tool in the
Miscellaneous toolbox I'd like to show you. Let's
| | 02:04 | click up here, dropdown, and let's go
to the Edit HTML. I don't know why it's
| | 02:11 | buried here, I thought it should be
under View > Source, it's not, it's not
| | 02:14 | where you would intuitively think it
should be, which would be near your code.
| | 02:19 | This is a wonderful toolbar just like
what we saw with the CSS toolbar. Again
| | 02:23 | it has the Find and Search feature
right here. It shows you your HTML page and
| | 02:29 | the body tag right here, and it shows
you all the tags that you have within
| | 02:32 | that page. If we go down here and we
want to play with it, again, we are back
| | 02:36 | in the sandbox, we can take the h3 and
say I would like to see what would look
| | 02:40 | like as an h1. It will automatically
update without me clicking on anything or
| | 02:45 | hitting any Return buttons, and you can
see that it now previews as an h1. If I
| | 02:50 | come back into the h1, and I want to
see it smaller, let's say h5, again, it
| | 02:55 | automatically updates in the browser
window, and I can see what it looks like
| | 02:59 | much smaller.
| | 03:00 | A great way to try out a lot of
different things without making any mistakes,
| | 03:03 | and really making your style and your
design work. To go back to the original,
| | 03:08 | just simply click on the two arrows,
Reset All, and there you go, you are back
| | 03:13 | to the beginning. To close out of this
window just click on the red x-icon, and
| | 03:18 | you are back in your web page.
| | 03:20 | So don't be afraid to Miscellaneous. I
think the best-kept secrets of the Web
| | 03:24 | Developer toolbar reside in there.
| | Collapse this transcript |
| Using the Web Developer toolbar to validate a page| 00:01 | So to look at the HTML code, we use
the View Source dropdown toolbar. I want
| | 00:07 | you to see that it's very similar to
the browser in that instead of Command+U
| | 00:12 | or Ctrl+U, it's Command+Shift+U or Ctrl
+Shift+U. It's important to know that
| | 00:18 | it's slightly different using the Web
Developer toolbar. As soon as we do that,
| | 00:23 | it opens down in our page. It looks
exactly like what we would have seen in
| | 00:28 | the Firefox browser. I want you to know
there is really no difference between them.
| | 00:32 | It has the same different menu bar up at
the top and to click back into our page,
| | 00:36 | we just would click here. To click out
of this, we click on our Close box and
| | 00:41 | there we are.
| | 00:43 | The last tool that I'm going to show
you is the Tools dropdown menu. You click
| | 00:47 | on this. At the top I want you to see
that there is a number of features all
| | 00:51 | grouped together and these are called
Validation links. These look at your web
| | 00:55 | site to make sure that it's correctly
written CSS. That's it's correctly written
| | 01:00 | HTML, that you are meeting by the way
compliance, that you are meeting the WAI
| | 01:05 | standards, and these are the tools that
you must use and will use when you are
| | 01:09 | working with real clients in the real
world. At the end of every project and
| | 01:14 | at certain points throughout the project.
I'm not going to demonstrate these right now.
| | 01:18 | I will demonstrate Display Page
Validation, a tool I really do like. You click
| | 01:23 | on this and it adds another toolbar to
your menu up here. Notice right off the bat,
| | 01:28 | it starts going through all the
validation tools that we just saw.
| | 01:32 | It starts with HTML. Notice we have got
a valid, a green check mark. It's going
| | 01:37 | onto the CSS and it will continue
going through the different validators.
| | 01:41 | We won't wait right now to look at all of
those, but I wanted you to know this is
| | 01:45 | a great way to take a coffee break and
validate your web site at the same time.
| | 01:48 | I'm going to click on the Tools dropdown menu
and toggle off Display Page Validation.
| | 01:56 | The last tool I want to show you is
the Validate Local HTML. This is a great
| | 02:02 | tool and one frequently overlooked.
Again, many of the validators only will
| | 02:07 | validate if your site or your page is
on a server, but a lot of times we want
| | 02:13 | to do validation locally. You can do
this inside of Dreamweaver CS4, but you
| | 02:17 | can also do this with your Web
Developer toolbar. You simply go to the File
| | 02:22 | text box, click on the button Browse,
it takes you out to your Desktop or to
| | 02:27 | your files. Navigate. In this case,
I'm going to navigate out to Documents,
| | 02:31 | go to my web site that's complete, choose
my final web page, which is done in HTML,
| | 02:37 | click Open, and without doing anything,
without touching any buttons, hitting
| | 02:42 | Enter, hitting Return, you get your
result immediately and I got the green.
| | 02:48 | Passed the validation. If I had
not had a pass validation, this color text
| | 02:54 | would be red and would also indicate
all of the mistakes, and things that I
| | 02:58 | would need to change or to look at. And
now we just click on this tab to close
| | 03:02 | the validation toolbar,
and we are back to our page.
| | 03:06 | I hope you are impressed with the Web
Developer toolbar and some of the pro
| | 03:09 | features that it allows a web designer
and a web developer to use and to
| | 03:13 | implement and it's a great learning
tool as well. At this point take some time
| | 03:18 | to go out to our favorite URLs and
play around with the Web Developer toolbar.
| | 03:22 | It's a fun tool and you will learn a
lot about web design, style sheets, HTML
| | 03:27 | and how pages display in the browser.
| | Collapse this transcript |
| Exploring a website using Firebug| 00:02 | Let's take a moment to look at Firebug,
the other extension that we loaded in
| | 00:06 | previous lessons. There are several
ways that you can access Firebug. One way
| | 00:11 | is to go up to View > Firebug. That
brings it up. And then to close it, you go
| | 00:17 | to the right side and click on the X
icon, and that closes Firebug. You can
| | 00:22 | also, which is the one I use mostly,
go to the bottom right of the browser
| | 00:26 | window, click on the icon that looks
likes a bug, and that will open it up as
| | 00:30 | well. And there is a third thing that
you can do which is to click on this Up
| | 00:35 | Arrow and that will make it open up in
its own window. Again, that depends on
| | 00:40 | your style of working and whether you
like to have multiple windows open or
| | 00:43 | not. I'm going to use the method
that I like which is I go down to bottom
| | 00:48 | right, click on Firebug, and that way
I've the split screen, so I can see not
| | 00:53 | only the web page I'm looking at in
the browser but also what is going in Firebug.
| | 00:58 | Now I have it set up so that Firebug
is looking at the Console number one and
| | 01:03 | when you see this, don't be afraid.
It's heavy-duty stuff. It's important stuff
| | 01:07 | but what I would like you to do right
now is go ahead and click on Script and
| | 01:11 | Net and then finally click on the
button at the bottom that says Enable
| | 01:16 | Selected Panels for this particular
web page. What is that doing right now is
| | 01:20 | going in the background and checking
how fast your page is going from the
| | 01:24 | server to the browser and that's a
really important feature, which I'm going to
| | 01:28 | show you right now.
| | 01:30 | If you click on the word Net, which
would be network or the internet, you will
| | 01:35 | see that if you have the button All
selected, you see all the pages and all the
| | 01:40 | parts of the web page that are
necessary for this page to successfully
| | 01:44 | download. We've looked at this page a
lot, so you will see there is your HTML,
| | 01:47 | the two style sheets that are linked
externally, and the three images. All of
| | 01:54 | these items are needed for this page
to successfully display in the browser.
| | 02:00 | What's great and a very visual way on
the right side is that, you see a bar
| | 02:05 | seeing how fast each one of these is
loading. And as you can see, the HTML
| | 02:09 | document takes the longest to load and
these very, very small images take the
| | 02:14 | shortest amount of time to load. You
can look at it also just by HTML, CSS or
| | 02:21 | Images. So this is a great way for
beginners to see, if their images are taking
| | 02:26 | too long to download.
| | 02:28 | There is a couple of other features I
want you to see. I'm going to go back to
| | 02:31 | All. Remember you have to be Superuser
to use this, but if you want to open up
| | 02:36 | any of these things that you are
rolling over like your style sheets, you
| | 02:40 | simply right-click and say Open in a
New Tab. This is very fast, very easy and
| | 02:46 | very visual. You don't have to go
through all those menus and toolbars that you
| | 02:51 | do in the Web Developers toolbar or
what you need to do inside of the browser itself.
| | 02:56 | So it's a very fast tool, it's easy to
make mistakes, it' s easy to click on
| | 03:00 | the wrong thing but I just wanted to
show you a couple of other things. If you
| | 03:04 | click on HTML, you see your page
structure and this is very helpful, again to
| | 03:10 | understand the structure of the a web
page. It shows you the HTML, which is the
| | 03:15 | web page. It shows you the two parts
that we have been talking about. It is
| | 03:18 | actually teaching you, you
need the head, you need the body.
| | 03:21 | And if we want to see what's going to
be displayed in the browser, we are going
| | 03:24 | to open up the body tag. It tells you
that there are two boxes on this page:
| | 03:29 | one for content and one is of
particular style. We want to look at the content
| | 03:35 | box and now there is that familiar
stuff that we have been looking at again and
| | 03:38 | again. There is the h1. Notice as I
roll over a tag, you see a color block that
| | 03:43 | defines the block that I'm looking at,
in this case, the h1. It shows where
| | 03:48 | that block exists, in an imaginary way,
up there in the web page,
| | 03:52 | inside the browser window.
| | 03:54 | So as I rollover, you will see time
and again that the blocks are hovering
| | 03:59 | over. It's a great to visualize, what
your page and where those blocks exist.
| | 04:04 | Just like in Web Developer toolbar, if
you click on one of these, let's say the
| | 04:08 | <p> tag for instance, this gives you
way more information. It tells you that
| | 04:14 | there is a lot of styles, which is
what we are looking in the right side,
| | 04:18 | affecting this. And the best thing
about this for me is that you will see it
| | 04:22 | tells me which styles are being
attached to this particular <p> tag.
| | 04:27 | But it also tells me, what document
they are in and what line that style is on,
| | 04:33 | which is fantastic. So this is a
really great Superuser tool. Can you change
| | 04:39 | things, just like we did in the other
one? Sure you can. If we click over here
| | 04:43 | on the font size, for instance. There
is another interesting tool, let's say we
| | 04:48 | are not happy with the font size of the
h3, you can turn that style off and say
| | 04:54 | maybe that's what is hanging up my
whole page. Let's turn it off and see if it
| | 04:58 | looks better.
| | 05:00 | There I turned it off and if you like
right up there, simple style sheet is
| | 05:04 | much smaller than it was before.
Because I was able to turn off that style and
| | 05:09 | see if I liked it better the default
way or the way that I've styled it myself.
| | 05:13 | Pretty cool.
| | 05:14 | Again you can select things and go on
and change them, just like we did in Web
| | 05:18 | Developer toolbar and you can see them
updated. Anytime you want to go back to
| | 05:23 | the way the page was before, just click
in the page and hit your Refresh button.
| | 05:28 | One other thing I wanted to show you
if you go into CSS, this is a feature I
| | 05:32 | really like. As you rollover
different attributes, this is not a very good
| | 05:36 | example but let me try to find one. As
I rollover a Color attribute, notice the
| | 05:40 | color chip comes up. If I rolling an
image, notice a little thumbnail of the
| | 05:45 | image shows up. So this toolkit that
comes with Firebug, really is very, very visual.
| | 05:51 | You don't have to think much, if you
can hover and you can see, you get lots
| | 05:56 | and lots of information and you don't
have to be scrambling through lots of
| | 05:59 | menus and lots of choices. It just
automatically updates, as you use it. Again
| | 06:04 | turning things styles off and on, all
of these are available inside up here.
| | 06:09 | I would to leave you with just one
thought. If you use this tool for anything,
| | 06:14 | please go into Console, turn on the
different Nets, then click on Net, then
| | 06:20 | click on All and see how your page is
downloading. Make sure your images are
| | 06:25 | small. It is always important to have a
lean, mean, clean web page to ensure a
| | 06:32 | good user experience.
| | Collapse this transcript |
|
|
4. Learning the Ground RulesCreating proper file structure| 00:01 | Before you play any game whether it's a
sport or a board game, you need to know
| | 00:05 | what the rules are, in order to be a
successful player, in order to win,
| | 00:09 | in order to have fun with the other people.
Well, there are ground rules for being
| | 00:13 | a great web site designer and one of
them is setting up the correct file and
| | 00:17 | folder structure.
| | 00:18 | So I'm going to take you a moment to
show you how to that. We are going to
| | 00:21 | create basically a template that you
can use over and over again. And that's an
| | 00:25 | easy method and it will ensure that you
never have problems when you are going
| | 00:29 | to define your site in Dreamweaver.
That you have your file structure set up correctly.
| | 00:34 | So the first thing I do is I right-click
on the Desktop, create a new folder.
| | 00:38 | This would be slightly different in
Windows but most of you know how to create
| | 00:41 | a folder in Windows. Name the folder
web site, just a generic name. Double-
| | 00:49 | click on the folder, open it up and
start thinking of all the kind of things
| | 00:53 | that you might need in
order to create a web site.
| | 00:56 | So I'll right-click, do New Folder.
We've already talked about that we might
| | 01:00 | need CSS. Right-click again. It's
another one we might need. We might need,
| | 01:06 | and we saw it in the last web page we
previewed, we might need Images so let's
| | 01:11 | call this the Image folder.
We might be a really Superuser and use some
| | 01:15 | JavaScript because we want to do that
cool AJAX stuff, so let's right-click again.
| | 01:19 | Let's call this one js for JavaScript.
Notice I keep them short, all lowercase
| | 01:27 | and very meaningful. Right-click again.
What other kind of media might we want
| | 01:32 | in our web site? Well I might want to
use a movie. I might want to use some
| | 01:37 | Flash. Instead of writing Flash, I'll
write what the file name is, SWF, what we
| | 01:43 | call SWF. The client might be giving
me text files and content that I need to
| | 01:47 | load into the web site. So I like to
keep a folder called text. Give out
| | 01:53 | the name of text.
| | 01:55 | And then I like to keep what I call
the junk folder but we are not going to
| | 01:58 | call the junk folder. We are going to
call the source folder. And this is where
| | 02:02 | I put all source material, the high-
res photos, idea boards, any of the
| | 02:09 | materials that I need to create this web site.
| | 02:11 | As I get ready to upload this to the
server, I'll just delete this folder and
| | 02:16 | know that all the big folders that I
don't need are out of there and that this
| | 02:20 | was just my working folder. To remind
you that this is the folder you will
| | 02:24 | delete, that you don't need to upload
this folder, a nice little trick is to
| | 02:28 | right-click on this and actually give
it a color. That will remind you that
| | 02:32 | this is the source folder, not part
of the web site that will go up to the server.
| | 02:37 | Now all are these are empty folders.
It's one folder deep and I call this the
| | 02:42 | one plus rule. One folder, plus
everything else you need for the web site.
| | 02:47 | I would recommend you keep this in a
safe place in your Document folder and as
| | 02:51 | you get ready to create you own web
sites, you will hold down your Option key,
| | 02:55 | click and drag, create this again,
click on it and let's say we are doing
| | 03:02 | my_first_website. Guess
what? We are ready to go.
| | 03:08 | We haven't destroyed our template.
We have our file structure there anytime
| | 03:11 | we need it to make new web sites and I'll
open this up. For my first web site, I know
| | 03:17 | that I won't be doing JavaScript,
I won't be doing SWFs and I won't
| | 03:22 | be doing movies and I'll take those
and delete them. But I will be using CSS style,
| | 03:28 | images, text from the client, and
original source material. I'm ready to go.
| | 03:35 | My file structure is all set up.
I could also start loading things into the
| | 03:39 | source folder and be ready to go. This
ensures that every thing you need for
| | 03:44 | you web site design experience is in
one folder in one Project folder. Very,
| | 03:50 | very important when you are doing
multimedia authoring, whether it's in
| | 03:53 | Dreamweaver, whether it's in Flash
or whether it's in C+. This will help
| | 03:57 | everybody on the team and you.
| | 03:59 | The other thing about my recommendations
is here is this is my idea of how to set up
| | 04:03 | file structures, but at your own
business or your own company, you may set up
| | 04:08 | another set of processes. But every
company, every web site design firm has a
| | 04:13 | file structure system. It's very
important to follow it, so that teams and
| | 04:17 | players can share their material at
the end of the day and put it up on the server.
| | Collapse this transcript |
| The eight commandments of naming| 00:02 | This is a very important movie. I'm
going to lay out the Eight Commandments.
| | 00:08 | These are the rules, these are the
commandments. Never break them. So, let's
| | 00:12 | take a look at commandment number 1:
Use no spaces in filenames. Now I have put
| | 00:19 | together some examples. What is wrong
here? Right off the bat, you see there is
| | 00:26 | a space. So, how could we correct this?
We could close up the spaces and just
| | 00:32 | type it straight. An easy
simple thing, just don't use spaces.
| | 00:38 | Commandment number 2: Use underscores
or hyphens for making spaces between
| | 00:44 | words. Occasionally, it is good to see
a little space or break between words or
| | 00:48 | concepts and there is a way you can do
that. What is wrong with this example?
| | 00:53 | Again, we have a space. We can't have
spaces just hanging here and there. So,
| | 00:59 | how could we fix this but still make it
look spacey? I prefer using underscore.
| | 01:05 | Once I choose a method, I'm consistent
in that use of naming throughout my web
| | 01:10 | site. Underscore is my preferred way.
| | 01:13 | Commandment number 3: Use short file
names that have meaning. Most designers
| | 01:18 | understand the importance of using
short file names. It is easy to make
| | 01:22 | mistakes when you are typing and short
file names just makes it easier but the
| | 01:27 | meaning part is often left behind. I
can guarantee that in two weeks, in three
| | 01:33 | weeks, in three months, when you come
back to a web site to work on it, to
| | 01:36 | update it or do maintenance on it, File1
.htm and File2.htm will have no meaning
| | 01:43 | for you. You won't know which one is
your preferred file. You won't know what
| | 01:47 | the content of that file is and it's
meaningless to the other people on your
| | 01:51 | team. A much better way to name things
is to use short names that have meaning.
| | 01:57 | I try to keep all my names around
seven or eight characters if I can. Index
| | 02:02 | would be the initial page and Gallery
would be a secondary page on this web
| | 02:07 | site and I would expect on that page,
to see a gallery or portfolio or a page
| | 02:11 | that has a number of images. This
is a great way to name your files.
| | 02:16 | Commandment number 4: Lower case only
but camel humping is okay. Simplify your
| | 02:21 | naming for yourself. If you always
stick to lower case, it makes it much easier
| | 02:26 | for you to remember how to do the names
and be consistent. Camel humping, which
| | 02:31 | I'll get to in just a moment is a
preferred way by a number of coders but let's
| | 02:36 | look at a bad example again. Well,
right off the bat, we see capital initial W,
| | 02:41 | not a great way to go. You see a
space in here and it is breaking a several
| | 02:46 | rules. Let's look at how to fix this.
We have eliminated the space. We have
| | 02:52 | made the first initial letter a lower
case letter and we have used a capital P
| | 02:56 | to indicate the second word. This is
called Camel humping. This is an example
| | 03:01 | of how to do it correctly. We have
removed the capital letter for W and made it
| | 03:06 | lower case. We have eliminated the
space and where the second word starts, we
| | 03:12 | have used a capital P. This is called
Camel humping. Think of it being this way
| | 03:16 | that you start low on the camel and
then move up over the hump of the camel.
| | 03:21 | It is used frequently by coders. It is
used by people in Flash and ActionScript.
| | 03:26 | You will see it all over the web. It
is perfectly acceptable to use. For me,
| | 03:31 | lower case just works. That is the way
I like to do it but everybody is going
| | 03:34 | to come up their unique way but
following these rules will keep you safe and
| | 03:38 | make it so that your files will work on
the Server and display in the browser.
| | 03:42 | Commandment number 5: All file names
must end in dot three-letter extension.
| | 03:49 | I'm sure you are familiar with these .
htm- web page, .JPEG image, .GIF image
| | 03:55 | format, .mov - QuickTime movie, .swf -
Flash movie, .aif - an audio file and
| | 04:04 | .mp4 - could be a movie, audio file,
all kinds of things, even an interactive
| | 04:09 | file. There are a couple of exceptions
to this. .js stands for JavaScript.
| | 04:14 | It is a two-letter extension and there
is also .html. I'll talk a little bit about
| | 04:18 | that more in a later commandment.
| | 04:21 | So, looking at this, this is all wrong.
I don't know that this is. This could
| | 04:25 | be a title for a college paper. The
Server is looking to understand what kind
| | 04:32 | of document is being served to it
and how to display it properly in the
| | 04:36 | browser. The only way it knows is by
the dot three-letter extension, so you are
| | 04:42 | actually sending an instruction with
the file name when you do this. It is
| | 04:46 | important to include it on every file
name you create. Here is the solution,
| | 04:51 | webPage.htm. Now, the server and the
browser know that this is the web page.
| | 04:59 | Commandment 6: Use alphanumeric
characters only. Again, a simplification of
| | 05:05 | things is 'we use alphanumeric, we
won't go astray.' It makes consistency.
| | 05:10 | It is easy to remember. Okay, there are
a lot of mistakes here. That exclamation
| | 05:16 | mark is not alphanumeric, the money,
money, money breaks several rules.
| | 05:22 | One, it's way too long and not very
meaningful and third, commas are special
| | 05:29 | characters. Example three, the hash mark.
Not an alphanumeric character, again
| | 05:37 | a special character. So, how can we
correct these three file names? Simplify
| | 05:43 | the names, make them short and
meaningful, get rid of spaces, get rid of any
| | 05:48 | special characters, party.htm, money.htm,
image2.jpg. Much easier to use, much
| | 05:56 | easier to do. Designers like it simple.
Keep it simple for yourself and use
| | 06:01 | alphanumeric.
| | 06:02 | 7: Avoid special characters. This
is so important I have made a special
| | 06:07 | commandment just for this. You may
think that we covered it in the last one but
| | 06:11 | it is interesting how people try to
slide these special characters into names.
| | 06:16 | All of these special characters appear
at the top end on the right side of your
| | 06:20 | keyboard. They are hard to learn how to
type, so just don't use them. They are
| | 06:25 | used inside of code and because
they are used as code and mathematical
| | 06:29 | operators inside of code, you cannot
use them for any file names. These are
| | 06:35 | three bad examples. %$$$, done with
the character of the dollar sign and this
| | 06:42 | one is double duty wrong, *;. How can
we correct these? If you need to use the
| | 06:51 | word percent, write it out. Don't use
the special character. Money pretty much
| | 06:57 | says it all. We are trying to simplify
and go for meaning and star page is a
| | 07:02 | much better way to name this than
using the special character, which tells us
| | 07:06 | that it has a meaningful name, and
we are following the rule again in
| | 07:09 | Commandment 6 of alphanumeric.
| | 07:12 | Commandment number 8: Use either .html
or .htm for web pages but only use one
| | 07:19 | file naming convention within a single
site. So, let's look at a bad example.
| | 07:24 | Within a site, you may use html or
htm but you cannot use a combination of
| | 07:32 | both. So, to correct this, just stick
with one or the other. I really like to
| | 07:38 | use .htm. It goes along with my other
commandment of dot three-letter extension
| | 07:44 | and it is simple to use throughout.
Choose one or the other but be consistent.
| | 07:49 | That is the main message with all of
these commandments. Just make it simple,
| | 07:53 | make it consistent, make it meaningful.
| | Collapse this transcript |
|
|
5. Designing for the InternetReading the structural elements of a site| 00:00 | In this movie, we finally get to the
good stuff, designing for the Internet.
| | 00:04 | We have looked at the technical
limitations of the web. We have looked at how web
| | 00:09 | standards and best practices are an
important issue to address in designing web
| | 00:13 | sites. And now, we get to bring our
creative genius and our design skills to
| | 00:18 | how to create a great a web site. My
theory is that are really only two pages
| | 00:24 | that you need to design. There is the
homepage and everything else what we
| | 00:28 | call secondary pages. In this lesson,
we are going to take some time to look at
| | 00:33 | the structural elements
that need to be on a homepage.
| | 00:36 | Taking a look up here at this info
graphic. You can see at the top we need to
| | 00:42 | have some page title. A way of
identifying in a browser that this is the homepage.
| | 00:47 | Typically, the next structural
element would be a Header. This could be
| | 00:53 | graphics, it could be text, it could
be a combination of both of those but
| | 00:57 | that's typically at the top of the page.
Content is usually prominent but below
| | 01:03 | the header, then at the bottom, this
structural element is called the footer
| | 01:08 | and contains another form of
navigation and some of the Technical and Contact
| | 01:13 | Information that needs to go on a web site.
| | 01:16 | Then the side bar, this can contain
News items, it can contain secondary
| | 01:21 | navigation, features, all kinds of
things that you might want to make available
| | 01:26 | to your user. If it's a 3-column layout,
you will often see sidebar, content,
| | 01:32 | sidebar, but get used to the idea
that these structural elements, the page
| | 01:36 | title, the header, the content and
footer and sidebar will be used again and again.
| | 01:42 | Understanding the structure will help
you eventually start to the design the
| | 01:45 | layout of your homepage. So let's get
out look at a real world example. Let's
| | 01:50 | go to the lynda.com homepage and see
how these structures are used in her homepage.
| | 01:57 | So, Now we are in the homepage of the
lynda.com web site. Let's see if we can
| | 02:01 | find the structural elements that we
have been talking about in the last slide.
| | 02:05 | At the top here we have the Title page
and it also has a bi-line. Learning at
| | 02:10 | your own pace is considered to be a bi-
line and the name of the company and the
| | 02:13 | name of this web site is lynda.com.
| | 02:16 | As we move down into the viewport, we
see right at the top just as I described
| | 02:21 | the Header. The Header in this case is
both image and text and also includes
| | 02:26 | some navigation. But the main area of
this web site is the content area, it's
| | 02:31 | prominent part and they are a lot of
kinds of content that you can access in
| | 02:35 | the main real estate of this web site.
| | 02:39 | Sidebars exist- there is really one, two,
three, four sidebars and another one
| | 02:45 | that I really wouldn't call a sidebar.
But a sidebar usually contains two,
| | 02:49 | three or more pieces of information
that the user might want to go to, to dig
| | 02:54 | deeper into the site. Remember on a
homepage you are trying to seduce that
| | 02:59 | user to come into the
site and really explore it.
| | 03:03 | Down here, we have more content, which
I would call secondary content. And then
| | 03:07 | finally at the bottom, we have the
footer. Now the footer in this case is not a
| | 03:12 | prominent thing but a necessary thing.
It's often a required element by the
| | 03:16 | legal department of the company.
Notice that in this case, the footer is in a
| | 03:20 | grayed text, whereas the main content
is using red and black which is much more
| | 03:25 | prominent. If we blurred our eyes, we
would see the content area before we
| | 03:30 | would notice the footer area, which is
a great way to talk about the importance
| | 03:34 | of information. So, as we are
designing we need to think about what is
| | 03:37 | important, what is structural and how
we want to layout our page to invite the
| | 03:42 | user and to see the features and to
see the content that we actually have.
| | 03:47 | Just one more recap. There's your title,
there's your header. Again, the main
| | 03:53 | real estate is the main content. Some
examples of sidebars. And as we scroll
| | 03:58 | down to the bottom an example of the
footer. Lynda.com does an excellent job of
| | 04:03 | showing the main structural
elements that should be on every homepage.
| | Collapse this transcript |
| Reading the features of a site| 00:00 | In the last movie we talked about
the main structural elements that are
| | 00:04 | required to make a great homepage.
In this movie we are going to look at
| | 00:09 | features that are usually
expected by the user on a homepage.
| | 00:14 | One of the functions of a homepage is
to draw the user into the web site and
| | 00:19 | one of the ways you can do that is
give them a lot of affordances, or
| | 00:23 | activities, or things they can do on
the homepage. Remember you only have less
| | 00:27 | than three seconds to seduce them and
get them to stay, and to play, and to
| | 00:33 | enter into the site. I call these
requisite site features "activities" and
| | 00:38 | they have places where we except to see
them. Just as when we rent a car at a
| | 00:43 | car rental agency, we can get in their
car and know who to drive it, we should
| | 00:48 | be able to go from homepage to homepage,
and understand how it works and feel
| | 00:52 | comfortable and not
have a feeling of confusion.
| | 00:55 | So there are certain features that you
will see from homepage to homepage on
| | 00:59 | companies, both large sites and small
sites, and we are going to take a look at
| | 01:02 | the features one by one.
| | 01:04 | One of the most important is the Site
Identifier. It usually appears in the top
| | 01:09 | left-hand corner of the web page.
I believe this has a lot to do with the way
| | 01:13 | we read in the United States, that we
read from left to right, top to bottom.
| | 01:18 | The Site Identifier might be a logo,
might a logo and text, or it might be a
| | 01:22 | branding image or a combination of all
of three of these things. Moving to the
| | 01:28 | right side of the page at the top, we
usually find the Sitewide Utilities.
| | 01:34 | Utilities are just another name for
tools. Things that the user will do on the
| | 01:40 | site activities. This could be a
logger use in, could be a password
| | 01:44 | protected area, it might be a shopping
cart, it might be a search engine,
| | 01:49 | all of these things are called utilities
or tools. Second, third, multiple time
| | 01:54 | users who want to find these rapidly
come right into the homepage and get
| | 01:59 | right to the activity at hand.
| | 02:01 | Usually underneath the Site Identifier
and utilities is the primary navigation.
| | 02:06 | Notice that it's bold enough that
you can see it and set apart from the
| | 02:10 | identifier and the utilities, but
at the same time not too many choices.
| | 02:14 | A good or well designed navigation system
will usually only have five or six buttons
| | 02:20 | on the homepage. More than that and
you will overwhelm the user. I compare
| | 02:24 | this to taking a three-year-old
to 31 Flavors. Too many choices.
| | 02:28 | There's a breakdown,
an overwhelming feeling of confusing.
| | 02:33 | The secondary navigation often
appears in the sidebar. It's usually content
| | 02:39 | that you want to alert your user to,
new information, news, items, features,
| | 02:45 | updates, content that might be
interested in that they don't know about,
| | 02:49 | things that they don't know about your
company, a way to sort of tease them into
| | 02:52 | the site with other things
that are going on your web site.
| | 02:56 | Often it's contained in a sidebar,
and the second place it's most found is
| | 03:00 | directly below the primary navigation.
| | 03:04 | Once we are in the content area, there
are several features that resemble a lot
| | 03:08 | of features that you will find in print
or editorial or magazine or newspapers.
| | 03:14 | The first one I want to talk about is
the main section title. It's usually
| | 03:17 | distinct, easy to see. If you blurred
your eyes, it would pop right out on the page.
| | 03:23 | The second area would be the body text,
again, a content area might be text and
| | 03:27 | image, and within the body text is
another way that you can provide navigation
| | 03:32 | for the first time user, or second,
third time user by providing embedded links
| | 03:37 | or hypertext links.
| | 03:38 | Try to divide the content into
sections and break it up so that their eye
| | 03:42 | can see the flow of the content and
break it down into small bite-sized chunks,
| | 03:47 | and you can do that using sub-
section titles, which are usually styled
| | 03:50 | slightly differently and a little bit
smaller. At the bottom of the page,
| | 03:54 | you will see the legal information, you
will find contact information for the web
| | 03:59 | developer, and you will find the
date when the page was created.
| | 04:03 | These are all necessary features. They
all have to do with activities that your
| | 04:07 | users will be doing within the web site.
As I said before, you want to have
| | 04:12 | stickiness to your homepage and make
them want to come back again and again to
| | 04:16 | see things, to try things, to do things.
| | 04:18 | So using lynda.com is an example.
Let's look and see if we can find these
| | 04:23 | features in her homepage.
| | 04:25 | Here we are in Lynda's homepage again.
We looked at it in the last movie, but now
| | 04:30 | we are going to be looking for these
features, those sticky activities that
| | 04:34 | make a user want to stay on a homepage,
and get involved with the content.
| | 04:38 | Let's start by looking for the first one.
Up here in the upper left-hand corner
| | 04:43 | is the branding and the site identifier.
You see Lynda's logo. And below it you
| | 04:48 | see a text version of the company name.
If we move to the upper right, you see
| | 04:55 | that we do have site-wide utilities.
These are utilities or tools that work
| | 04:59 | across the whole site and make it
easier for the user to get to the activities
| | 05:05 | that they need to on their second, third,
fourth times as they come into the web site.
| | 05:10 | In Lynda's site, she specifically has
a user name and a password, and even a way,
| | 05:15 | in case you have lost the password,
to login and get to your account. Below that,
| | 05:19 | and this is very, very important. Even
on medium sized sites you will see that
| | 05:24 | there are now search engines everywhere,
typically, again, at the top or in the
| | 05:27 | top right area. More and more the super
user wants to type in a keyword and go
| | 05:32 | directly to the page that they are
looking for, rather than reading through a
| | 05:36 | lot of links, a lot of pages, a lot
of content, they will type a keyword,
| | 05:41 | hit the Search button and go to that area.
| | 05:44 | Lynda also has a primary navigation
system right here, again near the top.
| | 05:49 | Notice that it has only five choices,
five buttons. As you roll over each of
| | 05:53 | these buttons, you see subsections.
Remember you try to group activities
| | 05:57 | together into main areas, five or six,
rather than put all of the activities,
| | 06:01 | or all of the choices up here.
| | 06:05 | In Lynda's particular site, the
secondary navigation system shows up right
| | 06:10 | below it. This secondary navigation
system has one purpose and one purpose only.
| | 06:15 | And that's a way to access the
courses that you are looking for. Notice
| | 06:19 | that you have one, two, three, four,
five ways that you can access the courses
| | 06:25 | by subject, by product, by vendor,
by author. Or by looking at all of the courses.
| | 06:30 | Looking for courses, taking courses,
viewing courses is the number one activity
| | 06:35 | on the Lynda.com site. So you can see
that it's placed prominently, and near
| | 06:39 | the top of the page.
| | 06:41 | Looking further down the web page into
what I call the main content area,
| | 06:45 | we will look for some of those features
that we say that are so important to
| | 06:49 | understand content and to organize
content by importance and by concept.
| | 06:54 | The first one I want you see is that
these titles with these icons are the main
| | 07:00 | section titles. She has five of these:
one, two, three, four and five. They all
| | 07:06 | look the same and it's easy just by
looking at the web page without even
| | 07:10 | reading them, you can tell
these are the main content areas.
| | 07:14 | In the main content areas, in each of
these subsections, she has hypertext
| | 07:19 | links that take you deeper into the site,
to do specific activities, or to look
| | 07:24 | for specific information, or programs,
or types of experiences. Notice that
| | 07:30 | each of these activities, features or
information is broken down into similar
| | 07:35 | groups, similar kinds of activities,
and that it's no more than three to five,
| | 07:40 | again, in each section.
| | 07:43 | A subsection, we can find down at the
bottom. Remember a subsection is a way to
| | 07:48 | break content down, so that you
can see smaller and smaller parts.
| | 07:52 | In this case, the subsection called Case
Studies. They don't change the text and the
| | 07:58 | icon formatting, but they do change
the background color, and this gray
| | 08:02 | background color, which is sets into
the web site, tells us it's a subsection.
| | 08:08 | This indicates this is more important
section on the white background.
| | 08:11 | It pops forward.
| | 08:13 | Finally by going to the footer at the
bottom, we see all this legalese as I
| | 08:17 | told you we would. Companies must
provide this. It's a way to protect their rights,
| | 08:21 | a way to make sure that they
are doing the legitimate business,
| | 08:25 | and a way to make their lawyers happy.
So we see the Terms and Conditions,
| | 08:29 | the Privacy Policy, the Copyright, the
important Contact Us. This usually takes you
| | 08:34 | to the web master. The last date of
the update for the web site. Again, more
| | 08:40 | information about the company,
and it's All Rights Reserved. Again,
| | 08:44 | more legalese phrasing.
| | 08:45 | I think Lynda.com did a great job.
She has all the features and lots of
| | 08:49 | activities that you can do on the
homepage. A lot of ways for first timers,
| | 08:54 | second timers, to enter the page and
a lot of content available in a very
| | 09:00 | visual simple way so that you can
access it quickly and get to what you want.
| | Collapse this transcript |
| Effective informational design| 00:00 | Continuing our discussion of Web
design principles, we should take a look at
| | 00:04 | information hierarchy. It's an
important principle and one that's often
| | 00:08 | overlooked. The way to think about it
is WE SEE, THEN WE READ. Web designers
| | 00:13 | often do 4 or 5 jobs. They design
the graphic elements, they create the
| | 00:17 | interface design, navigation design,
interaction design and often are required
| | 00:23 | to design the information. But it
should be done on a hierarchical basis that
| | 00:28 | makes sense from the most important to
the least important, from the general to
| | 00:32 | the specific.
| | 00:34 | When I think about information hierarchy,
I just remember this phrase, WE SEE,
| | 00:38 | THEN WE READ. When we approach a stop
sign, long before we approach the stop
| | 00:44 | sign we see the red hexagonal shape.
It isn't until we come up to the actual
| | 00:49 | sign that we read the word STOP. So
that's how we understand what that means
| | 00:54 | from far away and that's why it works
as a sign and keeps us from going through
| | 00:58 | intersections too fast.
| | 01:00 | The same principle also works in web
design that we usually do what we call
| | 01:04 | Three Passes. We go from the general
to the specific. On Pass 1, we call this
| | 01:09 | gradual perception. We see colors,
shapes, main areas, things that pop to the
| | 01:14 | foreground, things that go to the
background and the information sorts itself
| | 01:19 | out into main areas.
| | 01:21 | In Pass 2, we start really
understanding what each of those areas may be.
| | 01:26 | It might be branding, it might be
content, it might be navigation.
| | 01:30 | And in Pass 3, we actually start to
select from those different content areas.
| | 01:34 | We actually pick an area to read deeply,
we might look at the subsection title,
| | 01:39 | we might look at an image, we might
read a caption, we might see a word in an
| | 01:43 | article that makes us want to know more.
| | 01:46 | The same principle or this idea of
hierarchy works inside your web page as
| | 01:50 | well. We want to list things in the
content area from the most important to the
| | 01:55 | least important thinking of the general
pass, the secondary pass, understanding
| | 02:00 | and the third pass detail information.
Navigation works this way and also the
| | 02:05 | support elements.
| | 02:06 | So let's see how this works out in the
real world. I'm going to take you out to
| | 02:10 | Jeffery Zeldman's web site. Jeffery
Zeldman is a web designer and the proponent
| | 02:16 | of designing with Web standards. He
has got a great lookout on it and I often
| | 02:20 | send my students to his site, because
he practices what he preaches. But let's
| | 02:24 | pretend just for a moment that we are
seeing it for our very first time and we
| | 02:28 | are just noticing how the colors pop,
recede, the fonts are bigger, larger and
| | 02:33 | we notice that on the first pass,
this image is what draws us in and then
| | 02:37 | slowly we start to recognize other areas.
| | 02:40 | On the second pass we begin to sort out
with this all means, with these colors,
| | 02:44 | with these fonts, what this means. We
see that he has his branding at the top.
| | 02:49 | We see that his navigation is on
the side on the right and we begin to
| | 02:52 | understand that this area is the
content area. The area for deep understanding
| | 02:56 | for detail.
| | 02:58 | On the third read we actually might
say wow! I would like to know how to join
| | 03:03 | his Facebook or what book could change
an industry. So we begin to get caught
| | 03:08 | up in the actual detail, in the
actual meaning of content. So first read,
| | 03:15 | visual, the overall impression. Second
read, understanding. Third read, detail
| | 03:22 | information and knowledge.
| | 03:24 | This is a great way to design. It keeps
people staying at your web site and you
| | 03:28 | want your web site to be sticky and
make people want to stay around and see
| | 03:32 | what you have to offer.
| | Collapse this transcript |
| Effective architectural design| 00:00 | So we've looked at some of the visual
features and structural elements.
| | 00:04 | We've talked about how information being
well designed and having a hierarchy is important.
| | 00:09 | But what makes you want to stay at a
well-designed homepage? It should be just
| | 00:14 | like coming home.
| | 00:17 | For me designing a homepage is all
about thinking 3D, not 2D. It actually is a
| | 00:23 | house. So let's take this house
metaphor a little bit further. If you walk into
| | 00:28 | a traditional house and you are
invited into the foyer or the entry hall,
| | 00:32 | you have a general idea right off the bat,
the kind of family who lives there.
| | 00:36 | As you're standing in the foyer if I
said to you where are their social
| | 00:41 | activities, you would say downstairs
towards the front. If I said where are
| | 00:45 | their messy activities, their family
activities? You would say in the kitchen,
| | 00:49 | in the den towards the back on the
first floor. If I ask you about where are
| | 00:53 | their private activities, their special
activities, their personal activities?
| | 00:57 | You would say upstairs in the
bedrooms and you could probably even tell me
| | 01:01 | whether it's two bedrooms or three
bedrooms or four bedrooms or you might even
| | 01:04 | be able to indicate to me where the
bathrooms are, where the closets are.
| | 01:08 | In other words, the minute you walk
into a house you have a sense of the floor
| | 01:13 | plan, a sense of the life that's lived
there. A good homepage, a well-designed
| | 01:18 | homepage translates into that same
kind of experience. When people talk about
| | 01:23 | their experiences on the Internet, they
use verbs that indicate that they have
| | 01:27 | been to places. I went to that site, I
did this at that site, I saw this. I did
| | 01:34 | that, I talked to. All of these verbs
are not like the verbs that people use
| | 01:39 | when they read a book or read a
magazine or read a newspaper. They talk about
| | 01:43 | they have been on a trek or a
quest or they have explored.
| | 01:47 | So remember that they are using action
verbs that challenge you as a designer
| | 01:52 | to think of creating new spaces, new
places, new experiences and ultimately new
| | 01:57 | memories, because as we know memories
make deep, deep channels in our brain and
| | 02:02 | those are the things we carry with us.
That's why branding is important. That's
| | 02:06 | why a homepage is so important. It is
the portal into your company's emotional
| | 02:11 | heart in center.
| | 02:12 | But I would like to leave you with
this. Ask yourself when you design a
| | 02:15 | homepage, when I walk in the door, when
I'm at this homepage, do I know where I am?
| | 02:20 | Remember, you never get a second
chance on the Internet. The typical amount
| | 02:26 | of time spend on a homepage is 3 seconds.
If 2 of those 3 seconds are spend in
| | 02:31 | a download and 1 second of that
experience is an unfavorable or discomforting
| | 02:37 | or annoying experience, they won't be back.
| | 02:40 | So make it easy, make it feel like home,
like they know who they are, who they
| | 02:44 | are visiting and why they are there.
| | Collapse this transcript |
|
|
6. WireframesSetting up a project| 00:01 | So let's start our first project. I
call this project Anatomy of a Homepage.
| | 00:06 | But at the same time we will also
create a wireframe. We are going to analyze a
| | 00:11 | homepage of a web site of your choice.
In my case, this will be the Pasadena
| | 00:16 | City College, Digital Media Center.
| | 00:18 | A wireframe is a basic visual guide
that is used in web design to suggest the
| | 00:23 | layout a fundamental elements in the
interface. Upon completion of this project
| | 00:29 | you will be able to deconstruct a
homepage, which means you will be able to
| | 00:33 | identify the main structural elements
as well as its features and at the same
| | 00:38 | time you will create a layer called the
wireframe that shows the main sections
| | 00:43 | and the main features. We will label
these features and these sections and you
| | 00:49 | will have your first wireframe.
| | 00:51 | In the web industry, using wireframe
is a very important concept. It's often
| | 00:54 | done at the beginning of the design
process. It's done with the web design team
| | 00:59 | and the client and it's a little bit
like doing your outline for a term paper
| | 01:03 | in English. Once you have your thesis
and you know what you want to do, you
| | 01:07 | should come up with the parts and
the way you are going to build out that thesis.
| | 01:12 | Well, the wireframe works the same way,
but it's a visual document that the
| | 01:15 | client and the web design team share,
it should identify what the content is,
| | 01:20 | what the main features are, how it
should work. It's the bare bones rectangular
| | 01:24 | structure with just text.
| | 01:27 | In this project I'll be demonstrating how
to do a screen capture, edit and prepare
| | 01:32 | it inside of Photoshop and then how
to create the wireframe inside of Adobe
| | 01:36 | Acrobat Pro. There are number of
products you could use to do this project.
| | 01:41 | You could use Adobe Illustrator,
Microsoft Word or you could do your screen
| | 01:46 | capture, print your screen capture,
get a piece of tracing paper and just use
| | 01:50 | the old tools of pencils, markers
and rulers to do your wireframe.
| | 01:56 | Normally, when doing a wireframe it
would be at the beginning of the process
| | 01:59 | before the web site had even been
designed and as I said you would sit down
| | 02:03 | with the client, the team and everybody
and figure out who your target audience
| | 02:07 | and your target user is. But in
this case because this is a first time
| | 02:11 | entry-level learning project, we are
going to learn about how other people have
| | 02:15 | designed their homepages and
create the wireframe after the fact.
| | 02:19 | When you complete this project, you
will have a wireframe under your belt,
| | 02:23 | something you can show to the client.
You will understand what elements are
| | 02:27 | necessary to create a well designed
homepage, and the most fun part you will be
| | 02:32 | able to take one of your favorite
homepages and see how those designers thought
| | 02:36 | about that page and how they planned it
out. It's a great way to start learning
| | 02:40 | about web site design.
| | Collapse this transcript |
| Capturing a website| 00:00 | To start this project choose a web
site with a well-designed homepage, but I
| | 00:05 | want you to make sure it's not Flash.
The way Flash works is very different
| | 00:09 | than the way HTML works. If you are
not sure how to check this, you can
| | 00:13 | right-click anywhere on the web
page and you will see that it says Web
| | 00:17 | Developer. That indicates it's an HTML
site. If you move around the site and
| | 00:23 | click other places, you will see that
wherever I right-click on this particular
| | 00:27 | page it says Web Developer. A pretty
good indication this is an HTML or XHTML web page.
| | 00:32 | A lot of web pages are hybrid.
They will have both HTML and Flash.
| | 00:38 | For instance, I showed you lynda.com's
homepage and that's a hybrid web site.
| | 00:43 | They have some Flash elements on it, but
it's not an all-Flash web site. I highly
| | 00:47 | recommend not using an all-
Flash web site for this project.
| | 00:52 | In this project I'm choosing the
homepage for the Pasadena Digital Media
| | 00:55 | Center. The first thing I'm going
to do is do a screen capture. On the
| | 01:00 | Macintosh that screen capture is
done by doing Command+Shift+4. So on my
| | 01:07 | keyboard I'm going to click Command+
Shift+4 and notice that my cursor instantly
| | 01:12 | turns into a cross here. I'm going to
move up to the top left corner of the
| | 01:17 | viewport and then I'm going to drag to
the right and when I let go of my mouse
| | 01:21 | it will take the picture.
| | 01:23 | It will take me two images to put the
whole page together. I could do just a
| | 01:27 | screen capture of the window, but I
want to get the whole version of the
| | 01:31 | homepage not a truncated view. So I'm
dragging down to the right and I'm being
| | 01:36 | careful about this not sloppy. I want
to be really careful and get exactly what
| | 01:39 | I see in the viewport. It will be
better to air on the side of being a little
| | 01:43 | too large than a little too small.
| | 01:45 | Let go and believe it or not, I'll show
you in a few minutes that makes a clipping
| | 01:50 | that's on my desktop. I'm going to
scroll on down to the bottom of the page, do
| | 01:57 | Command+Shift+4 again and mouse turns
into a cursor, go up to my upper left
| | 02:03 | corner, drag down to the right
carefully, getting what's inside the viewport.
| | 02:09 | I am going to close Firefox. As you
can see we have two pictures, at the top
| | 02:16 | and the bottom of the homepage for
the Pasadena City College, Digital Media
| | 02:20 | Center and the next thing I'm going
to do is edit this together, put it
| | 02:24 | together, composite it together inside
of Photoshop, so we can start to make our PDF.
| | Collapse this transcript |
| Merging the screen captures in Photoshop| 00:01 | Inside of Photoshop we will open the
two screen captures that we made, put them
| | 00:06 | into one image layer and save it out
as a PDF. So let's get going on this.
| | 00:12 | Let's go up to the File menu, scroll
down to Open, which would be Command+O or
| | 00:18 | Ctrl+O, navigate out to our Desktop,
and select Picture 1 and hold down your
| | 00:25 | Shift key and select
Picture 2, and click on Open.
| | 00:30 | Notice in this version of Photoshop it
opens in tabbed view, just click on one
| | 00:34 | of the tabs, and pull that off. You
want to be able to work with them as unique
| | 00:40 | side-by-side images. I always use my
top screen capture as the main image and
| | 00:45 | the bottom one, I'll add to this. So I
know that I need to have the canvas size
| | 00:50 | be better. I'll go up to Image, scroll
down to Canvas Size, and anything that
| | 00:58 | we're doing inside of web design or
for screen design for that matter, should
| | 01:02 | not be using inches but pixels. Inches
is of no value to us, so let's click and
| | 01:08 | make that pixels. Keep in mind whatever
you do for web design or screen design,
| | 01:13 | any kind of interactive multimedia
screen design, game design, use pixels.
| | 01:18 | We want to add space to the bottom, so
I'm going to put the anchor up at the
| | 01:21 | top and I don't know exactly what size
this image is going to be, but I'm going
| | 01:26 | to just guess-timate and put 1500
pixels here. Click OK. So now we have got a
| | 01:34 | nice big picture with a lot
of white space at the bottom.
| | 01:37 | I am going to click on the second
screen capture at the bottom and click and
| | 01:43 | drag it over to the first image. We
don't need the second picture right now.
| | 01:50 | I'm just going to close that out. And
inside this document, the PNG one, the
| | 01:56 | first screen capture, I'm going to
select the Layer 1. At the bottom of the
| | 02:01 | image, I'm going to put the Opacity
down to 50%. This will allow me to match up
| | 02:08 | the documents just exactly. Just give
myself a little bit more space here so I
| | 02:13 | can see what I'm doing, and drag this
right down, where I want it to be.
| | 02:20 | And I'm going to use my Arrows keys just
to nudge this a little bit, to get a just
| | 02:24 | popping on there, just exactly the way
it should be. That looks pretty good to me.
| | 02:30 | Once I have that looking like it's all
lined up and it doesn't look fuzzy to me
| | 02:34 | anymore. I'll go back over to the
Opacity, pull back up to 100%, and make sure
| | 02:41 | that it's matching up and that there
are no glitches anywhere. It looks good.
| | 02:44 | I have to do a little bit of
cropping, but I'm pretty happy.
| | 02:48 | Now I wouldn't normally recommend to
do this inside of Photoshop, but because
| | 02:51 | I'm trying to create just one unique
complete image, I'm going to click on the
| | 02:56 | Options in the Layer panel and choose
to Merge Down or Merge Visible. So now
| | 03:02 | I have one complete image.
| | 03:05 | I am going to select the Crop tool to
make this image look clean and to be
| | 03:10 | exactly the size of the homepage.
Start in the upper-left corner, and then
| | 03:16 | drag down. Remember I made the
document much longer than it needed to be, so
| | 03:22 | I'm going to bring that back up, so it
looks visually about how I remember it.
| | 03:26 | And Snapping is on so notice that it
wants to snap to the side right there.
| | 03:30 | But I don't want that little edge at the
browser window to show, so I'm going to
| | 03:34 | click on that and use my left arrow
key to pop that in just a little bit and
| | 03:40 | then I'll bring this one over here.
That looks pretty good to me, and then
| | 03:47 | usually if you just double-click, you
get your crop and now I've got a nice
| | 03:53 | complete page.
| | 03:54 | There are two things I do at this point,
it's right now saved with no name and
| | 03:59 | you know I like names that have
meaning and it's saved as a PNG. So the first
| | 04:04 | thing I want to do is say File > Save
As and call it screen_capture. And I want
| | 04:13 | to save this as a Photoshop file, in
case I want to come back and do anything
| | 04:18 | with layers or need to show it to my
client. And I'll save it out to the Desktop.
| | 04:24 | So now I've got a nice Photoshop file.
The second thing and this is the most
| | 04:30 | important thing if you are going to be
using Adobe Acrobat Pro, go to File >
| | 04:34 | Save As, and this time choose PDF,
Photoshop PDF as your file format. Click on
| | 04:44 | Save. It's going to bring up all these
dialog boxes, just go ahead and say OK,
| | 04:51 | don't get scared by this, just say Save
PDF, it means you will be able to come
| | 04:55 | into Photoshop in case you want
to edit it, just click on Yes.
| | 05:00 | And now we've created - I close this
image out, and we close out of Photoshop,
| | 05:06 | you will see that on our Desktop we've
our two screen captures, which are PNG
| | 05:10 | files, we have our Photoshop file and
we have our PDF file ready to open inside
| | 05:15 | of Acrobat Pro. We're ready
to start making our wireframe.
| | Collapse this transcript |
| Bringing a website into Acrobat Pro| 00:00 | We're now ready to go and start
creating our wireframe inside of Acrobat Pro.
| | 00:06 | I'm going to my toolbar and launching
Acrobat Pro version 9. You won't see much
| | 00:12 | when it opens but don't fear. Come up
to File and choose File > Create PDF >
| | 00:19 | From File, or the keyboard shortcut is
Command+N, Ctrl+N. I'll navigate out to
| | 00:25 | my Desktop. Make sure you select the
PDF file not the PSD. It works with the
| | 00:31 | PDF file, select that, click on the
Open button, and now we are looking at our
| | 00:37 | PDF file inside of Acrobat Pro.
| | 00:40 | Because I'm working in an unusually
low resolution, I'm going to make this
| | 00:45 | image larger and make it fit the width
of the screen. And I'm also going to set
| | 00:50 | up a few of the great toolbars that are
available in Acrobat Pro. If you don't
| | 00:55 | know a lot about Acrobat Pro, or you
haven't used it to be a multimedia tool or
| | 01:00 | content creation, or proposal tool, I
highly recommend that you check out some
| | 01:03 | of the other titles on lynda.com about
Acrobat Pro to have some great ones both
| | 01:08 | from multimedia presentation and for
understanding all the different features
| | 01:12 | that are available in Acrobat Pro.
| | 01:15 | Scroll up to your Tools dropdown menu,
select Comment & Markup, and go all the
| | 01:23 | way down to the bottom and choose Show
Comment & Markup toolbar. We are going
| | 01:29 | to anchor the toolbar to our other
toolbars, click on the little dots here on
| | 01:35 | the left, and just drag it up, and
notice that it will become part of
| | 01:40 | your toolbar set.
| | 01:43 | The next toolbar that we want to get is
the Advanced Editing toolbar. Click on
| | 01:47 | the Tools dropdown menu, and choose
Advanced Editing > Show Advanced Editing
| | 01:54 | toolbar. Again click on the left right
here, and drag it up to your toolbar.
| | 02:01 | So we've got all our toolbars showing
and we need one more toolbar, which is
| | 02:06 | the Property toolbar. Click on the View
dropdown menu, scroll down to Toolbars,
| | 02:12 | select the Properties Bar
menu, Command+E or Ctrl+E.
| | 02:15 | I am going to let this one float,
it's a special toolbar, it changes
| | 02:21 | contextually, and you will notice as
we start working it will continue to
| | 02:24 | change depending on what tool that we
choose. The tool we want to use for this
| | 02:29 | particular project, the wireframe, is
the Text Rectangular Box called the text
| | 02:35 | box. So we are going to click on that
tool, and as soon as we click on that
| | 02:39 | tool, notice that our Property window
change, I'm going to go ahead and drag
| | 02:43 | out a rectangle, about the size of the
header image. If it's not exactly the
| | 02:47 | right size, I'll change it. And also
you will see that now there's a blinking
| | 02:53 | I-beam inside there, I'm
going to write Header Area.
| | 03:00 | Now I'd like to make this box so that I
can see the image below it and I'd like
| | 03:04 | to make the text so it's more legible
and easier to see. So I'm going to select
| | 03:08 | the text, go over to the toolbar, and
select 24, I'm going to leave the text
| | 03:17 | color Red, but I want this text to
appear on the right side so I'll Align
| | 03:22 | Right. I still can't see the image so
I'm going to click out of the box for a
| | 03:30 | moment and then click on the box again
to get the outside edge of the box, this
| | 03:35 | let's me change the features or the
look of the box, instead of having a fill
| | 03:41 | of white, I'll choose No Color. Now
we have transparency. I'll keep it red
| | 03:48 | because this is my wireframe and I
want it to show up on top of the web site,
| | 03:53 | the screen capture. I want it to be
a solid line and I'd like it to be 2
| | 03:58 | points, so that we can see it.
| | 04:00 | Now I can click off of the rectangle
and by clicking back on the rectangle,
| | 04:07 | notice that I get a Move tool, and I
can move this wherever I want it, and I
| | 04:13 | can make it exactly the size that I
need to make it for the header area, it
| | 04:16 | would be right here, and if I right-
click on this, I can say Make this Current
| | 04:23 | Properties Default, and I want to do
that, so that when I start making other
| | 04:27 | rectangular boxes with the text, that
they all appear to be the same. So I'll
| | 04:31 | click on that, and I'm ready to start
outlining and wire framing my entire homepage.
| | Collapse this transcript |
| Wireframing the structural elements of a website| 00:00 | So now for the fun part. We're going to
start by outlining the main structural
| | 00:06 | elements of this homepage. So we've
got our header area done, and now we are
| | 00:09 | ready to do our content area. I'm
going to scroll down to that area and I'm
| | 00:15 | going to click on my tool that has
text and a rectangle, and don't get too
| | 00:21 | picky with this. Just try to guess-
timate. These are not design or content
| | 00:26 | creation tools. You just have to play
along and they don't snap, so you just do
| | 00:30 | your best job.
| | 00:32 | And I'm going to go ahead and type
Content Area, as soon as you draw the
| | 00:36 | rectangle the I-beam pops itself
inside the rectangle. Click outside, then
| | 00:43 | click on the rectangle edge, and you
can resize this just the way you want it
| | 00:47 | to be. And you can just keep testing a
little bit to make sure that it matches
| | 00:52 | what you've got. Remember it's not
precise, just do the best you can. Here,
| | 00:59 | that looks good.
| | 01:02 | Now I'm ready to do the footer. I'll
scroll down to the bottom of the page,
| | 01:07 | click on the tool again, go ahead
and get it pretty much covered by the
| | 01:13 | Rectangle tool. Remember as soon as I
let go off the Rectangle tool, the I-beam
| | 01:18 | starts popping in. Type the words
Footer and then Area. Click outside of the
| | 01:26 | rectangle, click on the edge of it and
resize. It's a little hard to get used
| | 01:35 | to it first, but bear with it. It's
kind of fun once you get used to it.
| | 01:38 | That looks pretty good.
A little bit more over here.
| | 01:43 | Okay, I'm going to go back up to the
top, I'm happy with that, and ready to
| | 01:48 | start working on the sidebars. Again
I'll click on my Rectangle Text tool, draw
| | 01:56 | out my first rectangle. Try not to
touch the rectangle, so you don't end up
| | 02:00 | selecting it accidentally, I'll type
in Sidebar Left, click outside, and then
| | 02:10 | click on the rectangle and resize.
| | 02:14 | And I'm going to do something a little
bit different with this one. I know that
| | 02:17 | the content is going to flow all the
way down and the only reason that the
| | 02:21 | sidebar is visible right now is that
is all the content I have. So I want to
| | 02:24 | indicate to the client and to myself
and to the other people on my team that
| | 02:28 | the content could flow all the way
down to the footer, so I'm going to extend
| | 02:32 | that sidebar all the way down.
| | 02:35 | Same is true for the content area,
click on that rectangle and drag it down all
| | 02:40 | the way to the footer. So this
indicates even though I don't have content
| | 02:44 | currently that goes all the way to the
footer, that content could flow in that
| | 02:48 | area. Scroll back up and click on the
Rectangle tool, the text, and define my
| | 02:57 | second Sidebar.
| | 02:58 | Now if this happens, you accidentally
click on the wrong rectangle as you start
| | 03:03 | to draw, just click out and notice
that accidentally made another rectangle,
| | 03:09 | but there's no problem there, all you
need to do is just click on that outside
| | 03:13 | rectangle and delete it. Things like
this happen all the time, no big deal.
| | 03:17 | So I'm ready to go, drag this all
the way down, again all the way keep
| | 03:25 | scrolling down, go, the screen
withdraws a little bit slow, if that happens I'm
| | 03:31 | just going to go, go ahead and
type Sidebar, right. I'm just going to
| | 03:35 | abbreviate that this time, and then
click outside, click on the edge, and then
| | 03:43 | resize, I can do it a lot faster after
the fact. I'm just going to get it down,
| | 03:47 | as fast as you can and then come back
and tweak it, just the way you want it to
| | 03:51 | be. Scroll down to the bottom, so
again, I'll indicate that the content can
| | 03:56 | flow all the way to the bottom by
dragging the rectangle down to the top of
| | 04:00 | the footer area.
| | 04:02 | It's looking pretty good. I've got all
my main structural elements identified.
| | 04:07 | I'm going to click outside of the
rectangle to deselect it. I'm pretty happy
| | 04:10 | with it. Do a Command+Save, and to see
what we've done, I'm going to come up to
| | 04:15 | View and choose Full Screen Mode, or
Command+L, Ctrl+L, and look at what I've
| | 04:20 | done. Wow! That looks great. That's
real easy to see the structure and to see
| | 04:25 | the main section areas that I need to
define my layout and to start creating
| | 04:29 | the features and content areas for my homepage.
| | Collapse this transcript |
| Wireframing the feature elements of a website| 00:01 | We have identified all the main
structural elements of the homepage and the
| | 00:05 | wireframe is looking very, very good.
Now we will go on to identifying the
| | 00:09 | features and the main content areas
and the specific way we are going to mark
| | 00:13 | up this homepage.
| | 00:14 | We would like this a to look a little
different than the structural areas, so
| | 00:18 | we are going to go ahead and click on
our tool again and draw a rectangle and
| | 00:24 | change some of the properties.
| | 00:25 | I am going to go ahead and type just
gobbledygook for the moment, double-click
| | 00:31 | on that text, move the toolbar where
you can see what I'm doing and I want to
| | 00:36 | make the text green and I want to make
the font size 18 and I'll make that bold.
| | 00:44 | Then I'll click off that and click on to
the rectangle, click on the outline for
| | 00:51 | the rectangle and make that green as well.
| | 00:53 | So now we have a box that looks
different and we want to retain or keep that as
| | 00:59 | a default. So I'll select the Rectangle,
right-click on it and go ahead and Make
| | 01:04 | Current Properties Default. When I
delete this and draw out another rectangle,
| | 01:12 | it should have the same properties and it does.
| | 01:15 | So we will start off by the most
important feature that I can think of, which
| | 01:19 | is the Site Identifier and select the
outside, click on the box, drag it over
| | 01:28 | to where we want it to be and then go
ahead and resize that and again, I would
| | 01:35 | like that text, I'm not quite happy
with the text. If this happens, just go
| | 01:39 | back. I would like that
to be bold. It looks good.
| | 01:45 | Select that whole box one more time,
right-click and make the Current
| | 01:48 | Properties Default. Every time you
do this that sets that as the default
| | 01:53 | properties. I put my toolbar back up
where it won't get in the way, and now
| | 01:59 | I'm ready to go.
| | 02:00 | There are lots of different ways we
can do the wireframes inside of Adobe
| | 02:03 | Acrobat Pro. We have been drawing
them out one by one, but to speed up the
| | 02:08 | production we are going to start a new
technique which is to select one of the
| | 02:11 | existing boxes and do Command+C or Ctrl
+C and then do a Command+V or Ctrl+V,
| | 02:17 | then paste it right there. This
makes it very easy to start identifying
| | 02:23 | different parts of your web site. So
I want to do the primary navigation,
| | 02:29 | resize that box. There we go. Double-
click on that text and call this Primary
| | 02:37 | Nav. Select that side of it, just get
there where I can see what I'm doing,
| | 02:46 | bring that up right here. It looks good. Great!
| | 02:50 | Again, I'm going to do copy, paste,
drag it to the other side, this will be my
| | 02:58 | Secondary Nav. Double-click on the
text and all I need to change is the word
| | 03:06 | Primary to Secondary. Great! So I
have identified the Site Identifier, the
| | 03:14 | Primary Nav, the Secondary Nav.
| | 03:16 | Moving down on my features, I don't
really have a Location Indicator for this
| | 03:21 | homepage or a cookie crumb trail or
any of those things and each homepage is
| | 03:25 | going to have slightly different
features and unique content areas. So don't be
| | 03:29 | worried if yours doesn't look exactly like mine.
| | 03:31 | Let's go down to the body area, click
on our Rectangle tool and draw out a box.
| | 03:39 | There, I just did my copy, Paste again.
Call this Main Section Title. Great!
| | 03:55 | Click outside, anywhere outside, then
click on the edge. I'kk do another copy,
| | 04:03 | paste, drag this down over to a
subsection Title. Double-click on this and we
| | 04:11 | select the word Main and type Sub
and then close that up. There we go.
| | 04:19 | It looks good.
| | 04:20 | Let's just check out what we have
done do far. I'm going to go up to View >
| | 04:23 | Full Screen Mode to see how it's
looking. Yes, that's looking really good.
| | 04:28 | We know we have some work to do it down in
the content area and also down here in
| | 04:33 | the footer area.
| | 04:34 | So I'll hit the Escape key and go back into
the document. Moving on down, I'm going
| | 04:42 | to take that tool and select something
and select that, do another copy, paste
| | 04:51 | and this one will be our body text
and stretch that out to cover a whole
| | 04:59 | paragraph so that we can see that easily.
| | 05:01 | I will call this one Body Text. Great!
Then do another paste. Sometimes it
| | 05:15 | doesn't do that, just do copy, paste
again. Move this one up here to do an
| | 05:21 | embedded link. Double-click on that
font and type Embedded Link. Good. Get out
| | 05:40 | and then back in there by clicking on
that edge and just move it up a little
| | 05:45 | bit and enlarge that box just a little
bit so that we can see everything that's
| | 05:49 | going on. It looks good.
Great! I'm happy with that.
| | 05:52 | Go scrolling down to the footer area,
go ahead and do paste, great. Drag that
| | 06:01 | down here and resize again, cover that
footer area. I'm going to pull this way
| | 06:06 | out to the right. Double-click on
this text and this is where I put some of
| | 06:11 | that important information that we
find down here. We have our Contact Info.
| | 06:14 | Next line, we have our Legal Info/Date/
Copyright. Good and that's looking good.
| | 06:28 | Well, couple of more features that
are just unique to this web site. Let's
| | 06:31 | scroll back up to the top. We have a
calendar, we have a Showcase and some
| | 06:35 | Related Links and we should be able
to identify an image as well. So I'll click out,
| | 06:39 | I'll select another one. Copy, paste,
grab that, resize it. Double-click on
| | 06:58 | this, this is the feature and then
I'll call it Calendar. Click on the edge, copy,
| | 07:08 | paste, drag it over to the Showcase and
do that one more time. Do a paste then
| | 07:19 | drag it over the Related Links and
resize. It's still not quite right, we need
| | 07:27 | to rename it and resize this one. So we
will finish up. Even though these look
| | 07:31 | like images, they are
actually links to outside resources.
| | 07:34 | So I'll double-click on the word Calendar
and call this Outside Links & Resources
| | 07:48 | and then above that, I'll double-click on
the word Calendar and call this Showcase.
| | 07:54 | Go ahead and do a Command+Save or Ctrl+
Save. Let's look at it one more time in
| | 08:01 | Preview Mode. Go to View > Full Screen
Mode or Command+Alt or Ctrl+Alt. It's
| | 08:07 | looking really, really good. We have
got most of the things that we were
| | 08:11 | identifying as features.
| | 08:12 | Oh! I see one we haven't gotten. Let's
go back, hit the Escape, click on that
| | 08:17 | sidebar, do a copy, paste. Drag this
one over the image to identify a content
| | 08:27 | image. Even the word Welcome is also a
part of the image. Double-click on the
| | 08:33 | text, select it and type in Content
Image. Do one last check. I do Ctrl+Alt or
| | 08:48 | Command+Alt to see in the Preview Mode
and there you go. That's the finished
| | 08:53 | wireframe for the Pasadena City
College, Digital Media Center.
| | 08:57 | Now keep in mind, everybody is going
to have different features, different
| | 09:00 | content for their homepage, so everyone
doing this will have slightly different
| | 09:05 | look to their wireframe. In this case,
I was not able to find a site wide
| | 09:09 | utility. I don't have a Search or a
Login. I don't have a Locater device or
| | 09:15 | cookie crumb or breadcrumb trail to
find out where I am. There are no forums on
| | 09:20 | this page and there are no examples
of rich media, QuickTime movies, Flash
| | 09:23 | banners or any of thing like that, but
I have identified most of the features
| | 09:27 | and this gives you a great idea of what
wireframes can do and how they can mark
| | 09:31 | up your ideas for a homepage.
| | 09:34 | It's a wonderful tool and a great way
to let your client know what you are
| | 09:37 | thinking about and how you are
approaching your design process.
| | Collapse this transcript |
|
|
ConclusionA case study| 00:00 | Throughout this title, we have
talked about all the issues and all of the
| | 00:04 | things that a web designer/developer
needs to consider. We've talked about
| | 00:08 | design principles. We've talked about
structure and presentation, about HTML
| | 00:13 | and style sheets. We've talked about
the user experience. We've talked about
| | 00:17 | the importance of Information Design.
| | 00:20 | One way of looking at it and a way to
think to about it is it's a lot like an
| | 00:23 | iceberg. I call this the Iceberg Theory.
That the user only has a small idea of
| | 00:29 | what it actually takes for you to
design and deploy a web site. The tip of the
| | 00:33 | iceberg is really the
homepage and all the secondary pages.
| | 00:37 | But what lies beneath for the user is
the fact that you've been thinking about how
| | 00:41 | to be consistent, how to optimize
their experience, how to provide great
| | 00:44 | experiences and how to link all these
different and disparate elements together
| | 00:49 | to create one unique important
experience for them. That allows them to access
| | 00:54 | services, to make purchases, to learn
things, to access the content. Because
| | 00:59 | really what is it all about? It's
to access content and to have a great
| | 01:04 | experience on the internet.
| | 01:06 | So let's go out and look at Google
for just a movement. It's a good site to
| | 01:09 | show for these kinds of features and
to talk about the tip of the iceberg.
| | 01:13 | This is the homepage for Google. It probably
has the largest target audience of any
| | 01:19 | web site that I can think of and it has
main objective that its target audience
| | 01:24 | is looking for: to search through
information and to find it hopefully
| | 01:28 | on a first pass.
| | 01:30 | It's a simple web site. It uses a lot
of the design principles we've talked about.
| | 01:34 | It has a page title. You
know you are at Google. It uses a site
| | 01:38 | identifier, the Google logo, and
yet they have the sense of fun about
| | 01:42 | themselves and they often customize
it according to the holidays or what's
| | 01:46 | going on in the world. So even though
right this moment, it is referencing the
| | 01:50 | summer Olympics, we still know
that we are at the Google site.
| | 01:53 | The main content area, which is to find
information, is forthright, prominent,
| | 01:59 | up in front, in center. And then the
ability to connect, to get support,
| | 02:04 | to know when the web site was last
updated appears at the bottom. They certainly
| | 02:08 | follow the rule of above the fold line,
which newspapers have coined from years
| | 02:12 | and years ago. That no matter what size
the browser is or what size screen you have
| | 02:16 | or what size connection you have,
that the experience will be the same.
| | 02:20 | No information is lost.
| | 02:22 | Now Google is an extreme site with an
extreme service and only one purpose in
| | 02:26 | mind, to do one thing for the largest
audience and you will have to deal with a
| | 02:30 | lot of design problems that are much
more complicated then this. And yet,
| | 02:33 | if you about the size of the audience
that they are targeting, they do have some
| | 02:37 | pretty amazing things
that they have to deal with.
| | 02:40 | Taking a look at their preferences
actually starts to take you behind the
| | 02:44 | scenes of what Google really has to
deal with. Look at all the languages that
| | 02:47 | Google supports. That means there is
style sheet for each one of those.
| | 02:51 | That means there is a web page with a
DOCTYPE for each one of those. That means
| | 02:54 | there is JavaScript and cookies and
kinds of things behind each one of the web
| | 02:59 | pages that gets downloaded for
every single person accessing the site.
| | 03:03 | If we go back and look at some of the
other things, they have language tools
| | 03:06 | and out of this desire to do this one
thing the best of anyone, they've created
| | 03:11 | all kinds of tools and ways for us to
search that we didn't even know existed.
| | 03:15 | The consistency they use throughout,
their attitude about being clean, mean and
| | 03:20 | lean shows up in every thing they do.
If I move from shopping, it still looks
| | 03:26 | like Google. If I go to news, it
still looks like Google. If I turn off the
| | 03:32 | style sheets in this most complicated
page of the Google web site, you will see
| | 03:37 | that it still reads. It barely changes.
They have consistent viewing and they
| | 03:42 | have consistent experience.
| | 03:43 | They reuse images again and again.
They use their style sheets externally.
| | 03:47 | They use their JavaScripts and their
other scripts externally. It's not heavily
| | 03:51 | laden with big images; it's not
heavily laden with animation. It's all about
| | 03:57 | the user having the best optimal experience.
| | 04:00 | Even when we go to images, which is
probably their most heavyweight potential site,
| | 04:05 | if I type in the word stop sign,
click on Search Images, it's almost like
| | 04:12 | it knew what I wanted before I even
clicked on the button. That's how fast this
| | 04:16 | web site works. It's been optimized
behind the scenes to work consistently to
| | 04:21 | give you the best user experience.
| | 04:24 | The thing I like most about Google is
it almost is as like a friend. It feels
| | 04:27 | like it's there for me, that I can
personalize it, that I can make it my own place.
| | 04:31 | It's all about me and my experience.
And when you make it all about me,
| | 04:35 | about your user, you have great
experiences. And when your can accomplish his task,
| | 04:40 | get the content that he is
looking for, your user is going to have a
| | 04:44 | wonderful experience and come back
to your web site again and again.
| | 04:47 | This is what a good web site design is
all about. It's not just what we see;
| | 04:52 | it really is about the whole iceberg.
| | Collapse this transcript |
|
|
