OJ: Web design and online publishing – HTML, CSS, PHP, mysql

This Unit is about Web design and online publishing.

Learn what makes good web design, how to find good free web themes and templates or paid ones, how to design your own website templates in photoshop, how to get a good content management system, basic HTML (language for the web), basic CSS (cascading style sheets), FTP (how to transfer files to your website), PhP (useful web programming language), creating and using widgets and plugins. You will also learn how to create different kinds of website for business, shopping, news, church, membership and social media, and how to integrate membership and financial payments into your website.

Understanding basic HTML

Beginning HTML

HTML-Hypertext Markup Language; the language of the Web. HTML files are text files that

include tags that indicate format, style and layout functions. A Web browser reads the HTML file and interprets the tags, thus presenting the information in the way the designer intended.munew

africulture2An HTML file can be developed in a simple text editor like TextEdit (Mac) or Notepad (PC). You simply save the file with the .html extension. You can also use a word processor like Word, but if so, you need to save as a text file and give it the .html extension (do not use “Save as HTML” feature, more on this later). We will be introducing the Web Editor Macromedia Dreamweaver, but with a Web Editor, we are doing the same thing: we are creating an html file that is textbased. Once you have an html file you can move from TextEdit to Dreamweaver or back without issue to maintain and modify the page.

 

XHTML or Extensible Hypertext Markup Language is the next generation of HTML. It functions in the same manner, but just provides more structure and guidelines to HTML. Used in

conjunction with stylesheets (to be discussed later), XHTML separates document structure from formatting, thus allowing more flexibility in Web design. As we discuss

HTML, we will identify the aspects of XHTML that must be observed. These days, most web pages are designed using more advanced html5 which has enabled inclusion of elements like video within that wasn’t possible before.

However, many people who design websites use already existing templates which they customize, while some use whole themes especially with the growing popularity of Content Management systems (CMS). The CMS like wordpres, drupal, joomla among others provide software on which you can design your website and from a collection of themes and templates (free and premium) one can design a good website without having to do HTML. But it is still important to know a few of the elements of HTML.

A tag is a command written between angle brackets (the less than and greater than symbols).

Ex. <html>

Some tags have attributes that provide a variety of options within the tag. The attributes have

associated values deemed by the designer.

<tag attribute= “value”>

Ex. <body bgcolor=”blue”> <body bgcolor=”#AACC00”>

Values are surrounded by quotation marks.

Most tags must also be closed after inserting the contained text.

Ex. <b>Cindy’s Page</b> (This tag bolded the text Cindy’s Page. The closing tag makes sure

no other text is bolded in the document.

In HTML tags could be upper or lower-cased and it made no difference to most major browsers.

However, with the move to XHTML, lower-cased tags are required. Many designers use

uppercased letters within tags to make them stand out from the content. Others use lower-cased

for simplicity (prevents from having to use the shift key or cap lock). You will be expected to use lowercased tags for this course.

THIS VIDEO SHOWS THE DIFFERENCE BETWEEN HTML AND XHTML

Web Site Design

Basic Tags

  • <html> – the opening tag on every html page. It tells the browser that this is an html file.
  • <head> – indicates the heading of the document. Nothing within the head tag actually shows up on page, but this is where designers can store information about the title or

special search terms associated with the page.

  • <title> – indicates the title of the page. This title does not show up on the page itself, but

in the top Title Bar of the browser.

  • <body> – indicates the beginning of the section with content in it. The attribute bgcolor

can be used to change the background color. You can use the 6 character hexidecimal

code (see the back of the Non-Designer’s Web Book) or you can use a limited number of

words to describe color, i.e. red, blue, lightblue, orange, etc. Ex. <body

bgcolor=”#AA11CC”> or <body bgcolor=red>

  • <strong> – bold- xhtml version; replaced <b> in html
  • <em> – italic- xhtml version; replaced <i> in html
  • <h1>, <h2>, <h3>…<h7> etc. – indicates a level of heading size. You can use the

different headings to set up the format of your page and indicate different sections.

  • <p> – indicates the opening of a paragraph, puts space between it and the previous

content.

  • <br> – provides a line break without the spacing of a paragraph.

Format of an HTML file

<html>

<head>

<title>Cindy’s Web Page</title>

</head>

<body bgcolor=”lightblue”>

<h1>Cindy’s Web Page</h1>

<p><strong>Welcome to Cindy’s Page</strong></p>

<h2>Introduction</h2>

<p>This is my place on the Web to let you know what is going on with me!</p>

<h2>Education</h2>

<p>This is where I will insert information about hobbies.</p>

<h2>Hobbies</h2>

<p>This is where I will insert information about hobbies.</p>

<h2>Contact Information</h2>

<p>For more information, you can email me at croyal@txstate.edu</p>

</body>

</html>Inserting Images

First of all you have to have a digital image. Web browsers can read .jpg and .gif files (and .png

files are gaining popularity). You can use images from a digital camera, create your own images

in a program like Photoshop or Illustrator, scan photos or images or steal images from other

Web sites (but not copyrighted images). Images can be still or animated. We will have a future

class on creating images.

Once you have an image that you want to insert, the tag is as follows:

<img src=”imagename.jpg”>

This will insert an image into the file named “imagename.jpg” that exists in the same directory

as the page you are working on. If the image is in or will be in a different directory than the page,

the directory (or folder) path will have to be included in the file reference.

i.e. <img src=”graphics/imagename.jpg”>

IMG attributes

  • src – file source of image
  • border=n, where n is the size in pixels of desired border
  • alt=”text”, where text is alternative text that shows when image is not available or when

someone is using a text reader (as in visually challenged)

  • width=x, height=y – where x and y are specific dimensions of the file. Be careful with

this. If you do not use the proper proportions, your image will be distorted on the Web.

  • align=left or align=right – used to wrap text around an image
  • hspace=x or vspace=x – to add horizontal or vertical space around an image (in pixels)

Using a Background Image

<body background=”imagename.gif”> This inserts that image located in the same directory as

the page. If it is located in a different directory, then the directory path must be specified.

Small background images will be tiled to fit the screen.

You can make your own background images (in Photoshop, etc.) or you can find images to use

as backgrounds all over the Web. To save an image from the Web, simply hold down the mouse

button (or right Click for PC Users) on the image or background and use the Save command.

In the early days of the Web, designers used colorful backgrounds on their pages. As the

novelty has worn off, most designers prefer to black text on white backgrounds (easier to read).

They use images and other elements to add color to the page.

Inserting Links

Three kinds of links:

Links to external sites:

<a href=”http://www.txstate.edu”> Texas State University </a>

This should always be an absolute link reference, meaning the specific location is used as the

attribute value. You must include the http:// in front of the url to make an external link. Use

target=”_blank” to have link open in a new window.

<a href=”http://www.txstate.edu” target=”_blank” >Texas State University</a>Links to other pages on your Web site:

<a href=”home.html”>Back to Home Page</a>

This is considered a relative link reference, because it refers to the location of the file as it

relates to the current file. The same link on someone else’s page would not bring them to your

Home Page. You can also include directory structure in the link reference if the file is not in the

same directory as the page with the link. For example, if the page you are working on is in your

main directory and the file you are linking to is in a directory called “assignment1” that is below

your main directory, then the tag would look like <a href=”assignment1/home.html”>Assignment

1 Home</a>

Remember, use absolute references for links to other sites and relative references for links in

your own site.

Links to specific places within the current file (called anchors or tags):

First you need to establish the anchor <a name=”introduction”>Introduction</a>

Then you make the link – <a href=”#introduction”>Introduction</a> When the user clicks on this

word, it will jump them down to the Introduction Section of the document. You must include the #

sign in front of the anchor name to make an anchor link.

Using an image as an icon for a link

<a href=”http://www.utexas.edu”><img src=”tower.jpg”></a> This inserts a picture of the tower

as the icon for the link. You can use this feature to use your own icons for links.

Creating a mailto: link

<a href=”mailto:clroyal@mail.utexas.edu”>Email Cindy</a>

One more thing about links:

To change the color of text links, use the following attributes in the BODY tag:

TEXT-establishes the color of text on the page (non-link text)

LINK-establishes the color of links before it is visited

ALINK-establishes the color of link while it is being clicked on by user

VLINK-establishes the color of link after it is visited.

  1. <body bgcolor=”#FFFFC6” text=”#000000” link=”#9C2994” alink=”#A1A1A1”

vlink=”#089494”>

(hover state can be controlled with a stylesheet, we’ll cover later)

We will also be using stylesheets to establish link colors and to add a hover(rollover) function to

them. Continue working on your bio and add the features mentioned in this lesson.Sample HTML with Inserted Images and Links

<html>

<head>

<title>Cindy’s Web Page</title>

</head>

<body background=”pinkbg.jpg”> Background Image

<h1><center>Cindy’s Web Page</center></h1> Heading Centered

<p><b>Welcome to Cindy’s Page</b></p>

<a href=”#contact”>Jump to Contact Info.</a> Anchor link

<p><img src=”cr.jpg”></p> Image Inserted

<h2><Introduction</h2>

<p>This is my place on the Web to let you know what is going on with me!</p>

<p>For more information, you can <a href=”mailto:clroyal@mail.utexas.edu”>email me.</a></p>

Email link

</body>

</html>

Lists and Tables

Lists

Ordered List- a numeric list; requires using nested tags <ol> and <li>

<ol>

<li>Music</li>

<li>Kitty Cats</li>

<li>Fluffy Pillows</li>

</ol>

Will appear like this in browser:

  1. Music
  2. Kitty Cats
  3. Fluffy Pillows

Attributes:

TYPE-numbers are the default, but you can use an A for Capital letters, a for lower case, I for

Uppercase Roman Numerals and i for lowercase Roman. i.e. <ol type=”i”>

START-insert the start value; 1 is default.

Unordered List- a bulleted list

Use <ul> instead of <ol>

<ul>

<li>Loud Cars</li>

<li>Mean People</li>

<li>Evil Landlords</li>

</ul>Will appear like this in browser:

  • Loud Cars
  • Mean People
  • Evil Landlords

Use the attribute TYPE to set bullet shape (disc, circle, square)

With CSS, lists are often used to control navigation bars. The css style

display: inline; allows the list to display in a line rather than bullets or numbers. More on this

later.

Tables

Using Tables for data – use nested tags <table>, <tr> (table row), and <td> (table data)

TABLE attributes

border-sets size of border

bordercolor-for a solid border; bordercolorright and bordercolorleft-for a shaded border

width-sets amount of space it takes up on page, can use pixels for a fixed width or % for a width

as a percent of screen size.

align-use align=center to center table.

<table border=”2” width=”600” align=”center”>

<tr>

<td><b>My favorite TV Shows</b></td>

<td><b>My favorite Musicians</b></td>

</tr>

<tr>

<td>Gilmore Girls</td>

<td>Spoon</td>

</tr>

<tr>

<td>Project Runway</td>

<td>Liz Phair</td>

<tr>

<td>Sex and the City</td>

<td>Wilco</td>

</tr>

</table>

Using Tables for page formatting

Tables begin to get complicated in HTML when you start using them for complex page

formatting. It is much easier to use a Web Editor, like Composer, Dreamweaver or GoLive for

Tables. Page formatting used to be handled via tables, but has since been integrated into CSS.

The preferred method is to use the <div> tag to create a container for content, then use the

stylesheet for positioning.

You might, however, still come across pages formatted with tables, so you should understand

how tables work in this manner.

For more information on the HTML for Tables, please see the Barebones Guide to HTML online.What is XHTML?

XHTML is the next generation of markup language to be read by Web browsers, following HTML

4.01 as the standard. Extensible Hypertext Markup Language uses the structure of XML

(Extensible Markup Language – used for tagging data) and the tags and elements of HTML

(Hypertext Markup Language) to add structure, flexibility, and expandability to Web

development.

Why do we need flexibility and expandability? HTML has a fixed set of elements making it

limited in its ability to evolve and change. With the introduction of devices other than computer

browsers that will be displaying Web data, like wireless handhelds, XHTML provides consistent

accessibility across platforms.

XHTML is similar to HTML, it just applies some stricter standards that must be followed:

  • Tag elements and attribute names must be in lowercase
  • Elements require end tags
  • Attribute values must always be in quotes
  • No attribute minimization (all attributes must have a value)
  • Document Type Definition, XML version, and XML namespace are required at top of

document –

<?xml version=”1.0″ encoding=”iso-8859-1″?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

This lets the browser know that it is an XHTML document and how to interpret

  • You will find some tags deprecated or made obsolete by XHTML. For example, the font

tag which is used in HTML to control the font appearance of text, is no longer necessary

when using CSS. The theory behind XHTML is to use XHTML code for formatting your

document and CSS for styling.

Cascading Stylesheets (CSS) allow you to create styles based on tag element names to

perform page design. By separating the structuring of the document (XHTML) from the styling

of the document, you gain greater control of the appearance and maintenance of your Web site.

More on CSS later.

Block versus inline elements

A block element creates a new block of content with a clear beginning and ending. For example,

the <p> element not only identifies a paragraph, but it also provides spacing above or below.

An inline element does not create a new block of content. It can be placed within a block

element. For example, the tag <img src=”cr.jpg”> can be placed within a paragraph. No

spacing before or after is accomplished by the tag.Intro. to CSS

Sample Stylesheet

Create a sheet with your styles in it and name it with a .css extension. (More examples on class

Web site)

body

}

margin-top: 10px;

color: black;

background-color: gray;

font-family: Verdana, Arial, Helvetica, sans-serif;

{

a {color: red; font-family: Arial; text-decoration: none}

a:visited {color: darkred; text-decoration: none}

a:active {color: #666666; text-decoration: none}

a:hover {color: gray; text-decoration: underline}

h1

}

font-size: 24px;

color: white;

padding-left: 15px;

{

h2

}

font-size: 14px;

margin-bottom: 0px;

{

h3

}

font-size: 12px;

margin-bottom: 0px;

{

p

}

font-size: 12px;

margin-top: 0px;

{

#content

}

margin-left: auto;

margin-right: auto;

width: 780px;

height: 400px;

padding-left: 5px;

padding-top: 5px;

background-color: white;

{

#nav

}

margin-left: auto;

margin-right: auto;

width: 780px;height: 20px;

padding-bottom: 2px;

padding-left: 5px;

background-color: beige;

{

#nav ul

}

margin-top: 0px;

list-style-type: none;

{

#nav li

}

padding-left: 0px;

display: inline;

{

#nav li

}

margin-left: 45px;

display: inline;

{

#nav li:first-child

}

margin-left: -25px;

{

#nav a {color: gray; font-family: Arial; font-size: 14px; font-weight: bold; text-decoration: none}

#nav a:visited {color: gray; text-decoration: none}

#nav a:active {color: #666666; text-decoration: none}

#nav a:hover {color: #F35151; text-decoration: none}

#logo

}

margin-left: auto;

margin-right: auto;

width: 780px;

height: 60px;

padding-left: 5px;

padding-top: 1px;

background-color: brown;

{

Then you use this code to link the HTML page to the stylesheet:

<link rel=”stylesheet” href=”style.css” type=”text/css”>

If you need additional styles, you can create a special class:

p.small

}

font-family: Arial;

font-size: 11px;

font-style: normal;

font-weight: normal;

text-decoration: none;

margin-top:0px

Then you add the class attribute to the code: <p class=”small”>This is a small paragraph.</p>

You can use a stylesheet to position containers (<div) on the page. Simply surround the area you want to put in the

container with the <div> tag. You give a name to the <div> by assigning it an id.CSS Properties

  • W3C CSS Recommendation – http://www.w3.org/TR/REC-CSS1
  • Full description of these properties can be found at

http://www.htmlhelp.com/reference/css/properties.html.

  • Another good description of properties –

http://www.blooberry.com/indexdot/css/propindex/all.htm

Font properties

font-family Arial, Verdana, Helvetica etc.

font-size – use em or px

font-weight – bold

font-style – italic

Color and Background properties

color – color of text

background-color – color of background

background-image –(background-image:

url(“name.gif”);

background-repeat – use ‘no-repeat’ to

show once

Text properties

text-decoration – underline

vertical-align- vertical positioning of the

element

text-align – alignment within element

text-indent – first line indent

Box properties

margin-top, margin-right, margin-bottom,

margin-left –

shorthand example – margin: 1px 1px 1px

1pxm;

padding-top, padding-right, padding-bottom,

padding-left

shorthand example: padding: 1px 1px 1px

1pxm;

Border properties

border-top-width, etc. or

shorthand example border-width: 1px 1px

1px 1px

border-color

border-style – dotted, dashed, solid, none

shorthand example: border: solid red

List properties

list-style-type- disc, bullet, none

list-style

display: inline (to make lists present

horizontally)

Other properties

width

height

float – used for positioning and wrapping

around an element

display: inline or block to change default

position – absolute or relative

top – use with absolute positioning

left- use with absolute positioning

Positioning

Use divs as containers for layout

can use absolute or relative positioning

can size containers with px or %

#content

}

width: 500px;

padding-top: 0px;

padding-left: 30px;

padding-right: 60px;

Introduction to Dreamweaver

Objectives: Understand the basic functions of Dreamweaver:

  • Page Properties
  • Applying Stylesheet
  • Adding Links
  • Inserting Images
  • Using an Image as a Button

We will be testing in Firefox, so make sure it (or another browser) is Open.

  1. Open Dreamweaver. Application opens in new file or choose File, New and create a new

page. Modify, Page Properties

  1. Add Title, (Background Color, Text and Links Colors will be handled by stylesheet)

Notice that you can also change Title in panel at top of screen.

  1. Save File – Click on File, Save As, on your Zip in the designated folder, name the file,

“home.html”

  1. Attach Stylesheet – Locate a stylesheet and make sure it is in the proper folder. Then

choose Text, CSS Styles, Manage Styles. Click Attach and then browse for the

stylesheet. Make sure Add As Link is selected. This will attach that stylesheet to this

document.

  1. Type Text

Use Text Inspector to Modify Text

Formatting will be done with CSS. Highlight the text and choose the proper Format. If a

special style is needed, then select the Style. Do not use DW to change the Font, Size,

or Color. This must be done using CSS.

  1. While you are working in Dreamweaver, you can change the view from Design to Code.

Choose from the buttons in the top left corner. The middle button allows a split view of

both Design and Code.7. Add link – Highlight each word in menu. Use text inspector to add link. You can either

choose a file by clicking on the folder next to the link box or by typing in the filename or

URL. For each menu choice add link to appropriate page

reviews.html, venues.html, links.html, new.html, upcoming.html, home.html

Save File, Test in Browser (Go to IE, File, Open File, browse for home.html on your disk.

Leave this open and simply return to it and refresh each time you make a change and

save your file.

  1. Add External Link – At third row type “Page Designed by “Yourname.” Link your name

to your bio URL (ie. http://uts.cc.utexas.edu/~clroyal/royalbio.html) Align Cell with

Inspector.

Save File, Test in Browser

  1. Insert Image –Choose Insert, Image.

Now we are going to use an image as a button for the link rather than text.

  1. Add Button – Choose Insert, Image. Use review.gif for image. Highlight image and look

down at Inspector. Add reviews.html in the link box.

Continue for all six buttons

venues.gif, links.gif, new.gif, upcoming.gif, home.gif

Save File, Test in Browser

In Browser, Select View, Source. Take a look at the coding that DW has done for you. Do

you understand all the tags?Advanced Dreamweaver Functions

Add rollover button

Dreamweaver makes adding a rollover effect easy. You must have all the different states of your

rollover prepared in advance (2 versions of each button). You can prepare your images in

Photoshop, Illustrator or some other graphics creation program.

Choose Insert, Interactive Images, Rollover Image. Give it a meaningful name (this is not what

will show up on button, just for identification in html code). Browse for original image, choose

review.gif. Browse for rollover image, choose reviewroll.gif. For URL, type in reviews.html or

browse for it. Make sure you use .gif files for the images and .html files for the URL.

Continue for all buttons. Hit shift-Enter after each to move to the next line, but not have a space

between (break instead of a paragraph). Save File, Test in Browser

Image Map

Click on Image notelogo.gif in 1

st

row. Look at Image Inspector.

Add hotlinks to image map

In the bottom left corner of the Inspector, you will see the Map tools. Find square hotlink tool.

Use this to draw a box around the word “about”. In the Link box type find the file “about.html.”

Continue this for each word on top. Files are in folder for each. For Contact add a mailto link

with your email address.

Save File, Test in Browser. Look at Source Code in Browser. Do you understand all the tags?Server space at Texas State

Texas State provides some basic Web server space for hosting Web sites. Go to

http://www.tr.txstate.edu/apps/ . Click on Create Your Texas State Personal Web Directory.

Login with your NetID and password. The url for your home page will be

http://uweb.txstate.edu/~yourNetID (yourNetID is actually your own NetID).

When logging in with Fetch use : uweb.txstate.edu as the host.

You will use your NetID and password.

Initial directory: /www

Publishing a Web Site with Fetch

Fetch is a Mac-based file transfer program that will allow you to upload files from your computer

to the Web. You will use fetch to upload html, gif, jpg and other files that you use on your Web

site. If you use a PC, a similar program to Fetch is WS-FTP and can be downloaded at

http://download.com.com/3000-2160-1572132.html

  1. Open Fetch
  2. Type in server address for Host – uweb.txstate.edu
  3. Type in User ID and password . Initial directory is /www .
  4. Click on “OK”. Fetch now connects to your server.
  5. To publish a file to the Web, just click on “Put”. A dialog box will come up that will allow you

to browse your computer to find your html, gif, jpg or other files to load. Once the file(s) are

selected, click on “Open”. You will see the files copied to your public_html folder.

  1. If you name your homepage “index.html” it will automatically come up when you type in your

Web address. Your Web address is:

http://uweb.txstate.edu/~cr38

If there is a file named “index.html” in your public_html directory, that is what will open. If not,

you will need to include the name of your homepage file in the address:

http://uweb.txstate.edu/~cr38/ethics.html.

  1. You may use Fetch to perform file maintenance of your Web space to move or delete files or

to make or remove directories.

  1. Now you have your own place in cyberspace. Welcome to the Web!

Design: Journalists’ Toolkit

training site for multimedia and online journalists

Page Design and Layout

Golden Rectangle: How to use it in Web page and multimedia package design

Designing with Grid-Based Approach

Oh Yeeaahh! (Grids Are Good) — Khoi Vinh is the design director at NYTimes.com

  • Download the PDF (8 MB) of Vinh’s “Grids Are Good” presentation

Common Design Elements (planning the page design)

Web browser resolution/sizes:

Color

Color Theory Tutorial by Worqx

Typography

CSS Typography (examples, illustrated: serif, sans-serif, monospace)

Five Simple Steps to Better Typography

JeffCroft Elegant Web Typography — Awesome “book” (130-page PowerPoint, saved as a PDF)
Tells you everything you need to know about Web typography

Typetester — This amazing free tool allows you to compare text font families side by side, on-screen, dynamically

15 Excellent Examples of Web Typography — Inspiring examples from real Web sites

Web fonts (from Code Style):

Web fonts (from W3.org): CSS font-family and font styles

TypeCulture: Learn about typography

Web Design, in General

Design Doing, by Jeremy Keith (Nov. 11, 2007)

Understanding Web Design, by Jeffrey Zeldman (Nov. 20, 2007)

HTML and CSS Resources

HTML Dog is a great site for finding answers to your questions about HTML and CSS. It provides tutorials for every level, from beginner to advanced. If you patiently work through the HTML tutorials in order, you will learn the proper way to code Web pages.

HTML Basics (here at Journalists’ Toolkit)

W3schools has a very nice CSS reference.

CSS Basics (here at Journalists’ Toolkit)

Do you understand the doctype and how to use it? You should! Are you specifying the correct character set for use on your Web pages? See: Top Lines in HTML and CSS (here at Journalists’ Toolkit).

What about HTML5?

HTML5 is the next big thing in Web design and content markup. We need to get ready for it. I wrote a series of blog posts about it — Tips for HTML5 — in May 2010:

  1. Tips for HTML5, part 1
  2. Tips for HTML5, part 2
  3. HTML5:Tags we won’t see anymore
  4. HTML5:New tags
  5. HTML5:A closer look at selected tags
  6. A look at CSS3

Web page editing programs

The nicest professional editor, in my opinion, is Dreamweaver. I have been using it for many years. (Most journalists have no need to use a Web editor, however. They will be working in a content management system.)

Alternatively, there are a number of free and open-source Web editing programs today:

  • Nvu(pronounced N view): Windows, Mac or Linux
  • Amaya: Windows, Mac or Unix
  • KompoZer: “KompoZer is based on Gecko, the layout engine inside Mozilla; it’s a super-fast, very reliable, standards conformant engine maintained on a daily basis by a wide community of developers.” Windows, Mac or Linux

If you do not know how to upload files to a Web server, see this FTP tutorial.

How to use a Web page editing program

  1. Do not rely on the WYSIWYG (“design view”) mode of any editing program. This makes you stupid, not smart.
  2. Always write your HTML and CSS by hand so you know exactly what you are putting in there.
  3. To test your code, open the page in at least two different Web browsers. Only a current Web browser will show you what the code is really doing.
  4. Use the built-in file and site management of your editing program to keep your local files in perfect sync with the live site on your Web server.

Firefox and add-ons

Among the many things that make Firefox far superior to Microsoft’s Internet Explorer is the ability to enhance it with freeadd-ons. These little programs download and install painlesslyfrom the Firefox site itself.

These are my favorite Firefox add-ons for Web work:

  1. Web Developer toolbar: Adds almost everything a Web designer or programmer needs to inspect pages: See the CSS, the HTML, the Javascript; turn images on and off; outline CSS elements to figure out how pages were built; validate in two clicks.
  2. Firebug: The few tasks that the Web Developer toolbar can’t do are handled admirably by Firebug, which allows you not only to view code but also to edit it.
  3. FireFTP: The easiest way to upload and download files between your computer and your host Web server.
  4. Pearl Crescent Page Saver Basic: An easy way to get a screenshot of a Web page; you can choose to grab the entire page, including what is not visible outside the viewport.
  5. MeasureIt: A quick way to determine the width, in pixels, of anything on a Web page in the browser. Great for design troubleshooting.
  6. ColorZilla: Use an eyedropper tool to instantly get the hexadecimal code for any color on a Web page.

Intermediate/advanced resources

Big list of helpful sites

Tutorials Round-Up: Ajax, CSS, PHP and More, from Smashing Magazine (Jan. 26, 2007)

Online usability questions that need answers

We have already noted that design of the news package or the whole website is as important as the content and the user’s interaction with the content depends on the way you design. Many technologies and knowledge present different options from carousels, timelines, audio slideshows, belts, jquery, to advert presentation on content sections.

By Laura Ruel and Nora Paul take us through a number of usabilibility questions you need to ponder before doing that next design. If your home page has a rotating menu of featured stories at the top, do users look at it, understand how it works and use it to navigate the site? How about a slideshow with text, sound and images: Do users attend to all three of these items at once? How about the number of links or other informational items on a home page: What number is ideal? When do we cross the line between being informative and becoming overwhelming? Details here

Five do it yourself tips on carrying out a usability test for your website

Whatever great design and multimedia work you come up with, you need to do a usability test. It is frustrating to do all the hard work of producing good or great multimedia package and then members of the audience can’t follow or comprehend it.

You must maintain a user implicit in your mind when crating a product. As the article Technology’s Untanglers from July 8 New York Times reported, “Sometimes there is a huge disconnect between the people who make a product and the people who use it.” Usability testing is vital to uncovering the areas where these disconnects happen. Its value and power shouldn’t be underestimated in the e-commerce world or in the multimedia journalism storytelling world.

But a usability test has to be done right with a methodology that works and takes into account a journalist’s or the relevant communication professional’s deadlines. Details here

 

 

 

 

Attachments1

SEE ALLAdd a note
YOU
Add your Comment
 

DOWNLOAD YAAKA DN APP









X