An XHTML editor is a lot like a teacup dog breed or a designer pig. Okay, so they don't tremble incessantly or have the tendency to pee in the corner of your living room. They are really just highly specialized, souped-up versions of something else. Chihuahuas are pack animals, just like wolves. Potbellied pigs know instinctively how to root around for tasty things, as do wild boars. And XHTML editors edit text.
They have many tools to make editing XHTML (and other bits of code geared specifically for web use) faster and easier, but there's nothing says you need to use an XHTML editor for web coding. Text editors can do the job as well. If Kate, gedit, or Cream do the job for you, either on their own or with a few plugins, that's got you ahead of the game.
But there are some XHTML editors that manage to bundle the basic functions and a whole slew of handy extras into a nicely finished package. There are quite a few of them, and we'll be touching on more of them next week.
This week we'll take a peek at Bluefish and Quanta Plus. Why? Because they are the two most often included in Linux as the sort of "came with the distro" web development applications. Even if they aren't installed by default, many people try them first.
In many ways, I'm pretty old school. When I learned HTML, I painstakingly handcoded my pages in the esteemed Notepad. Only when I became a master of HTML-fu did I allow myself to try Dreamweaver. (Okay, fine, the ability to buy a license with educational pricing may have had a lot to do with it, too.)
I loved Dreamweaver. One of the things that always made me a little sad when I first tried Linux was that there wasn't a real Dreamweaver-esque type application. Times have changed, however. There are a number of HTML/web development applications out there that are free (as in speech and beer) and feature filled.
But I'd be really amiss if I just mentioned Linux HTML editors in a vacuum. There are a number of tools readily available in repositories that make coding, layout, uploading, and testing easy and (dare I say it) fun.
Because seriously, if it isn't fun, what's the point?
Over the next few weeks we're going to take a look at web development tools in Linux. We'll do a run down of some popular XHTML/HTML editors, FTP and transfer software, and neat little tools for creating content that make some of the drudgery of "back-end" web work less painful.
htmlPlayground is a helpful reference for web developers of any skill level. It provides an easy way to generate, test, and learn about HTML and CSS syntax. Simply select your reference (HTML tags, attributes, or CSS properties), and then select an item like "blockquote."
htmlPlayground will then display a description of the item (to explain what it's used for), an example code snippet that is editable, and a rendered preview of the code snippet. The snippet is color coded: green for tags, red for attributes, and black for regular text.
If you click on a green tag in the snippet, you can edit the tag's attributes easily via another pane. When you're happy with your finalized code, you can of course copy/paste it to an HTML file to use on your website.
There are easy ways to create webpage layouts, and there are hard ways. Spiffy Box is one of the easy ways to add a little spice to your website using CSS.
Spiffy Box was originally created as Spiffy Corners, a web based way to easily create and grab custom CSS and HTML code for rounded corner web content boxes without using images or JavaScript. It eventually moved on to its current user friendly four step process over at Spiffy Box, which uses an image for corners. Users generate the code by simply choosing an image width, height, corner radius, foreground, border and background colors. Steps two and three give you a preview of your new spiffy corner, and the CSS snippet to copy and paste. Step four provides the xhtml to add into our document and, poof; You have a soft, round CSS cornered box.
There is nothing I love more than my favorite morning breakfast food (procured from the back-end of a chicken) sizzling in the pan mumbling incoherently and frothing at the yoke. This is exactly how Crazy Egg isn't. This visualization tool for your website will show you several important things about how, how often, where, and on what your guests are clicking on. There are three modes (screenshots of each after the jump) overlay, list, and my personal favorite, the heat map. Crazy Egg has a well put together idea that looks great. All you have to do is insert a single line of code at the bottom of each page you want to track. They offer a free account and three other paid account options to choose from ($19/$49/$99), all with varying degrees or features and number of saved snapshots. There, now my eggs are climbing up walls and trying to harm themselves, go check out Crazy Egg, cause I gotta go, my crazy eggs are out of control!
Anyone who has hand-coded HTML (I know, oldskool) has wished for a tool like this real-time HTML editor, though regrettably the days of hardcore hand-coding HTML are pretty much over. I still code HTML in my free time just for the tactile feel of simple code beneath my fingers and remembering the old day before things got easy. Real-time HTML Editor puts your code into practice as soon as (and somewhat before) you type it. Through the power of AJAX, HTML is now more fun. This tool is obviously not for serious coding, but it can help a noob learn the basics or help you text a small script, such as a MySpace layout or something nonsensical like that. I checked it out for the nostalgic value more than anything, so if that is your brand of suck tape, give it a whirl.
Alessandro
Fulciniti at Web-Graphics has collected his top 20 bookmarks of
2005. They're all, of course, web development links with a focus on CSS and JavaScript with some design,
typography, AJAX, and search engine optimization thrown in. Every one is a must-read for anyone doing web development
in 2006.