This page is the Resources page for the WIA Web Design & Development Program at SDFF. Here you’ll find all the topics taught in class, questionnaires and important links to more references pages that will let you expand what you are learning!
[tab name=”HTML – CSS”]
HTML
HTML stands for HyperText Markup Language
HyperText: link to other text via hyperlink.
Markup: semantic structure and metadata describing content
Language
HTML uses tags to identify content
I’m a paragraph
I’m a heading style 1
Resources: HTML Basics
CSS
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
Box Model
Resources: http://www.w3.org/Style/CSS/current-work
CSS Syntax
Download CSS Cheat Sheet
Color and the web
Meaning of colors: http://www.sibagraphics.com/colour.php
Color Matters: http://colormatters.com/
Web Typography
CSS and Fonts: http://www.w3schools.com/css/css_font.asp
Online Source: http://cssfontstack.com/
CSS Layouts:
Static vs Dynamic Sites
Static
- A static site is one that is written in HTML only.
- Each page is a separate document and there is no database that it draws on.
- the only way to edit the content of the site is to go into each page and edit the HTML.
Dynamic
- A dynamic site is written using more complex code and have more functionality.
- Each page is constructed based on the information in a database, the database’s information can be changed via another interface.
- Dynamic sites make data management much more efficient and the web site more expandable.
Online Resources for Web Designers
Color: https://kuler.adobe.com
http://0to255.com/
Typography: http://csstypeset.com/
Font Scale and Rhythm: http://lamb.cc/typograph/
Design elements for backgrounds: http://www.stripegenerator.com/
Grid Generator: http://www.gridsystemgenerator.com
Button Maker: http://css-tricks.com/examples/ButtonMaker/#
Menu Maker: http://cssmenumaker.com/
Layout Generator: http://csslayoutgenerator.com/
Dummy Text Generator/Lorem Ipsum: Lorem Ipsum
Scripts: http://www.script-tutorials.com
Online Learning:(extending and improving your skills) Code Academy
[/tab]
[tab name=”Web Ecosystem”]
Web Ecosystem
- A website is a collection of documents known as webpages (or pages for short) that contain information (data): images, words, digital media, etc. The main page in a website is called a homepage, and other pages in a website are called subpages. These are connected by hyperlinks, which are spots on a page (usually text or images) that, when clicked, take the user to different location
- Clients are computers that access the web in any way.
- Browsers are programs that render content on the web, most often HTML pages and related resources. A browser is made up of multiple parts, and some parts are shared across browsers.
- HTML is a “markup language” that describes a webpage.
- A web server is simply a computer program that dispenses web pages as they are requested.Web server can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver Web content.
Breakdown of an URL
URL is an acronym for Uniform Resource Locator and it can be thought of as the “address” or “web address” of any element in a website.
The protocol enables the browser and server to communicate with each other. Since the server can handle many programming languages we must identify what we are saying.
Common protocols include:
http: Hyper Text Transfer Protocol – common websites
https: Hyper Text Transfer Protocol – secured websites
ftp: File Transfer Protocol – used for servers who handle file uploads and downloads
mailto: mailservers
Domain Names:
Every house in the world has a different address. The same is true for computers. They must have their own address to distinguish themselves from other computers. This is done by an Internet Protocol (IP) which is a series of numbers and dots.
Domain: YOURDOMAINNAME.COM I.P. 108.233.117.193
These numbers are difficult to remember so domain names were created. These are given words that make sense to the reader and are linked to the I.P. address. This way the user has something easier to remember.
Tools: http://whatismyipaddress.com/ip-tools
Popular Domain Extensions
The top level domain (TLD) is a way of identifying the purpose of a website.
ICANN – http://www.icann.org/
IP and Server Requests
The browser asks “name servers” to figure out what IP the server name corresponds to.
IP Address: All computers attached to the internet have one.
Domain name server (DNS)
Takes a domain name and returns the IP address for that site.
Client (what you normally use. Your Browser is the client)
Server (this is the computer that has the Web pages on it)
Standard Technologies behind Web Sites
HTML/ HTML5
XHTML
CSS
PHP
MySQL
Apache
Javascript
JQuery
WebGL
Adding functionality to FF
Browsers’ Questionnaire:
- What is a Browser?
- What is a client?
- How do browsers work? Describe briefly how web pages are displayed on browsers
- What browsers do you know?
- Which big web company created Internet Explorer?
- What web company introduced Chrome?
- What browser is the most popular? Search online and look into current statistics.
- What is an URL?
- What different domain extensions do you know?
- What is HTML?
- What are the most common protocols?
- find an example of a hypertext transfer protocol secured URL
- Name 3 of the standard technology behind a web site.
- How can you extend the functionality of a browser?
[/tab]
[tab name=”Evolution of Web Design”]
Week 1
Web Design early 1990’s
Web Design circa 1996
Flash Web Design late 1990’s
Early to Mid 2000’s Web Design
Mid 2000’s Web Design
Current trends with basic tools
Looking back: How 20 popular websites looked when they launched
Types of Websites
- Personal Websites (individuals – groups)
- File Sharing Websites (flickr, picasa, youtube)
- Community / Social Network Websites (myspace, facebook, devianart)
- News – Magazines (huffington post, nytimes, google news)
- Review Sites (yelp, insider pages)
- Blogs (individuals – small business)
- Image Gallery/Portfolios (cargocollective)
- Informational Websites (wikipedia, reference)
- Online Business Brochure/Catalog (small business – corporations – non profits)
- E-commerce Websites (amazon, blik)
- Image bookmarking (pinterest, fffound!)
Types of Website Questionnaire:
- Name 5 different types of websites (add an online example of each copying the URL)
- What type of websites do you usually visit?
- What type of web content are you interested in?
- What is your favorite website? Add the URL
- Describe briefly the functionality on your favorite website
- What do you usually do on the internet?
- What differences can you find between early 90’s web design and the current trends?
- Have you ever looked at your favorite website’s source page?
Web Design Process:
Deconstructing a Web Page
Related article: Smashing Magazine
Elements of Web Design
- Navigation Menu
- Links
- Call to Action Buttons
- Banners
- Forms
- Page stretching
- Animations: pop-ups, tooltips, transitions, etc…
- Images
- Multimedia files
- Search Box
- Read More, Continue reading links
- Breadcrumbs
- Date stamps
“Above the Fold” is a newspaper term that has been adapted to web design. Originally, it referred to the information that was on the front page of a newspaper on the top section.
In website design, “above the fold” is equally applicable in the sense that the most important or actionable information should be visible without people having to scroll down.
Questionnaire #2
- Identify 5 web design elements on the deconstruction site (i.e.: banners, navigation menu, images, etc…
- What elements does this website has in common with your favorite website?
- What type of website is Smashing Magazine?
- What comments were positive about Smashing Magazine Home Page?
- What comments were negative about Smashing Magazine Home Page?
- Compared with previous designs, how smashing magazine has improved its User Interface?
- List 5 web design elements (or terminology) you weren’t familiar with
Looking ahead:
WordPress Showcase
Check out the gallery of websites built with WordPress
[/tab]
[end_tabset]