HTML posts

Filed under: Design, Fun, Humor, Fugly Friday

Fugly Friday: Geocities Memorial Edition

by Jay Hathaway Oct 30th 2009

Before there was anything today's Internet users would think of as "web design," there was GeoCities. The homepage service that let absolutely anyone try his or her hand at putting something on the Internet is also one of the cradles of contemporary Web Fugly. In fact, Fugly Friday owes such a debt to the GeoCities aesthetic that this week's installment is going to take a trip down memory lane to look at some early innovations in tearing a human being's eye out using pure HTML.

Today's fugly site, HTML Advanced Tricks & Tips, is a cookbook for everything that make GeoCities sites painful to look at. Tables! Frames! Scrolling marquee text! I will grant you that some people continue to defend tables to this day, but I don't think anyone is defending those animated flame GIFs. Good luck navigating this page by clicking on the text: it's not linked. You're not going anywhere unless you click on those dancing flames. Maybe that's a secret you learn from the "HTML Writer's Guild" once they give you a cool badge like the one on this homepage.

As for the tips themselves? Closing your tags is still decent advice, and cropping and shrinking your graphics was a necessity back in the low-bandwidth heyday of GeoCities. These tips were actually not terrible at the time, but the author has to mess it up by slapping on animated GIFs and encouraging the use of the marquee tag. Between those two, we've covered most of what made every GeoCities page so terrible. Add an autoplaying midi and you'd have a Fugly Tutorial Trifecta.

(This post was made possible by Reocities, a GeoCities rescue attempt that backed up 600,000 pages of potential fugly before Yahoo! shut off GeoCities' animated flashing lights for good.)

Tags: animated gif, AnimatedGif, fugly, FuglyFriday, geocities, HTML, Marquee

Filed under: Internet, Productivity, Web services

Dinky Page, for making quick throwaway webpages

by Jay Hathaway Aug 25th 2009

Dinky Page is a lightweight web page editor and hosting service, ideal for creating example pages or quickly hosting some information you need to share. If you have something to put up on the fly, and you need an HTML page, but not an entire blog, Dinky Page might be the perfect solution. You'll have to host your images and videos somewhere else, but that's not a big problem when people increasing have accounts on sites like Flickr, YouTube and Vimeo.

You only have to click one button to get started making a page on Dinky Page. From there, you can use the site's visual editor, or start writing or pasting your own HTML. Javascript and flash are supported, as is embedding. The downside of not having to register for Dinky Page is that there's no account you can log into to edit a pre-published page. Instead, you'll have to save the link Dinky Page gives you when you publish.

[via Instant Fundas]

Tags: dinky page, DinkyPage, editor, HTML, publishing, webpage

Filed under: Design, Developer, Macintosh, Browsers

Snow Stack shows off Safari's CSS visual effects

by Jay Hathaway Jul 20th 2009

If you're not excited about the potential of updated CSS and HTML standards support in the newest WebKit browsers, you might be after you check out Snow Stack.

Snow Stack is a demo of some slick visual effects using just HTML, WebKit CSS effects, and some Javascript. To see the live demo, you need to be running Snow Leopard and Safari, or Leopard and the latest nightly build of WebKit.

Snow Stack shows off a 3D wall of Flickr photos - if you're familiar with the Cooliris photo viewer, it looks a lot like that - and all the animation, reflection and transformation is done in CSS. If you're not on a Mac or can't run a new version of Safari, there's also a YouTube video that shows Snow Stack in action.

For developers, the source code and some useful development notes are available on the webpage, so you can check out how the demo was built.

Tags: css, html, safari, snow-leopard, snow-stack, webkit

Filed under: Design, E-mail, Microsoft, Browsers

Much ado about Outlook 2010's lame HTML rendering

by Jay Hathaway Jun 24th 2009

There's a minor uproar happening on Twitter over Microsoft's plans to continue using Word to render HTML email in Outlook 2010. Fixoutlook.org reports that nearly 8,000 people have signed a petition via Twitter to encourage Microsoft to change its mind and support web standards before the new version of Office leaves beta. To back up its claims, the site links to an HTML email message rendered in Outlook 2000, and the same message in Outlook 2010: the new version looks a whole a lot worse.

By sticking with Word's rendering engine, which Microsoft started using to render email in Outlook 2007, Microsoft would also be sticking designers with outdated font tags and tables, instead of the latest CSS hotness. According to The Email Standards Project, Microsoft's reason for doing this is to allow Outlook users to use Word's prepackaged design tools and email templates, and have those render correctly for other Outlook users. Microsoft itself is worried that rendering through a browser could slow performance and lead to inconsistent appearance across different HTML engines.

Tags: email, HTML, microsoft, outlook, outlook2010, protest, standards

Filed under: Design, Developer, Web services

Google asks users to make the web faster by using Page Speed

by Jay Hathaway Jun 24th 2009

Google's blogging about making the web faster, and they're backing it up with Page Speed, a Firefox add-on that makes sure your webpages use best practices to load as quickly as possible. Page Speed was quietly launched earlier this month on the Google Code blog, but now it's mentioned on The Official Google Blog, in a post that lays out some factors that slow down the web, and how Google thinks they can be fixed.

The Google plan for a faster web includes stuff like HTML5 support, more performance diagnostic tools like Page Speed and Yahoo's YSlow, and greater adoption of broadband. So, what are some of the best practices that Page Speed might suggest? Mostly, minor code tweaks like cleaning up your CSS so you only use each declaration once, or removing unnecessary tags from your HTML. There's some more advanced stuff that gets into PHP and JavaScript as well.

One note: Page Speed also requires the Firebug add-on for Firefox, which is very useful in its own right.

Tags: code, google, HTML, optimization, page-speed, web, web-design

Filed under: Internet, Microsoft, Ask DLS, Browsers

Ask DLS: What do you make of IE8's giant incompatibility list?

by Lee Mathews Feb 19th 2009

It's no secret that Internet Explorer has a history of thumbing its nose at web standards. IE8 is supposed to change all that, bringing improved (how could it not be?) compliance. An unfortunate side effect, however, is that some sites that have been designed to display properly in IE7 (or older) don't look so hot in the new version.

I particularly like one excerpt from the IEBlog: Site owners are *always* in control of their content. That's important to remember in case you were thinking the browser had something to do with why a site looks fine in Firefox, Chrome, or Opera but not IE.

How, then, to avoid these problems? Why, with the incompatibility list, of course! Sites added to it will automatically load in "compatibility view," thus providing the average user with a more hiccup-free browsing experience. Trouble is, the list is getting big. Stupid big.

ZDNet's Mary Jo Foley reported that the list currently contains 2,400 sites that don't render properly in IE8. Even better is the fact that the list includes some pretty major sites, like Yahoo! and Google. Google? How does a web browser not render Google correctly?

What do you make of the list? What does it say about the state of Internet Explorer and web standards?

Topical addon: The Register has published a post about Norwegian websites banding together to urge users to upgrade from IE6 to a "more compatible" browser so they don't have to hack up their code.

Tags: fail, html, incompatability, internet-explorer-8, standards

Filed under: Design, Internet, Features, Linux, Open Source

Flipping the Linux switch: Linux web tools, Pt.4 - HTML editors for every mood

by Kristin Shoemaker Jul 3rd 2008

Maybe you've taken some time and fooled around a bit with Quanta Plus and Bluefish and decided that they weren't for you. Maybe you just looked at the features, and the GUIs and thought, "I'd rather pluck my nose hairs out than use those."

That's okay. We're not about to pass judgment on your taste in HTML editors, or your strange penchant for self-inflicted pain. And while we may never use the tweezers in your house, we will gladly point you in the direction of alternative HTML editors.

This week we'll take a look at Screem and Amaya in brief. These two editors are frequently found in distribution repositories (and are also, of course, available as source code). Both of these editors have a very different take on what their users hope to accomplish with them. We hope at least a few have earned your badges of dorkdom, and are presently happily pondering the irony of applications that do the same thing to reach different ends.

Whether you like the idea of handcoding growing the hair on your chest (as opposed to your nostrils), the moral highground of browsing and coding with standards compliance, we've got you covered.

Next week, we'll take a closer look at our final two editors, suggested by our noble readers at the beginning of the series.

Tags: amaya, html, html editors, HtmlEditors, linux, linux-switch, screem, web

Filed under: Design, Developer, Internet, Features, Linux, Open Source

Flipping the Linux switch: Linux web tools, Pt. 3 - Intro to HTML editors

by Kristin Shoemaker Jun 26th 2008

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.

Tags: bluefish, code, editing, gnome, html, kde, linux, linux-switch, quanta plus, QuantaPlus, xhtml

Filed under: Developer, Features, Linux, Open Source

Flipping the Linux switch: Linux web tools and HTML editors, Pt. 1

by Kristin Shoemaker Jun 9th 2008

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.

Tags: FTP, HTML, internet, linux, linux-switch, web development, WebDevelopment, XHTML

Filed under: Internet, E-mail, Web services, Google

Add HTML signatures to Gmail using a bookmarklet

by Brad Linder Jun 9th 2008

For some baffling reason, Gmail still doesn't officially support HTML signatures. In other words, you can't add links, graphics, or adjust your fonts.

There are a handful of Greasemonkey scripts that add support for HTML signatures, and the latest version of Better Gmail also lets you create HTML signatures without installing Greasemonkey. But what if you don't want your signature to show up on every single message? Or what if you want to create multiple signatures that you can use in different situations?

GeekFG has developed a web service that lets you create and HTML signature and then save it as a browser bookmarklet. All you have to do is click on the bookmarklet when composing a Gmail message in Firefox or Internet Explorer and your signature will be added.

This utility comes from the same guy who brought us DomainFinder, a web service that lets you break up any word or phrase into possible domain names like downlo.ad/squad or downloadsq.ua/d.

Tags: bookmarklet, gmail, html, sig, signatures

Filed under: Design, Internet, Blogging

Lycos launches Webon web site builder

by Brad Linder May 20th 2008

Lycos has launched a new web page builder called Webon. The service appears to be the latest salvo in Lycos's mission to remind people that the once powerful web portal still exists. A few weeks ago Lycos also updated its Lycos Cinema media player to allow users to chat in real time while watching movies together over the web.

Webon is sort of like a cross between Google Page Creator and Google's Blogger. There are a variety of templates for creating several different types of web page. You can make a standard home page, create and update a blog, a photo album, a travelogue, or a wedding web site. No HTML knowledge is necessary. You just pick a template and start adding content. You can customize the look and feel of your site by adding widgets or custom HTML code.

You can try out Webon without signing up for the service, which is a nice touch. But if you want to publish your page for the rest of the world to see, you're going to need to register for a free or paid account. Free sites are hosted at username.webon.com, while you can register a custom URL (username.com) for $8.95/month. While that might seem a bit steep, the Webon personal plan also lets users upload an unlimited number of images. Yeah, it still seems kind of steep.

[via WebWare]

Tags: blogger, blogging, html, lycos, web-page-builder, webon

Filed under: Utilities, Windows, Open Source

Compile stats for text and HTML docs with Text Stat

by Brad Linder Mar 21st 2008

Most word processors will give you some basic statistics about documents you're working on, like a word count. But what if you want to see how many words, paragraphcs, sentences, characters, and spaces are in a text-based document without opening it up in a word processor?

Text Stat is a lightweight, open source Windows application that will let you analyze any TXT or HTML file. In addition to those stats, you Text Stat will spit out a whole bunch of numbers that you'll probably never need to know, including the average number of syllables per word, the average number of words per sentence, and a Flesch score, which basically tells you how difficult the article is to read.
[via gHacks]

Tags: html, statistics, text, text-stat, words

Filed under: Text, Productivity, Google, web 2.0

Add page numbers and other information to Google Documents

by Simon Kerbel Mar 10th 2008

As Google Docs slowly begins to take form as a legitimate office replacement, there are still a few glaring feature absences. One of those is the inability to add custom-formatted page numbers or dates to your documents.

If you don't mind rolling up your sleeves and getting your hands a little dirty, Google Operating System tells us how to add page numbers and other information to your document's header or footer. This involves a little HTML editing, so consider yourself warned.

Note: If you simply want page numbers added to your Google Doc, and you don't need to customize them by adding color, size, or scheme, then you're better off exporting the document as a PDF and selecting the bullet that adds page numbers to your document. In other words, the following method is useful only if you want more customization than Google Docs by default provides.

In order to add a header that displays, for example, "Page (current page number) of (total number of pages)", open your Google Doc, click on "Edit HTML" (right next to the Revisions tab), and add this code at the very beginning of the code:

<div style="text-align: right;" class="google_header">Page <span class="google_pagenumber">1</span> of <span class="google_pagecount">1</span></div>

To add the same information to the footer, add this code to the bottom of the document:

<div style="text-align: right;" class="google_footer" id="google_footer">Page <span class="google_pagenumber">1</span> of <span class="google_pagecount">1</span></div>

Now that the code is in, you can customize it any way you desire.

Tags: google, google docs, GoogleDocs, html, page numbers, PageNumbers

Filed under: Design, Internet, Web services

Browsershots: view a webpage in many browsers

by Todd Ritter Mar 7th 2008

Browsershots is a free web service for viewing a website in about 50 web browsers among 4 operating systems (Linux, Windows, Mac OS X, BSD). This is helpful for checking your web design on multiple configurations without having to use virtual machines or extra hardware and software.

You just enter your URL, check the browsers you want to see, choose extra output options like screen width, color depth, and Javascript version, and then click "Submit."

Your job will be added to a queue so that all of the browser screenshots can be generated, so waste some time for a few minutes. When the job is complete, you'll have a group of thumbnails (one for each browser screenshot).

Clicking a thumbnail will enlarge the screenshot and give you information on the computer and browser that rendered your site. Clicking the screenshot again will enlarge the picture to full size.

Browsershots supports Firefox 3 (on Linux and Windows) and IE 8, but not Safari 3.

[Thanks Jonathan!]

Tags: html, javascript, validation, web browser, web design, WebBrowser, WebDesign

Filed under: Design, Developer, Internet

htmlPlayground: learn and test HTML and CSS

by Todd Ritter Feb 6th 2008

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.

[Via garyll]

Tags: code, css, html, learn, test, xhtml

Graveyard Shift - zombie-busting Time Waster

With Halloween fast approaching, it's a great time to get in some practice defending your territory against zombies. In Graveyard Shift, you take aim at zombies and other creepy-crawlies, blasting them into splatters of cartoony green guts. It's a casual first-person shooter, and it's very easy to get the hang of - use the mouse to aim, click to fire. Graveyard Shift has at least 15 levels, and it might even have some secret stages I haven't unlocked yet. They key to getting good at Graveyard Shift is learning to use ...

View more Time Wasters

Featured Galleries

Defective by Design, London: Protest Pictures

Download Squad at the Crunchies After-Party

Android First-look: Amazon.com MP3 Store

Flickr Pool

www.flickr.com

Download Squad bloggers (30 days)

#	Blogger	Posts	Cmts
1	Jay Hathaway	112	5
2	Lee Mathews	75	33
3	Sebastian Anthony	49	155
4	Brad Linder	38	7
5	Jason Clarke	32	0
6	Grant Robertson	8	10
7	Dolores Parker	7	2
8	Victor Agreda, Jr.	7	1
9	Nik Fletcher	4	0
10	Matt Heerema	3	3
11	Paul O'Brien	2	0
12	John Burke	1	0
13	Download Squad Staff	1	0

More Tech Coverage

Control Shift It's all about the experience
Somewhat Frank Perspectives on tech as it fuses in everyday life
Switched Gadgets, web news and commentary
Urlesque Exposing bits of the web

Download Squad