Maximum PC html RSS Feed

Mozilla Launches Jetpack Gallery for Firefox, Offers No-Restart Add-ons

Pulkit Chandna — Thu, 12 Nov 2009 18:44:14 -0600

Mozilla today unveiled the Jetpack Gallery, a place for developers to showcase their Jetpack add-ons. Jetpack is a Mozilla Labs project that lets developers build Firefox add-ons using HTML, CSS, and JavaScript. While the newly launched gallery – still in beta - gives developers the opportunity to host and promote their Jetpacks, it lets Firefox users browse, install and rate Jetpacks. Installing Jetpacks is quite easy and doesn’t even require a browser restart, save for the very first Jetpack that a user installs. The Jetpack Gallery currently features over 30 add-ons.

7 HTML Tags You Should NEVER Use Again

Florence Ion — Tue, 07 Apr 2009 15:30:00 -0500

Over the first seventeen years of the web’s existence, HTML has undergone beaucoup changes. What was once the predominant language of the web now shares the spotlight with a variety of scripting languages, stylesheets, and other types of markup, ranging from Javascript to Cascading Style Sheets. The flexibility of modern scripting languages, separation of content and style have combined to become more like applications than the static web pages we all remember from the early days of the web.

Back in 1995, when HTML first took off with the general public, there were a number of offenders that made the Internet look aesthetically awful. Designers employed atrocious HTML elements, such as the <blink> and <marquee> tags, which only made a show of serious web coders. It’s doubtful that anyone at that time considered blinking and scrolling text fluid web design.

In the last few years, CSS has taken off with the rise of Web 2.0 and has certainly transformed web design into a much simpler endeavor—gone are the days of having to repeat the same mundane code or navigating a sea of jumbled up HTML in search of that one inconsistency. Things have gotten better since the Nineties and early-2000s, but some web designers are still foolishly living in the past. We’ve decided to update the criteria of HTML elements that are simply outdated and have been replaced by a batch of shinier, better CSS elements. If 1997 was the last time you’ve had a crash course in web design, than read on to learn a few new things about this versatile web world.

Design Fumbles

<frame>

Back in the day, the main appeal of frames was that you could insert repeated chunks of HTML, such as a navigation bar, in multiple pages without having to reload a side menu bar for each page view. Regardless of their good intentions, frames were never user friendly and really did a number by confusing search engines—if a search query matched a site as a whole, the search engine would return the frame set, though sometimes it would link to the wrong frame, confusing the user. Having a search engine recognize the correct page link was especially crucial if you wanted to increase your chances of receiving even average traffic numbers. Add that to the fact that this element embodies the epitome of tacky web design and there was never a right way to beautify this particular design faux-paux.

<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>

There is only one reason for using frames and that’s so search engines like Google can differentiate their site from others. Frames will never fit the conceptual design of the web.

The Modern Alternative: Opt for a simplified CSS template with a minimal navigation bar. Place the navigation at the top of the page for easy access and make sure that it reoccurs on every page. If you keep the layout consistent throughout your website sections, users should have no problem even loading the pages, since CSS is a much lighter way to lay out a website.

<table>

Tables are the most misused HTML element of all time. They are constantly used for laying out web sites, though their original intention was to provide structured data. Take our benchmarks tables, for example.

Back in the day, not all browsers supported CSS. So, tables became the standard for formatting webpage layouts and designers put parts of their content into specific arrangements within the columns. Even Adobe ImageReady’s image slicing plug-in exported the final product into tables and web design software perpetuated this erroneous trend.

The table element was never really meant to layout an entire site. Using it clutters up your web code and unnecessarily bogs down the page’s file size, which could affect the bandwidth of your server and your visitors.

Tables are also incredibly labor intensive. For each cell, you’d have to write out the element and make sure to close the tag. In between closing the <tr> tag and making sure you didn’t leave a <td> tag open, the final product could turn out pretty disastrous. It’s also difficult to get each cell to do exactly what it’s specified it to do, and that’s primarily because, as reiterated, tables were never meant for designing web pages.

The Modern Alternative: Now that CSS has been refined and is compatible with all browsers, it’s become the standard for all web design. CSS not only radically reduces the weight of your website, it allows it to load at a faster rate and makes it available on a variety of platforms, including mobile web. CSS also make redesigns easier, since all you have to do is change the properties of your stylesheet instead of editing each page at a time.

A great way to get started and familiarize yourself with CSS is to find a site with free templates and practice laying out your own design. For those who learn better by doing, this is an incredibly effective way to learn how to manipulate stylesheets.

<imagemaps>

The image map is a list of coordinates on a specific image that are clickable and link to another page. Adobe ImageReady, Dreamweaver, and GIMP all contain plug-ins to map out image map coordinates and export them to HTML.

<img src="awesomecomputer.gif" width="145" height="126" alt="This computer is awesome" usemap="#awesomecomputer" />

<map name="awesomecomputer">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="CPU" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="GPU" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="PSU" />
</map>

Many sites use this element for their navigation bar, but it is one that should be avoided unless the situation requires otherwise. Generally, image maps are not very accessible and can be confusing to the average web user, especially if there’s no obvious indication. And, should there be a server timeout and your user is left with no image, rendering navigation around your site impossible.

The Modern Alternative: If the information you’re presenting is best exemplified visually than in text, use the image map. For example, in an educational setting, you could use a map of the United States, with each state linking to a page full of important factoids and information about that state.

Otherwise, a nicely designed navigation bar at the top of a page is easily noticeable and not at all confusing. You can use a CSS template to navigation bar. Make sure to use simple terms like “make your own buttons", or get creative using Photoshop to fully customize your own "home” and “about”.

Text Offenders

The font element specifies the font face, size, and color of your text. However, the  tag is limited in style options—only font face, size, and color can be formatted— and you’d have to write additional code to add any sort of text decoration, such as bolded text.

Maximum PC

Font elements also need to be applied at the instance of every new element. For example, if you’re using the paragraph element and are closing that tag, your font element is, by default, closed with it. So, you have to reestablish that element at the start of your next  tag, and repeat this process throughout your layout code. There is certainly too much code clutter when using this element.

Additionally, the  tag is a major hindrance because it means that the coder made a basic assumption about the web user’s browser and configuration.

The Modern Alternative: With the integration of easy-to-use style sheets in today’s web design, the font element is almost considered ancient history. Using CSS, you can apply properties to various forms of the font element with just one single batch of code. You can establish your heading and link elements at the start of the document without having to repeat any sort of code each time you want to use that specific element.

In addition, not only does the CSS lighten the load of code in the page source, but should the site requires a color theme redesign, all it takes is tweaking the appropriate hex values in the stylesheet.

and

The Web Hypertext Technology Working Group (WHATWG) specifies that both the  and  tags are to be used as a last resort when no other element is more appropriate.

MaximumPC

The truth is: it’s all semantics. The  tag does not specifically imply a strong emphasis on a particular word, nor does the  tag indicate that there is light emphasis. You could argue that you want the elements to convey either meaning.

The bold and italic font elements do not have to be considered illegal. Rather, it’s that they’re hardly used in the proper context. The  and  tags should never be used solely for the purpose of stylizing text and especially not for headers. After all, that’s what CSS is for.

The Modern Alternative: Use the and  tag to bold and italicize, respectively.

And what about underlining? W3schools.org, the leading opinion on fads in web coding, deprecate the  tag and strongly advise against it, especially since a user could confuse underlining text for an active hyperlink.

and <big>

The point of small and big is to indicate text as either very important or not important at all. However, web designers and bloggers alike have made the mistake of using this particular element to actually set the font size of their body text.

The problem is that some browsers actually ignore these elements all together. In particular,  was supposed to simulate small caps, but the result is that the text is actually just a size smaller than the default.

<big>Maximum</big>PC

The Modern Alternative: Specifying your body text and headers at the beginning of your code is the most organized way to manage fluidity in your body text.

If you’re writing something that requires citation, there is actually a citation tag, which is <cite>. Use this for attributions where applicable.

<bdo>

This tag allows you to set the text decoration of your text. When applied, the <bdo> will make your text display backward, with letters flipped horizontally.

<bdo>Maximum PC</bdo>

The Modern Alternative: If your goal is to specify the alignment of text, use paragraph elements, such as the <div> tag. You can add whether you want your text to align to the left, right, center, or justified.

Five Essential Freeware Apps for Making a Web Site!

David Murphy — Wed, 31 Dec 2008 11:45:21 -0600

We're taking a look at Web page creation tools in this week's freeware/open-source roundup. And let's face it, the task sounds daunting: making a Web page, that is. Finding the programs is the easy part. There are a ton of authoring tools out on the Interwebs, but therein lies the problem. You don't want to have to burrow through 30 different applications to find the one that matches your experience level. And if you're completely new to HTML/CSS, you're going to want the most bare-bones, easy-to-use application you can find for making your first big online "Hello World!"

We've scoured through a number of programs to find the best applications for helping you make that picture-perfect Web page. From HTML creation, to file uploading, to validating, our choices represent a batch of must-have programs. Depending on your experience level, you might not need all five before you have your own variant of Maximumpc.com up and running. But everyone should be able to find something they need in our treasure trove of Web tools.

KompoZer

What it does: If you can't afford Macromedia's Dreamweaver, then KompoZer is the next best thing. It lacks the supreme functionality of the paid-for application, but this WYSIWYG (what-you-see-is-what-you-get) editor still does an excellent job with the basics. If you know nothing about Web creation, you can enter in the text and pictures you want and create a basic, default page quickly. If you want to get a little fancier, KompoZer's built-in site management tools, barebones HTML editor, and CSS management system are excellent features for an advanced Web page designer.

Download it here!

JAlbum

What it does: If you've ever tried to create a photo gallery by hand, you'll know just how much of a time-consuming process it can be. You have to pick your photos, resize your photos to thumbnail and full dimensions, create a template for your gallery pages, insert each picture into your pages, link each thumbnail picture to the larger image, et cetera. It's a nightmare. JAlbum takes this process, which can last for days, and shrinks it down into a five-minute affair. Select your photos, customize your output page, and click a button. That's all you have to do to have a fully working photo gallery -- just upload it to your Web host and you're all done!

Download it here!

FileZilla

What it does: How are you going to get your KompoZer pages or JAlbum galleries up to your Web host? FTP, that's how. FileZilla remains one of the tried-and-tested FTP programs that offers unlimited, nag-free transfers between your computer and a host. It supports resuming for when your connection craps out in the middle of transferring a huge file, keep-alive functionality for staying attached to your FTP site even when you aren't actually uploading anything, and drag-and-drop file management that's as easy to use as Windows Explorer.

Download it here!

CSS HTML Validator Lite

What it does: Whoops! If you're a hand-coder, then this tool is a great way to check the pages you create before the typos and errors you've accidentally put into the code affect your live content! This application runs through common errors like misspellings and open tags, but it can also automatically place quotations around attribute values and assist you in common page design. While we'd stick to a more robust notepad editor for our actual page creation, there's no reason why we wouldn't run our finished product through CSS HTML Validator Lite before uploading it to the Web.

Download it here!

Texter

What it does: If you're human, then you hate having to open and close your tags each time you go to write a new piece of HTML. Just imagine all the time you could save if you had an easy shortcut for, say, opening up an <img> and </img> tag and placing your cursor right in the middle of the two. Lifehacker itself has come to the rescue on this one. Texter transforms text commands into text elements. This means that you can type "p" and hit Tab to open up a set of HTML paragraph tags. Or you could make the word "Himg" your shortcut for opening up a full <img src="..."> line. This awesome application makes hand-coding just that much quicker--in many ways, faster and cleaner than what you could ever do in a WYSIWYG editor!

Download it here!

Maximum PC html RSS Feed

Mozilla Launches Jetpack Gallery for Firefox, Offers No-Restart Add-ons

7 HTML Tags You Should NEVER Use Again

Design Fumbles

<frame>

<table>

<imagemaps>

Text Offenders

<font>

<b> and <i>

<small> and <big>

<bdo>

Five Essential Freeware Apps for Making a Web Site!

KompoZer

JAlbum

FileZilla

CSS HTML Validator Lite

Texter