Our world is changing.
The process of configuring Dreamweaver can be a little confusing. Unless you tell Dreamweaver where to store your files on your own hard drive and how to connect to a remote server, however, your Web site will be disorganized and you won’t be able to upload files to a Web server.
Following are two short videos that walk through the process of configuring Dreamweaver and uploading files.
Configuring Dreamweaver
“How to configure Dreamweaver” (PDF)
Uploading Files
Posted in Web Development.
– December 2, 2009
Find yourself missing your favorite blog widget on your standalone Web site? While nothing will take the place of good content updated regularly, sometimes a Twitter, Facebook, Delicious or Flickr widget can provide fresh information from other sites you already update.
A word of caution: There are downsides to the gratuitous use of widgets on your Web site. Most of them contain advertising or at the very least a link back to the creator of the widget. Sometimes they don’t fit the dimensions of your design. Worst of all, sometimes they just look cheesy and amateurish. So be selective when you use widgets in your Web site or online portfolio.
Resources
Posted in Web Development.
– November 30, 2009
Have you ever tried to remove the underline in your links or change link color from the default blue? Have you ever wondered how to make your links change color or size when your move your mouse over them?
Both of these tasks can be accomplished using a basic technique in cascading style sheets (CSS).
Consider the following example:
Notice how the links have no underline. Also notice how the links change from blue to green as your mouse over them.
Now consider the screenshot from Dreamweaver below. The top part of the window shows the CSS code in a stylesheet attached to the link example page below.
You can view the stylesheet directly here:
If you look carefully, you can see the process.
1. First, I created a new class called “navigation.” It has some basic font attributes such as size and family.
2. Next, I added characteristics that are specific to links of the class, “navigation.” Link characteristics are identified by “a” (such as “.navigation a”). For example, in this case, I removed the underline with “text-decoration: none;” and the changed the color of links with “color: #00F;”
3. Lastly, I changed the characteristics of link color when moused over. Mouseover (or “hover”) characteristics are identified by “a:hover” (such as “.navigation a:hover”). In this case, I changed the color of the text to green when moused over with “color: #090;”
Using CSS-based mouseovers are much more efficient than image and JavaScript-based mouseovers once you get the hang of using them.
Posted in Web Development.
– November 24, 2009
Following are a number of tips for basic Web design. When constructing a portfolio, beginning Web developers should consider some of these essential rules for design. Once you’ve mastered the basics, you can explore advanced techniques. Start simple for now, however, and improve your site over time.
Layout
Color
Typography
Resources
Posted in Design, Web Development.
– November 23, 2009
Posted in Design, Web Development.
– November 16, 2009
While it’s important that beginning Web developers understand the basics of modern design, sometimes these concepts can best be understood by examining cases of really poorly designed sites.
Fortunately, there is no shortage of poorly designed sites on the Web to study. A visit to Web Pages that Suck or 30 Web Designs that Will Hurt Your Eyes will provide more than a few examples of what to avoid.
Following are some typical design techniques beginning Web designers should avoid:
Resources
Posted in Design.
– November 10, 2009
While the ability to edit basic hypertext markup language (HTML) is a primary skill for Web development, no developer’s bag of tricks is complete without the ability to manipulate images. The Web is a visual medium, and developers and designers alike must take into consideration some of the major issues of image dimension, file size, and image compression.
Dimensions on the Web are measured in pixels.
As opposed to fixed measurements, a pixel is relative to the resolution of the target monitor. For the sake or argument, however, you could consider a pixel to be about the size of a pencil point.
Following are some common dimensions:
100 pixels wide by 100 pixels high
250 pixels wide by 200 pixels high
File size on the Web is generally measured in bytes. Since a byte is so small, most images are measured in kilobytes (Kb) or–if *really* large–in megabytes (Mb).
Since the Web works by transferring files from one computer (the server) to another (the client), the amount of time it takes for a page to load is directly proportional to the size of the files being transmitted.
As a result, file size on the Web is extremely important. When transmission speeds were slower (such as with 56k modems), the standard on the Web was that a page (and all associated graphics) shouldn’t be more than 50k. With increased bandwidth becoming standard, total file size (sometimes referred to as “weight”) has increased. It is still a good idea, however, to keep file size as small as possible (~100k).
Plain HTML pages usually aren’t the problem. A page with five paragraphs of text (around 450 words) weighs in at under 5k!
Problems arise when a page becomes bloated with unoptimized graphics, sound files, video, PowerPoint presentations, etc.
Moral: Try to keep the total file size of your images as small as possible!
Due to the fact that large files take longer to download through the Web, all images must be “optimized.” Optimization entails compressing the image down to the smallest possible file size.
Different types of graphics require different compression methods. For example, photographs should be compressed as a JPEG, while simple logos (with solid blocks of horizontally continuous color) should be compressed as GIF. Compression is generally accomplished in dedicated image software such as Photoshop Elements, Fireworks, or ImageReady.
Rule of thumb:
Lots of colors = JPEG
Solid colors = GIF
Photographs
Example
Appropriate compression method: JPEG
Graphics and illustrations (using large blocks of similar horizontal color)
Example
Appropriate compression method: GIF
PNG is a less-common format that has strengths and weaknesses of both JPG and GIF compression. While PNG is lossless (like GIF), the image size is larger.
Posted in Web Development.
– November 5, 2009
When creating Web sites, beginning designers often overlook one of the most important elements in design: typography. While we look at text every day, we may not notice that such characteristics as font family, weight (boldness), size, kerning, and leading affects not only the tone of our design, but also the overall legibility of our message.
At the same time, typography on the Web provides some interesting challenges for developers. For the most part, fonts are dependent on the viewer, not the designer, for example. Without cascading style sheets, one cannot control line spacing (other than single and double) or line height.
Such obstacles can still be overcome, however, with creative solutions (such as converting display type into graphics). A clear knowledge of how to use type as a design element–and how to overcome the limitations of type on the Web–are essential skills every Web designer should know.
Resources:
Posted in Design.
– October 29, 2009
Zappos team members Sara Mattan (Information Architect/Taxonomist), and Rafael Mojica (User Experience/Usability Specialist), explained to aspiring journalists and designers the concept of Web site usability and the process to improve the user experience at UNLV on October 27, 2009.
When it comes to usability, few design teams consider the issues more than those at large online shopping Web sites. Whether the customer can find what they’re looking for, select it easily, then pay painlessly will determine whether the company will stay in business.
That’s why major dot.com industries like the online shoe and clothing site, Zappos, have a full team of professionals to study and perfect the user experience. Sara Mattan, and Rafael Mojica, for example, are part of a team that is constantly researching the behavior of customers through statistical data (such as Google Analytics) and in-person user testing to determine how to improve the design of the Web site.
From the Zappos Web site:
“This team is dedicated to the constant evolution of how customers interact with our site. Their goal is to provide the absolute best customer experience online by utilizing User Interface, the organization of information, and interaction design. They probe for answers that will enable you to find stuff easily on the site!”
As an aspiring designer, always be looking for ways to improve the navigational process your audience will experience. And don’t forget to learn from the professionals at Zappos!
Resources:
Posted in Guest Speakers.
– October 27, 2009
Although many people use the World Wide Web on a daily basis for news, shopping, communication, entertainment and more, quite a few are unclear regarding the basic principles how it works. From a journalist’s perspective, understanding these principles are imperative to transitioning to the digital age. While such tools as blogs and other content management systems make the presentation of information quick and easy, sooner or later the limitations of these applications become restrictive.
Essentially, the World Wide Web works by simply transferring files from one computer to another through a network.
An analogy would be if I created a word-processed document on my computer, then saved it on a shared hard drive. Through a network, someone else could access my document and open it in their word processor.
The Web operates in exactly the same way. When someone types a URL in the address bar of a browser and hits return (or clicks a link), they are sending a request to a remote computer (called a server) to send a text document (and any associated graphics) back to the requesting computer (called the client).
HTML documents are simply text files. Text editors (including MS Word, NotePad or Text Edit) are able to view and manipulate the source formatting.
The difference is that Web pages (HTML documents) are interpreted by a browser. Web pages contain more than just text. They contain text formatting code, links to graphics, information about the page itself, and much more.
The browser (such as Internet Explorer or Firefox) interprets the source code of the HTML, assembles all the associated pieces, then presents the completed page to the viewer.
Resources
Posted in Web Development.
– October 20, 2009
