Attackr.com » Developer Portal for web designers, developers and programmers

Free WYSIWYG Editors

Dan Stephenson — Mon, 01 Sep 2008 17:36:20 +0000

WYSIWYG (pronounced /ËˆwÉªziwÉªg/ or /ËˆwÉªzÉªwÉªg/), is an acronym for What You See Is What You Get. Popular WYSIWYG editors include Adobe Dreamweaver and Microsoft Expression Web (formerly Microsoft FrontPage).

A WYSIWYG editor has a user interface that allows the web designer to see a result very similar to what their website will look like on a web browser. Often, they also include tools that allows a web designer to create a webpage with little or no HTML knowledge, using visual tools. While this can be a good way to put together a page quickly, the code that is produced is often bloated, does not validate, and on some tools, is all table based.

NOTE: Why YWSIWYG editors often have their own rendering engines for displaying your website, be sure to still check it in actual web browsers, to see how the page actually renders. There are times when WYSIWYG editors can be horribly off.

Free WYSIWYG Editors?

For many years, in order to get a good WYSIWYG editor, a web designer would have to buy one of the many commercial packages on the market. In 2005, Daniel Glazman released NVU Version 1. NVU is an open-soruce WYSIWYG editor that is based on the Mozilla Composer source code. It has many of the same features of the popular commercial products, and based on my own personal tests, seems to generate more standard compliant code than Dreamweaver or Expression Web. NVU is a popular choice for web designers and developers looking for a powerful tool for free. As great of a tool as NVU is, it has been discontinued with some bugs going unresolved. For some users, these bugs are a deal breaker, and prevented them from using NVU as their primary development tool.
After NVU was discontinued, Kompozer was created. it uses NVU as a code base, and aims to improve and fix NVU. If you are deciding between one of these two products, you should pick Kompozer, as it is more up-to-date, and has not been officially discontinued (as of this writing), which means there can and probably will still be more future versions released.
If you are new to web design, or just want to try a new tool, I suggest checking out Kompozer (and perhaps NVU). It’s a pretty good tool for HTML and CSS, though doesn’t always play as well with server-side scripting as some commercial products.

Feel free to share your experiences with NVU, Kompozer, or another open-source WYSIWYG editor.

DVDs on Your iPod

conartistdesign — Sat, 05 Apr 2008 04:11:13 +0000

I recently discovered a DVD file converting software called Handbrake. Its available for Mac OS 10.5.X Windows 2000/XP/Vista Linux and you can even download the source code.

Simply Place a DVD in your drive, Start Handbrake, Click the “source” icon and select the VIDEO_TS folder and click OK. It Scans the files and then allows you to select a destination folder. You can further configure your preferred options. Click the “Start” button and walk away.

After an hour of so come back to your computer and the file has been converted to an .mp4 file. Add this file to the Movies Playlist of your iTunes Library. Select the movie and right click. Choose “Convert for iPod/iPhone” from the menu.

This process takes the longest. I let it go over night. When you wake up in the morning, sync up your movies and there it is. I have done this with several movies and they are extremely high quality. There you go. Great quality movies just like from the iTunes store.

Disclaimer: I only recommend doing this for personal use. Only convert movies that you have purchased. Do not distribute converted files. This is illegal.

Corel’s Graphics Creation and Editing Software

Karen — Fri, 16 Nov 2007 18:07:14 +0000

Move over Adobe, there’s a new powerhouse in the powerful graphics editors category of software. Corel, who has owned Jasc’s Paint Shop Pro software since 2004, and this summer bought out my favorite graphics software company, Ulead, has cornered the market on quality affordable graphics editors. Ulead created PhotoImpact, my graphics editor of choice. I own an older version (Jasc) of Paint Shop Pro and the latest version 12 of PhotoImpact, both of which cost less than $100.

Purchasing PhotoImpact is really a good deal. You get so much value for your dollar with additional software included:

tools for managing and browsing your images, creating 360-degree panoramas and making animated GIFs. Plus, you get 1,398 royalty-free images, 2,221 Web elements, 3,270 customizable effects!

Ulead Photo Explorer & PhotoImpact Album 12

Ulead® COOL 360„¢ photo panorama software

Ulead® GIF Animator„¢ 5

The other great thing about PhotoImpact is that you can use just about any Photoshop plugin there is, and you can work with PSD files if you need to.

Of course Corel has their high end products as well of which I would recommend CorelDRAW Graphics Suite X3, a powerful vector illustrator, and Corel Painter X, a powerful Natural-Media® painting and illustration tool.

In short, Corel continues to provide quality products with features and technical capabilities that are comparable to products offered elsewhere, at significantly lower prices.

jQuery: New version and UI package

sdkester — Tue, 18 Sep 2007 18:17:32 +0000

John Resig, the creator of jQuery has been going non stop. jQuery 1.2 was released on 10 September to much fanfare by those who follow it, followed by an update to 1.2.1 for bugs and a missing feature.

They didn’t stop there though. Immediately afterwards, jQuery UI was released. jQuery UI is a package of user interface widgets that can be combined to create a powerful user interface for the web.

The list of themeable widgets include:

Accordian
Calendar
Dialog
Magnifier
Shadows
Slider
Sortable Tables
…and Tabs

As well as mouse interactions such as:

Draggables
Droppables
Sortables
…and resizables

Just as I was thinking that the jQuery UI page could use some work, a post came up in my RSS reader from Glen Lipka. He opined that the demo page made it hard to see what was going on in the background with the UI framework.

Like him, I’m sure many of us came to learn HTML/JS/CSS from a quick ‘view source’ of the page. In time, I’m sure they will get around to fleshing out the documentation and examples.

As a regular user of jQuery, I can’t imagine writing plain ole javascript anymore.

In fact, when it came time to take a look at something I wrote a few years ago in POJ, I could barely follow it. jQuery helps me write less code faster that is easier to read in the future.

A good example how jQuery can reduce your code came by accident today on Ajaxian. Jon Davis wrote a script that would pull static content into a div. Think server side includes (SSI), but client side instead.

This 300+ line script could have easily have been written in jQuery in just 3 lines, as demonstrated by a member of the jQuery team, Yehuda Katz:

$(“textarea[src], div[src], span[src]“).each(function() {
$(this).load(this.src);
});

A overly simple example perhaps, but important none the less. Don’t forget to get the latest jQuery info from their website, blog, or discussion groups.

As this framework evolves, so to may the way you write javascript.

Google Analytics in 5 minutes

niemi — Sat, 26 May 2007 06:17:49 +0000

For those of you unfamiliar with Google Analytics, it’s a tool that logs detailed information about your visitors. More details here.

How to integrate Google Analytics with your homepage or blog?

1. Sign up

2. After you have signed up, you will be asked to fill some forms. Enter your domain address (e.g. www.attackr.com), choose your account name and specify country and time zone.

3. You will be asked to fill in some personal information, do that continue and accept the terms.

4. Google now generates a JavaScript which will looke like this:

The unique part of that script is the numbers “1925799-1″.

5. Insert that JavaScript into your web site. Preferably into the footer or the header. Note that this should be done on all your pages (e.g. index.html, contact.html, portfolio.html).

If you’re running WordPress just paste the JavaScript to the footer.php or header.php. This ensures that the script is called on all pages.

6. Exclude yourself. It’s quite discouraging to see that your brand new blog have 20 visits only to find out that they all come from the same person, namely you. Therefore, after setting up your account and web site, you should immediately create a filter to exclude all hits from your own IP.

To do this go to the filter manager (beneath you web sites), click add filter, choose a name, from filter types select “Exclude all traffic from an IP-adress. Now you will have to enter your own exteranl IP-adress. If you don’t know it check it out here or here.

7. Typing the IP correctly. Now lets say that your IP-address is 80.175.125.99. You would then have to enter a backslash (like this \) before each stop. If you IP was 80.175.125.99 you would have to enter 80\.175\.125\.99

8. Last step. Choose the domain which you want the filter to be applied to and click “add”. Press finish and you’re done. Navigate back to the your welcome screen by clicking “Analytics Settings” and wait a couple of days for the first results.

Blogging E-Metrics

Sean — Fri, 22 Sep 2006 04:13:57 +0000

This guide is specific to WordPress, Google Analytics, and Feedburner… all free and industry standard packages.

Blogging E-Metrics Simplified is a basic overview of:

1. How to implement web analytics into your blog using Google Analytics.
2. How to implement feed analytics into your blog using FeedBurner.
3. How to measure your blog’s impact using Google Analytics.
4. How to improve your blog’s impact.

This guide is meant to be an overview and in no way comprehensive but we will keep updating it as necessary.

Web Developers friend, Toolbars

TechZ — Thu, 14 Sep 2006 19:25:22 +0000

There are a lot of handy tools out there for web programmers aka coders, toolbars are by far the quickest and easiest ways of editing/managing web pages on the fly. So here are two of the most popular ones for each of the 2 most popular browsers:

1) Web Developer

Author: Chris Pederick
Website: http://chrispederick.com/
Toolbar Site: http://chrispederick.com/work/webdeveloper/

Description: The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

The Web Developer toolbar comes in approximately 20 languages, meaning it covers a very large audience. It support all major OS’s, those being Windows, OS X & Linux. It has support for more than just Firefox, unlike its early releases. It has now become the defacto tool for most web-dev’s who run the supported browsers, because it’s just so darn handy! It’s also simply user-proof to install, one-click and you’re set to go.

2) The IE Developer Toolbar [Beta2]

Author: Microsoft
Website: http://www.microsoft.com/
Toolbar Site: http://www.microsoft.com/

Description: The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. This version is a preview release and behavior may change in the final release.

The Internet Explorer Developer Toolbar provides several features for exploring and understanding Web pages. These features enable you to:

– Explore and modify the document object model (DOM) of a Web page.
– Locate and select specific elements on a Web page through a variety of techniques.
– Selectively disable Internet Explorer settings.
– View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
– Outline tables, table cells, images, or selected tags.
– Validate HTML, CSS, WAI, and RSS Web feed links.
– Display image dimensions, file sizes, path information, and alternate (ALT) text.
– Immediately resize the browser window to a new resolution.
– Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
– Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
– Display a fully featured design ruler to help accurately align and measure objects on your pages.

It’s in Beta, so don’t complain that it doesn’t do “this” or “that”, be sure to read the MS website before going ahead and installing it. Now, that aside, it’s the only thing for Internet Explorer 6+, and MS did a good job with this toolbar. It works like it should and they are still doing more for it, with resources that MS have at their disposal, versus 1 man working on a toolbar, this is poised to be quite a powerful application for the web-developer.

Why choose this over the Web Developer toolbar? Simple, because you want it for Internet Explorer. Then again, why would you want another toolbar in your already full browser? You wouldn’t is the answer, unless you are a web-developer, in that case these toolbars can make your coding quicker, by saving you time using multiple applications to achieve the same thing, as the toolbars are integrated into your browser.

CSS Editors & Design Tools

Sean — Thu, 03 Aug 2006 23:38:23 +0000

This list is neither comprehensive nor an endorsement, it is just intended to show the options. Below I’ve provided a few of the best known CSS tools that I know about.

Top Style by www.bradsoft.com

Stylemaster by www.westciv.com

Additional links to other useful tools can be found at:

Eric Meyer on CSS: Links to CSS Tools: www.ericmeyeroncss.com/links/tools.html

CSS Tools: www.soxiam.com/Notes/CSSTools

Layout Gala: http://blog.html.it/layoutgala

Eric Meyer on CSS: Links to CSS Resources: www.ericmeyeroncss.com/links/resources.html

List-O-Matic: http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/