This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes. Along the way we will also discuss: - Responsive web design and mobile web challenges - Mobile-first approach - Web typography - The relationship between design and programming and whether it is important to know how to code - The different web technologies that make the web work, such as HTML, CSS, JavaScript, server-side coding, and databases. This course is the continuation of the course Web Design: Strategy and Information Architecture, in which students completed the first half of a large scale project—developing a comprehensive plan for a complex website. If you are intending to complete the assignments in this course to earn a certificate you must complete the Strategy and Information Architecture course first so you have the materials and data needed to begin creating wireframes and mockups in this course.
Survey of Web Technologies
Loading...
來自 California Institute of the Arts 的課程
Web Design: Wireframes to Prototypes
個評分
從本節課中
An Excursion to Codelandia
This week, you’ll continue the visual design of your websites, refining the look and feel based on peer feedback. Having worked on the homepage mockup last week, it’s time to design the remaining screens. As an important aside, I will take you on a short expedition to the land of code. Although this specialization isn’t about learning how to code, I want to at least introduce you to the technologies that make the web work. And we’ll look at a few coding examples. After all, the web is built upon certain languages—HTML, CSS, and JavaScript. in order to be an effective UX designer, it is helpful to have a rudimentary understanding of these technologies.
與講師見面
Roman JasterVisiting Faculty, Program in Graphic Design
School of Art
I think it's helpful to begin by surveying the field of web technologies.
What are the different pieces necessary to make the web work?
Here's a list of technologies that I'm going to talk about.
We have HTML and CSS,
JavaScript, something called jQuery, server-side coding,
databases, content management systems or CMS,
and lastly, web browsers.
Some of these terms you surely have heard before,
but I want to make sure that you understand what they actually mean.
So, let's start with HTML.
That's probably the most fundamental language for the web.
It stands for Hyper Text Markup Language.
That's where the HTML comes from.
Its main task is to simply define the structure and content of a webpage.
You could also say that you are marking up the page.
That word markup is obviously in the title of the language itself.
Hypertext refers to the ability to create links with
HTML so you can click on a word and jumped from document to documents.
Let's take a look what this code actually looks like.
Here's a very, very simple HTML
document that basically defines a page that is called "My Site."
It has a headline, "Welcome to my site " and one paragraph that says,
"This site is pretty great."
All the texts that is right here in this example is the HTML code.
Those are called tags. They come in pairs.
So, the very first line opens a tag called html,
and the very last line here closes it.
The same with the head tag or the body tag.
When you load such a document in a browser,
you get a very simple representation of the HTML. Here it is.
So the headline is a little bigger than the paragraph,
but it's very simple black text on a white background.
Now if we want to make this look somehow different,
if you're going to change the typefaces,
or the background color, or sizes,
or what have you, we need a different language.
That language is called CSS.
That stands for Cascading Style Sheets.
With it, you can determine the presentation of a webpage.
So, the look and feel.
So, let's look at some example code.
Here I have three CSS declarations that
change the appearance of particular tags in my HTML code.
Namely the body, the headline, and the paragraph.
You can kind of see what's going on.
So, for the body, the background color is changed and there's some padding added.
The headline gets a different font size,
and a different color, and a different font weight etc.
If we look at this document in our browser,
you see that, in fact,
we have a yellow background with a blue,
bigger headline, and the typeface for the paragraph has changed to a Sans Serif.
What's nice about having HTML and CSS as two different languages is that it allows you
to define the structure with one language and the presentation with another.
So theoretically, you can have the same HTML code and exchange one CSS document with
another so that a site could look completely different with a different color scheme,
different type sizes, different background images even.
So, the exact same HTML file can be presented in a very different way.
Let's move on to JavaScript.
That is an actual programming language that allows for
more interactivity on websites. A quick side note.
One could say that when you're writing HTML and CSS,
you're definitely coding but you're not programming.
One is a markup language,
one is a styling language,
but they are not programming languages.
JavaScript is.
As I said, it allows you to make pages more interactive so you could show,
or hide, or replace elements.
You can use it for form validation,
you can load new content.
JavaScript is usually triggered by events,
so something a user does.
Maybe moving the mouse triggers something,
or clicking a link does something,
or even leaving a website might trigger JavaScript.
You might have seen that before in an annoying way where
an app pops up as you're trying to close the browser window,
or in a very helpful way where you have written an email and you're
mistakingly closing the window and the browser actually can warn you to save your work.
Let's look at some code here too.
You'll notice whereas HTML and CSS were somewhat
understandable even if you aren't familiar with the language,
Javascript is fairly verbose.
There's a lot of weird syntax going on,
and it's probably not apparent what this particular piece of code does.
What it does do is a simple effect that if I hover
my mouse over the headline, it changes color.
So, it goes from blue to red on mouseover.
It's obviously a very simple example,
but you can see how something that I did as the user triggered something to happen here.
JavaScript can also be described as client-side code
meaning that the code is downloaded as text into the browser.
It's loaded from the server and then executed on the client side,
the client being the user.
One could say that it's much more difficult to learn than HTML and CSS because it
is an actual programming language and the concepts are a little bit more complex.
But for novices and if you're not familiar with JavaScript,
there are plenty of open source JavaScript plugins available.
Many of them are free and those can add
some sophisticated effects to your website like a lightbox or a slideshow.
So, even if you don't have JavaScript programming experience,
you still have access to some fancy JavaScript behavior.
Now, another term you might have heard before is jQuery,
and that actually has a lot to do with JavaScript.
The j here, in fact, stands for JavaScript.
It is simply a JavaScript library.
A lot of people like to use it because it's often much simpler to use
that library rather than writing pure JavaScript.
The library also offers better cross-browser compatibility for JavaScript.
That used to be more of an issue a few years ago when
browsers had different implementations of JavaScript.
That is getting more uniform these days,
but jQuery still is a tool that a lot of developers use.
If we look at some code here,
you can see how one line of jQuery does the job of many lines of JavaScript.
This is a simple example of using JavaScript to animate an element to the right,
so moving it 100 pixels from the left to the right.
Although you might find the JQuery syntax a bit verbose,
there's a lot of parentheses, and curly brackets,
and semicolons, and a dollar sign but
the jQuery version of this code is very brief for us to JavaScript.
You need to write a lot to make the same thing happen.
The next item on our list is server-side coding.
I just said that JavaScript is client-side coding.
Now, there are also programming languages that run on the server,
and some of these you might have heard.
You probably have heard of PHP before,
but there's a Microsoft technology that's called.Net then there is something called
Node.js and Ruby on Rails has also gotten quite popular in recent years.
Server-side coding is used to create page content on
the fly dynamically on the server depending on user input.
So you can imagine logging into your email inside of
your browser and you have to put in your password and your username.
That is sent to the server and then some code on the server runs.
First, it checks if your password and username are correct.
If they are, then it creates an HTML page that contains all your email,
and that is sent back to the browser, the client.
So, the code runs on the server,
and all it does is create new HTML documents that are sent back.
Something that's often very important when you use server-side code is to store data.
I just talked about it, password and username.
Where is that stored?
It's stored in databases.
Here is some examples.
MySQL is a popular open-source one,
but there are others like Microsoft SQL Server or mongoDB.
Again, databases allow you to store data that can then be used to
create web pages so you can access that data inside a browser.
CMS or content management systems are quite popular these days because they
allow a client or someone that doesn't know how to code to create new web pages,
and add content, and change content.
They also allow developers to create web pages in
a more streamlined fashion where you don't have to
reinvent the wheel every time you create a website.
The most popular open-source content management systems are probably WordPress,
Drupal, and Joomla, with WordPress being the absolute number one.
But there are commercial ones too like Squarespace or
Shopify even Tumblr you could say is a CMS.
Even Facebook, if you think about it, is a system.
It's closed, and it's commercial,
and you can't change it but it allows people (users) to add content to website.
So, content management systems provide
sophisticated back-end functionality making it easy to update a site.
There are often also plug-ins that are available for CMS that offer extensibility.
Maybe you want to add a form to a website, well,
then you download a form plugin,
let's say, for WordPress or Drupal.
Or you want to check user comments for spam,
there are plug-ins available for that.
Again, a CMS provides a great starting point to
develop a dynamic and interactive website.
So, if you want certain components like blogs,
or user comments, or creating user accounts, or having e-commerce.
Usually, you don't want to create that from the ground up,
but you want to have some pre-existing components that you can
put together and customize and make the development quicker,
and also less error-prone.
Because you're working with code that has been tested and
a lot of bugs have already been taken care off.
Then lastly, we have our user agent itself;
the thing that lets people actually access websites. The web browser.
That obviously plays an important role for web design.
Obviously, there isn't just one browser but multiple ones.
You can see here the logos for Safari, and Internet Explorer,
and Opera, Google Chrome,
Firefox, and Microsoft Edge.
That browser, by the way,
has surpassed the Internet Explorer.
Internet Explorer is actually not being developed anymore.
Now, it's called Microsoft Edge.
What a Web browser does is it interprets HTML, CSS, and JavaScript.
When I say interpret,
that means different browsers might interpret code slightly different.
So, you have to watch out for that.
That also means that you need to test your websites in different browsers,
and actually different devices,
and different operating systems.
So, testing website is actually quite important,
and it can be a quite complex process.
The affordance of a website to be able to be accessed on all kinds of devices,
on all kinds of screens,
on all kinds of operating systems,
and all kinds of different browsers also increases the complexity for the developer.
Another thing to keep in mind is that new developments in web design,
things that are possible,
they're largely dependent on browser makers implementing new features.
So, a few years back,
there was something that was called HTML5 and CSS3,
you might have heard about those,
and all of a sudden,
new features were available for web designers.
These new features even changed the way websites looked,
and how they functions.
Then you can also have plug-ins for web browsers,
and those offer extended functionality for the user.
So, for example, you might install an ad blocker to see less ads.
Or people that use Pinterest a lot,
they might install a Pinterest button that allows
you to add any image to your Pinterest account,
or their password managers,
or download helpers, you name it.
Let's look at a few stats in terms of which browsers are most popular.
You can see here that Google Chrome,
although it was introduced in the late 2000s,
has had this insane successful run going from almost being
nonexistent to capturing almost 70 percent of the worldwide desktop browser market.
You can see the opposite for the Internet Explorer or now called Edge.
That used to be the browser that was used the most,
but it has clearly lost a lot of popularity.
But I would say today,
all of these browsers Chrome,
Firefox, Edge, Safari, Opera,
they're all great browsers.
You can use whichever you like.
I actually I'm quite partial to Firefox.
But what I would recommend for a web developer is to actually have access to all of them.
Install them because you need to test your websites in all of them.
Then lastly, let's look at the operating systems, and their popularity.
You can see that windows used to have a monopoly in
the late 2000s but that has changed dramatically too.
It has changed because of the popularity of smartphones.
The most popular smartphones run on either Android or iOS.
If you add up some of the numbers here,
iOS has about 15 percent,
Android, a little over 40%.
You'll see that there are over 55% of mobile users,
and you'll realize that most people nowadays access the web via a mobile device.
That's something we've already talked about,
something to keep in mind that mobile is not an add-on or a special case.
It's actually the default nowadays.
Quick summary.
This is what we talked about.
So HTML is about content and structure.
CSS is about formatting that content.
JavaScript is about adding interactivity.
JQuery simply makes JavaScript a little easier and more intuitive.
Server-side coding is to create dynamic content that is then served to the browser,
and databases store information.
Content management systems let you create easy-to-update websites and then lastly,
web browsers, obviously, display websites,
and let you navigate them.
