Difference between revisions of "Week One (MGDP2050)"
Karl Jones (Talk | contribs) (→File Transfer Protocol (FTP)) |
Karl Jones (Talk | contribs) (→LAMP, MAMP, XAMPP, etc.) |
||
| Line 16: | Line 16: | ||
See: http://htcwebcreative.com | See: http://htcwebcreative.com | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
=== Fundamentals of web design and development === | === Fundamentals of web design and development === | ||
Revision as of 07:48, 2 February 2016
Lecture notes and exercises for Week One of Web Design and Development II (MGDP2050).
Contents
Lecture notes
Browsers
See Web browser.
Browser tools
See Web browser tool.
HTC web creative dot com
The domainhtcwebcreative.comis available for student use, with some cautions and restrictions.
See: http://htcwebcreative.com
Fundamentals of web design and development
Bootstrap
Bootstrap is a framework for responsive web design.
General discussion:
Getting started, and download Bootstrap:
Frameworks, libraries, etc.
The difference between a framework and a library is often arbitrary and subject to debate over definitions. Both are software which share common principles and serve similar purposes.
In general, a framework is larger and more comprehensive software, while a library is smaller and does less.
Exercises in-class tonight
Update: do this by next week -- lecture ran late, you get more time.
Folder structure
Create a folder for your class work.
The term local root folder (or root folder, etc.) refers to a folder which is:
- Local (the folder is on your computer, not across a network)
- Root (the folder represent the root of a website, where the home page is typically located
Choose a folder name which is memorable and convenient for you. File names and folder names are tools for helping you work with information.
This folder can reside on a classroom workstation, on a jump drive, or elsewhere.
You can copy the folder from workstation to jump drive to workstation (etc.) as often as you like.
Be careful to keep track of which is the working version, and which are backup or obsolete versions.
Download Bootstrap
Download Bootstrap. Put the files in your class work folder.
Make a web page
Create a text file named index.html. This will be the home page for your classroom work.
Save the file in your local root folder.
You can use any text editor to create and edit the document.
- CAUTION: do not use Microsoft Word or similar word processor programs.
- Word processors are typically not suitable for editing
Copy the Bootstrap template code and paste it into index.html.
Bootstrap folder
Put your downloaded Bootstrap folder in your Local Root Folder.
Bootstrap template
Copy the Bootstrap template example, and paste into index.html.
Page title
Find the title element. Change the default text to something like:
Home - Student name
or:
Student name : Home page
Or some similar arrangement, your choice.
Page titles typically have two parts:
- Identify the website
- Identify the individual page
Fixing the CSS path
The default template example code is not correct.
Try browsing the index.html. The font family is serif. Since the Bootstrap framework uses sans serif, the Bootstrap CSS must not be active.
Find the link element, and update the path. Typically you need to change css/ to bootstrap/css/.
Override CSS styles
In your index.html page, add a link to an external style sheet. (You must also create the style sheet.)
Make some visible change to the CSS. This can be a token gesture, like changing the page background, or a more comprehensive set of style changes (which will are required to do by next week, in any case).
Browse your work
Browse your index.html page. Confirm that your CSS changes are visible.
Save your files.
Exercises due by next week
Upgrade the template example
Modify your template example to suit your own personal taste.
- This page will become a table of contents, where you will provide links to various other pages that you will create later in the semester.
- It must be readable, but other than that, you are free to style the page any way you like.
- You will re-use these styles with many (not all) of the other pages you create later.
- You may continue to modify these styles through the semester, as you like.
- This is a general test of "can the student modify the default CSS, with readability and some design sensibility, and carry it through to other pages later"
- It is not a specific test of "how much HTML and CSS do you know". Use much or little, as you like.
- This page, and others like it, are "framework pages" -- useful for the instructor to navigate, and must comply with good web design practices, but only a supporting task, not a major exercise.
If you really, truly prefer the default Bootstrap styles because they are to your own personal taste, this is not a problem. Speak to the instructor about alternative strategies, all of which involve the student demonstrating the ability to override default styles in a comprehensive and cohesive manner.
Be familiar with FTP
When the instructor provides FTP credentials, are you able to log in and transfer files?
Review the basics
Anything related to HTML and CSS.
We will look at JavaScript later in the semester. At this point, JavaScript is an advanced topic, not a basic.
Responsive web design
Do your own reading about responsive web design.
We will discuss this topic extensively in the next several weeks.
