My web design class is over, hence the lack of posting. However, you can find latest posts by me on my new site for my Digital Marketing course!
http://digitalmarketingschools.wordpress.com/
I will be blogging about top/best digital marketing schools and other digital marketing topics. Happy reading!
Monday, October 8, 2012
Wednesday, April 11, 2012
File Transfer Protocol
After you design a website, you need to transfer it to a web server. A host is required at this point.
That's where File Transfer Protocol (FTP) comes in. Several software packages that allow you to FTP are WS-FTP, CuteFTP, Fetch (for Macs), FileZilla or Dreamweaver. Dreamweaver is a web editing tool used in this Web Design course that has a convenient FTP feature.
Our personal host names for the university are http://www.personal.umd.umich.edu/~uniquename.
For people not using personal hosting through our university, you need a domain name.
For FTP, you need four things to get started!
1. Name of Host
Ex. allencreek.org is reserved as a domain name for ten years. The name for the host maps to the
website name.
2. Username
For students at UM-D, it's the student's uniquename.
3. Password
4. Directory/Public Folder
For UM-D, it's under the Public/HTML folder
So your personal website http://www.personal.umd.umich.edu/~uniquename will be mapping to your Public/HTML folder.
That's where File Transfer Protocol (FTP) comes in. Several software packages that allow you to FTP are WS-FTP, CuteFTP, Fetch (for Macs), FileZilla or Dreamweaver. Dreamweaver is a web editing tool used in this Web Design course that has a convenient FTP feature.
Our personal host names for the university are http://www.personal.umd.umich.edu/~uniquename.
For people not using personal hosting through our university, you need a domain name.
For FTP, you need four things to get started!
1. Name of Host
Ex. allencreek.org is reserved as a domain name for ten years. The name for the host maps to the
website name.
2. Username
For students at UM-D, it's the student's uniquename.
3. Password
4. Directory/Public Folder
For UM-D, it's under the Public/HTML folder
So your personal website http://www.personal.umd.umich.edu/~uniquename will be mapping to your Public/HTML folder.
Wednesday, March 14, 2012
Design Notes and Wireframes
Hyphens are better to use for SEO:
race-car-engine.html
rather than
race car.html which a browser might turn into: race%20car.html
Creating a wireframe allows you to further your design plans by organizing a layout before you actually are constructing it in Dreamweaver.This site will be used to create wireframes to plan for the final project website.
race-car-engine.html
rather than
race car.html which a browser might turn into: race%20car.html
Creating a wireframe allows you to further your design plans by organizing a layout before you actually are constructing it in Dreamweaver.This site will be used to create wireframes to plan for the final project website.
Wednesday, February 22, 2012
Advanced Tables, Forms and HTML Day 1
- Content in title tags are what show up at the top of the browser as the title (ie. <title>Forms Practice</title>
- Inside the computer's public folders, there should be a public HTML folder by the Professor. All those documents are viewable by anyone.
- When you fill out a form, the information goes from the HTML form to a CGI Script. From there, the information can go to update a database, go to an e-mail address, create an e-commerce transaction, or update another website (such as C-Tools or Blackboard).
- Sample Demo shared in class: The Professor's Form
Check Boxes allow for more than one selection.
Text Areas allow for large areas of space for people to add text.
- Form tag needs several values.
<form method="post"
action="http://www-personal.umd.umich.edu/cgi-bin/htmail/shahnazk@umd.umich.edu">
<div align="center"><b>Sample Form</b></div>
This will look like:
Practice with Forms
<p>2. Please enter your e-mail address.
<input type="text" name="from" value="Your e-mail here">
<input type="text" name="from" value="Your e-mail here">
The value puts the quoted words into the box on the form.
<p>3. Would you like to be added to our mailing list?
<input type="radio" name="3_MailingList"
You shouldn't have space, put an underscore to make the code work.
_____________________________________________________
With these tags, you can build a form:
<html>
<head>
<title>Forms Practice</title>
</head>
<body>
<h1>Practice with Forms</h1>
<!--BEGINNING OF FORM-->
<form method="post"
action="http://www-personal.umd.umich.edu/cgi-bin/htmail/const@umd.umich.edu">
<p>1. Please enter your first name
<input type="text" />
</p>
<input type="submit" />
</body>
</html>
This will look like:
Practice with Forms
1. Please enter your first name______________________________________________________
This is an almost final form:
These are the sequence of codes used to create it all:
<html>
<head>
<title>Forms Practice</title>
</head>
<body>
<h1>Practice with Forms</h1>
<!--BEGINNING OF FORM-->
<form method="post"
action="http://www-personal.umd.umich.edu/cgi-bin/htmail/const@umd.umich.edu">
<p>1. Please enter your first name.
<input type="text"
name="1. First Name" />
</p>
<p>2. Please enter your e-mail address.
<input type="text" name="from" value="Your e-mail here">
<!--The line break after the question allows the circle for people to check
to have the word Yes.-->
<head>
<title>Forms Practice</title>
</head>
<body>
<h1>Practice with Forms</h1>
<!--BEGINNING OF FORM-->
<form method="post"
action="http://www-personal.umd.umich.edu/cgi-bin/htmail/const@umd.umich.edu">
<p>1. Please enter your first name.
<input type="text"
name="1. First Name" />
</p>
<p>2. Please enter your e-mail address.
<input type="text" name="from" value="Your e-mail here">
<!--The line break after the question allows the circle for people to check
to have the word Yes.-->
<p>3. Would you like to be added to our mailing list?
<br />
Yes
<input type="radio" name="3_MailingList" value="Y"
checked="checked"/>
No
<input type="radio" name=3_Mailing List" value="N"/>
</p>
<br />
Yes
<input type="radio" name="3_MailingList" value="Y"
checked="checked"/>
No
<input type="radio" name=3_Mailing List" value="N"/>
</p>
<br />
<input type="submit" />
</body>
</html>
Wednesday, February 15, 2012
HTML Day 3
Absolute Paths mean that an image linked to a website must be accurate. Some website have missing image symbols because the picture is no longer available via a different website or in the folder where it used to reside.
<img src="lily.jpg" height ="225" width="169" alt="picture of a lily boarder="0" />
"src"
- indicates the location of the image
"height"
- defines how tall the image is in pixels
"width"
- defines how wide the image is in pixels
"border"
- thickness of border around image in pixels
- border="0" turns off border entirely
- it's a good idea to use a border size because if the image is no longer accessible by the system, then the border will still appear letting visitors to the site know that there was supposed to be an image there.
"alt"
- alternative text to display (instead of image)
- this allows the user to have a correctly loaded page in case they have turned off images in their browser
dots indicate how many folders to get into
* Use a good description of the image, name of product so it's easier to idenfity
*Always lower case file names or hyphens so the browser can recognize the folder.
<img src=".../../lily.jpg" height ="225" width="169" alt="picture of a lily boarder="0" />
so it's ../comp300
GIF Files: produce best results when the image is under 256 colors. They support transparency and support animation.
JPEG Images: produce best results for photographs and have huge compression ratios.
Links!
<a href="http://www.yahoo.com">Yahoo</a>
Link colors are important so people can keep track of what they've visited.
A link appears blue.
Once a site is visited, the link turns purple.
Active state is red. The font is standard, Times New Roman size 12 font.
<img src="lily.jpg" height ="225" width="169" alt="picture of a lily boarder="0" />
"src"
- indicates the location of the image
"height"
- defines how tall the image is in pixels
"width"
- defines how wide the image is in pixels
"border"
- thickness of border around image in pixels
- border="0" turns off border entirely
- it's a good idea to use a border size because if the image is no longer accessible by the system, then the border will still appear letting visitors to the site know that there was supposed to be an image there.
"alt"
- alternative text to display (instead of image)
- this allows the user to have a correctly loaded page in case they have turned off images in their browser
dots indicate how many folders to get into
* Use a good description of the image, name of product so it's easier to idenfity
*Always lower case file names or hyphens so the browser can recognize the folder.
<img src=".../../lily.jpg" height ="225" width="169" alt="picture of a lily boarder="0" />
so it's ../comp300
__________________________________________________________
JPEG Images: produce best results for photographs and have huge compression ratios.
__________________________________________________________
Links!
<a href="http://www.yahoo.com">Yahoo</a>
Link colors are important so people can keep track of what they've visited.
A link appears blue.
Once a site is visited, the link turns purple.
Active state is red. The font is standard, Times New Roman size 12 font.
Wednesday, February 8, 2012
HTML Day 2, Part 2
Lists
Ordered: alphabetical or numeric, Non-Ordered: bullet list
<ol> tag to start list
<li> tag is for every item
example:
<ol>
<li>Blue</li>
<li>Red</li>
<li>Green</li>
<li>Orange</li>
</ol>
The example will look like this:
More Developed Version of Code
<html>
<head>
<title>About Me - Insert Name
</title>
</head>
<body>
<p align="center"><em> This page is an overview of my work and interests.<br /> <strong> If you have any questions, please contact me at (insert e-mail).</strong>
</p>
<h1 align="center">(insert name)</h1>
<hr width="75%" />
<p align="center">Here you will read a little about me!</p>
<h2>Ahhh, a Poem</h2>
<p>This is just a poem<br />
to convey line breaks<br />
It contains an empty element</p>
<h3>Hobbies</h3>
<p>This is where I'd enter a list of hobbies.</p>
<h4>Places I've lived</h4>
<p>I'd list the first place.<br />
I'd list the second place.<br />
Here I'd list where I'm currently living.</p>
</body>
</html>
End result in browser:
- <hr />
Ordered: alphabetical or numeric, Non-Ordered: bullet list
<ol> tag to start list
<li> tag is for every item
example:
<ol>
<li>Blue</li>
<li>Red</li>
<li>Green</li>
<li>Orange</li>
</ol>
The example will look like this:
More Developed Version of Code
<html>
<head>
<title>About Me - Insert Name
</title>
</head>
<body>
<p align="center"><em> This page is an overview of my work and interests.<br /> <strong> If you have any questions, please contact me at (insert e-mail).</strong>
</p>
<h1 align="center">(insert name)</h1>
<hr width="75%" />
<p align="center">Here you will read a little about me!</p>
<h2>Ahhh, a Poem</h2>
<p>This is just a poem<br />
to convey line breaks<br />
It contains an empty element</p>
<h3>Hobbies</h3>
<p>This is where I'd enter a list of hobbies.</p>
<h4>Places I've lived</h4>
<p>I'd list the first place.<br />
I'd list the second place.<br />
Here I'd list where I'm currently living.</p>
</body>
</html>
End result in browser:
Term List
metadata
empty element
attributes and values
pixel
Homework will include:
About Me/HTML
- 4 Basic Tags
- Headings (2)
- Lists (like bullets)
- Block quote
- Comment - <hr />
HTML Notes Day 2
Syntax means having proper values and quotes for coding. It's similar to having proper sentence structure in essay writing.
Saving an .html document through Text Edit or Notepad should be saved with a hyphen.
This is helpful with search engine optimization (SEO).
A line break tag is: <br />
It's an empty element. A <br> and a </br> can't be used. The computer will search for the latter but it won't find one. It must be made to look different and that is why the <br /> is used.
The horizontal line: <hr />
This is also an empty element. This will give the heading a horizontal line behind it.
For example:
<h1>About Me</h1>
<hr />
You can add this to the horizontal rule to make it a certain size!
<hr width="75%" />
<em> means emphasis. So the typography will become italicized.
You can power up a tag. There can be left, right and center.
<p align="center">
<tag attribute="value">
The attribute and value get placed into the first tag, not the ending one.
For example:
<p align="center"><em> This page is an overview of my work and interests.<strong> If you have any questions, please contact me at (insert e-mail).</strong>
</p>
Adding more Attributes:
<h1>About Me</h1>
<hr width="200" align="left"
size="10"/>
Line under heading won't be shaded:
<hr no shade width="200" align="center" size="10" />
Comment Tag
<!--insert comment-->
Most useful for when you need to write something like Headings so you know yourself where your heading tags begin. Also very useful when you want to store some codes but don't want to activate them now. So you would start out with the tag and then put a bunch of codes.
<!-- Enter codes-->
Deprecated Tag
W3C World Wide Web Consortium comes up with all the standards.
<center>
...
</center>
The font tag is also a deprecated tag. They come out with there's a better way to do it.
CSS is presentation oriented (font, color) while HTML is structure oriented.
CSS has different instructions:
h1 has {color:blue;}
p
{fontfamily:verdana;}
It's still useful to know the old version such as the font tag that's old because you might use an admin tool or something.
An example with color, font face and size:
<font face="Helvetica" size="6"
color="blue"> Hey Read This </font>
* use common fonts that will show up on standard computers
_____________________________________________________________________________
Sample HTML Coding In-Class Assignment
<html>
<head>
<title>About Me - (insert name)
</title>
</head>
<body>
<p> This page is an overview of my work and interests.<strong> If you have any questions, please contact me at (insert e-mail).</strong>
</p>
<h1>About Me</h1>
<p>This is where you would insert a paragraph about yourself.</p>
</body>
</html>
Wednesday, February 1, 2012
HTML and XHTML Notes Day 1
ASCII = American Standard Code for Information Interchange
- standard used for encoding text
HTML HyperText Markup Language
XHTML eXtensible HyperText Markup Language
- somewhat stricter form of HTML
- written in XML
- one set of rules + syntax
* tags always enclosed in angle brackets: < >
* closing tags required for non empty elements: <p>, </p>
Indenting codes such as this example:
<html>
<head>
<title>My First Web Page< title >
</head>
<body>
Hello World!
</body>
</html>
... will allow for the eye to find what you need. Databases can read your code when it's precise. Viewing page sources on different websites allow people to view a website's codes.
<center>
this tag is an old tag. It's still used in browsers.
All tags above are container tags.
An empty element needs to look different. In the past, a line break like <br> would be used. You declare it as an empty element by putting <br/>. This means it's not marking something up.
Web Conventions
index.html
Windows (hyphens used for SEO purposes)
Mac (most flexible, can use upper and lower case, and can have spaces)
Unix: Linux (case sensitive (don't mix up with capital letters), can have up to 255 letters in character name, no spaces allowed)
some for Windows are index.htm (it's just different but it's also a different page!)
Wednesday, January 25, 2012
Four Principles of Design: Proximity, Alignment, Repetition and Contrast
- Organize a page according to the rule of thirds!
- A grid system allows the mind to comprehend better.
- Don't be afraid of white space.
- Asymmetry is usually good.
Define
Heuristic Evaluation
Brand
- Look + Feel
- Typography
Design
Architecture (comes first)
Design (Photoshop, etc)
Copywriting
'Informational Hierarchy' must be taken into consideration when working on a website. This means having a focal point when a person lands on the website. This helps a user's eyes trail through the layout.
____________
Graphic Design Principles:
Avoid C.R.A.P
Contrast - is the most visual attraction on the page so go for bold contrasts. Avoid blending elements that are similar but if they are similar, then make them different (such as color, size, spacing, etc).
Repetition - creates organization and unity across the design when there's repeat color, shape, texture, spatial relationships, line thickness, size and typeface.
Alignment - align objects over all with other objects to a defined edge. Every item should have a visual connection with something else on the page and the elements should line up (adds to readability and cohesiveness).
Proximity - group related items together because proximity or closeness implies a relationship but visually separate groups. In this website, proximity is not managed well. You can't figure out what to read first.
Color:
Yellow and Blue work well as school colors because they are complimentary colors. Color Scheme Designer can help bring together colors for a website, including a third color that can work well with the first two. The designer allows people to see their chosen colors on a layout page and view their colors through the perspective of people with vision issues, such as color blind. This allows a designer to take color choices into consideration.
Workflow Process:
Define will include design statement, a vision board and a creative brief.
The Design part will include a mock-up and site structure.
The Build phase will include XHTML and CSS.
- A grid system allows the mind to comprehend better.
- Don't be afraid of white space.
- Asymmetry is usually good.
Define
Heuristic Evaluation
Brand
- Look + Feel
- Typography
Design
Architecture (comes first)
Design (Photoshop, etc)
Copywriting
'Informational Hierarchy' must be taken into consideration when working on a website. This means having a focal point when a person lands on the website. This helps a user's eyes trail through the layout.
____________
Graphic Design Principles:
Avoid C.R.A.P
Contrast - is the most visual attraction on the page so go for bold contrasts. Avoid blending elements that are similar but if they are similar, then make them different (such as color, size, spacing, etc).
Repetition - creates organization and unity across the design when there's repeat color, shape, texture, spatial relationships, line thickness, size and typeface.
Alignment - align objects over all with other objects to a defined edge. Every item should have a visual connection with something else on the page and the elements should line up (adds to readability and cohesiveness).
Proximity - group related items together because proximity or closeness implies a relationship but visually separate groups. In this website, proximity is not managed well. You can't figure out what to read first.
Color:
Yellow and Blue work well as school colors because they are complimentary colors. Color Scheme Designer can help bring together colors for a website, including a third color that can work well with the first two. The designer allows people to see their chosen colors on a layout page and view their colors through the perspective of people with vision issues, such as color blind. This allows a designer to take color choices into consideration.
Workflow Process:
Define will include design statement, a vision board and a creative brief.
The Design part will include a mock-up and site structure.
The Build phase will include XHTML and CSS.
Friday, January 20, 2012
Heuristic Evaluation
In regards to a user interface design, a tester can use the evaluation method to improve a site's usability and find any possible problems.
1. Visibility of System Status
Once at the site, you know where you are on website and where you can go next. If you're hovering over the menu bar and colors appear, that tells you the site is active.
2. Match Between System and Real World
System speaks in a language user understands.
3. User Control and Freedom
You can make choices on the website such as leaving site if you wanted to.
4. Consistency and Standards
Navigation bar remains in place as you jump pages.
5. Error Prevention
404 Page Not Found includes Home Link to take you back or Site Map
6. Recognition Rather than Recall
Use universal symbols; red = STOP
7. Flexibility and Ease of Use
Site can cater to inexperienced and experienced users
8. Aesthetics and Minimalist Design
Site simple, easy to use and contains relevant information
9. Help Users Recognize, Diagnose, and Recover from Errors
Error messages easy to understand, indicate problem and suggest possible solution
10. Help and Documentation
Just in case a user needs help or step-by-step instructions
Class Example used this website for a heuristic evaluation. One of the criticisms found was that a campus directory should be provided under Quick Links.
Homework: pick a website that you can criticize well, such as "Where's contact information?" Complete a heuristic evaluation and make suggestions as to how the site can be improved; include a screenshot of website you choose
Tuesday, January 17, 2012
Process
Define Requirements, understand, audience objectives, creative brief
Design Architecture, copywriting and visual design, user testing
Build Code, usability testing, QA, launch
Maintain Marketing and communications plans
About Me
Hi! I'm Shae. As a young imaginative child I wanted to buy Cartoon Network and be a cartoon. Since then I've learned being a penguin won't exactly pay all the bills. So here's me in a nutshell:
Academic Studies:
- Major: Electronic Media and Visual Communications
- Minor: Marketing
- Certification: Public Relations
Extracurricular Activities and Interests:
- University blogger and Orientation Leader at UM-D for 3 years
- Mixed Martial Arts, Kickboxing, International Black Belt Club
- Doodling, video games, dance, writing, cooking, baking
Future Aspirations
- MBA in Marketing
- Launch a brand
- Be creative director for an animation company
- Write a few books
- Own a Range Rover Sport
My idea for a final project is to move my existing student web portfolio onto a better website that can be customized to my liking with links to my LinkedIn, Twitter, etc.
Academic Studies:
- Major: Electronic Media and Visual Communications
- Minor: Marketing
- Certification: Public Relations
Extracurricular Activities and Interests:
- University blogger and Orientation Leader at UM-D for 3 years
- Mixed Martial Arts, Kickboxing, International Black Belt Club
- Doodling, video games, dance, writing, cooking, baking
Future Aspirations
- MBA in Marketing
- Launch a brand
- Be creative director for an animation company
- Write a few books
- Own a Range Rover Sport
My idea for a final project is to move my existing student web portfolio onto a better website that can be customized to my liking with links to my LinkedIn, Twitter, etc.
About Me
- Shae Khan
- Hi. I'm Shae. You have landed on a blog for one of my classes at the University of Michigan - Dearborn. Happy reading!