Today John Bonetti Turns 26
Happy Birthday John, you magnificent bastard.
John Mayer – Kid A (Radiohead cover)
Archived entries for web
How to Recover Your Deleted Blog
Thanks to bad directions from the worst hosting company ever, plus my own carelessness, I deleted The Cookblog’s MySQL database yesterday. After exporting the database, deleting it, and recreating it, my attempts to import all of the tables back in met with failure due to an error. Further study showed that the export contained an error, so my copy was essentially useless. After a few choice words, I had no choice but to set about retrieving my lost posts (naturally, I hadn’t backed them up). I’m sure this has happened and will happen to others, so here’s how I went about recovering my posts with the help of Google and WordPress.
1. First, you’ll want to find the copies of your pages that Google knows about. To do this, simply do a Google search for “site:yoursitename.com”
2. For each post, get Google’s copy by clicking the “Cached” link below the search result. It’s helpful to have a browser that supports tabs for this, since there will probably be a lot of these pages to open, especially if you have a lot of posts.
3. Clicking the “Cached” link will take you to a page that states the date Google last saved it. It may or may not include images. Since Google won’t keep these copies around forever, it’s best to go through this process as soon as possible.
4. If you want to save the images for some reason (I still had my files intact in my FTP and they were backed up anyway), you can right-click and “Save As” to capture them. Otherwise, you’ll want to view the source code of the page. If you use WordPress, you should be able to find the title of your post, the date it was posted and the content of the post. Select the code starting with the title and ending with the close paragraph tag. Copy it and paste it into a TXT file. Repeat steps 2, 3 and 4 for each post.
5. Once you have all of the posts you can get off Google in the TXT file, open up the WordPress’s Write Post interface. Copy and paste in the title of the post, then switch the input field from “Visual” to “Code”. Paste in the code of your post, starting with the paragraph tag that opens the post and ending with the end paragraph tag that closes the post. This will keep your links and images intact without having to re-enter them.
6. Between the title and post content in the source code is the date that you actually published the post. You can use WordPress’s Post Timestamp option to publish the post with the initial date.
As long as Google has seen your pages and made its own copy, you should be able to recover almost all of your lost content. It only took me about an hour to retrieve and republish the 50 or so posts I’d made over the past few months. It also persuaded me to use the Manage–>Export function to save a copy of my entire blog so that if I ever delete it again, I’ll be able to reinstall WordPress, import my saved file, and revert immediately to its previously saved state. That’s a far easier and more complete way to recover a blog, but the above method is better than nothing. Anyone else have tips/horror stories?
9 Resources for the Casual Web Designer
More people have websites these days than ever before. Blogs, family photo albums and online resumes are just some of reasons for this growth in web publishing. Fortunately, the proliferation of blogging engines, templates and apps has continued apace, meaning that virtually anyone who’s pointed in the right direction can make a website that is viewable and usable with relative ease.
For those wishing to delve more deeply into web design, there are plenty of applications to expedite the process. These nine resources cover the theory of design, provide tools for customization and offer the knowledge to continue one’s education.
Theory
A List Apart – An elegant site that consistently produces thorough, forward-thinking articles on many aspects of design.
Copyblogger – Featuring many topics of interest to bloggers, Copyblogger frequently discusses best practices and useful tips for blogging better.
Web Style Guide – A reference website that covers everything from layout to typography to graphics to copy. Good for finding the answer to a specific question.
Tools
Stripe Generator and Tartan Maker – These cool apps are beautifully designed and create great-looking stripes and tartans that can really dress up your website. Combined with Photoshop, they’re outstanding bases for backgrounds, with stripes for the Web 2.0 crowd and tartans for you Scots.
Brusheezy – A growing resource of Photoshop brushes, there are already a number of excellent ones to be had. It’s hard to believe that such great brushes as the Vintage Hand brushes and Indian Vibes brushes are free.
Phixr – Not nearly as powerful as Photoshop, but a good web-based photo editor nonetheless. The thumbnail preview helps make adding effects to Photos a cinch, and it saves your photo for 2 hours without you even having to log in.
Further Learning
Web Developer Toolbar – Only for Firefox, this handy toolbar gives you a wealth of data about any page you’re on, including page validation, document size and element information.
CSS Zen Garden – Revealing the true power of Cascading Style Sheets, this site is great for inspiration and study. It’s truly amazing how much these designers can change a page by only altering a style sheet.
Webmasterworld – With topics on e-commerce, robots.txt, Google search and every other aspect of webmastering, WMW is a great forum for asking questions, whether practical or theoretical.
Typeface Cheatsheet Upgrade
One basic design decision when creating copy for print or web is typeface. I recently discovered a nifty cheat sheet at The Thinking Blog that summarizes complementary fonts in a simple table. As useful as the PDF document is, I thought it could be improved by applying the actual fonts to their respective names. At very least, you’ll now be able to make better judgments for yourself whether two fonts are complimentary rather than going on blind faith.
Download (Right-click and select “Save As”)
Please let me know if you find this useful, or if you have other suggestions how to improve it (I realize the font list isn’t exhaustive). Also, credit must go to the original creator of this cheat sheet, Alessandro Segalini.
What is Web 2.0?
There’s a lot of talk these days about Web 2.0. What is “Web 2.0″ exactly? What do people mean when apply the label to something? Web 2.0 is a buzzword, a sensibility and a revolution all in one. At its root, Web 2.0 is a combination of style and substance. For most people, the term is far easier to recognize than define, so it’s best to include explanation alongside example.
I. Style
Large fonts, large line-spacing, large images, large search bars, large everything! Two hallmarks of the first websites ever were the choppy, hard-to-read fonts and tiny-but-still-slow-to-load images. The first wasn’t necessarily a problem since people didn’t tend to read much or for long on their computers. Times have changed. Email, news, e-books, forums and essays are all commonly read off the screen now, leading websites to adopt to ever-larger fonts that reduce eye strain and make the text more digestible.
With the ubiquity of high-speed internet connections, images have also become quicker to download, allowing the option of more visual navigation, particularly through computer languages like Flash and Ajax. Screen resolutions in general are higher, moving from the former standard of 800 pixels x 600 pixels to the new standard of 1024 pixels x 768 pixels and beyond. This extra space allows for these larger on-page components.
Glassy buttons, glassy logos, glassy badges, glassy images, glassy everything! Using a few simple photoshop effects, nearly every image is treated to make it look glassy, three-dimensional and sophisticated. This is a direct reaction to the usual flat, basic images used in the first generation of websites. It also compliments the larger fonts and forms by making site interaction obvious and rudimentary.
Light, bright, pastel colors! Big fonts and big classy buttons are harnessed in templates that use plenty of white space to keep sites breezy and uncluttered. The color palettes aid this effect by eschewing dark, heavy colors in favor of soft neons. The result is a site with a simple, elegant theme that looks technologically advanced, but not threatening or confusing.
Here are four examples of Web 2.0 designs: del.icio.us, Last FM, WordPress and Technorati.
II. Substance
Community-generated content. Many Web 2.0 sites are the properties of new internet startups, low on staff but high on savvy. With a skeleton crew of just a few people, these companies let their traffic pay their bills and provide their content in the shape of forums, uploads and blogs. To make it easy for users to participate, many Web 2.0 sites use GUI(Graphical User Interface) applications and WYSIWYG(What You See Is What You Get) forms.They use technology to make it easy for users to input data, technology to maintain the data and technology to display the data. That allows them to focus most of their efforts on marketing, which is important because users may be willing to post pictures of themselves sailing, but may not be willing to spend any money. As a result, many Web 2.0 sites are monetized inefficiently by methods like Google AdSense, which squeezes pennies out of traffic.
Fads, niches and flavors of the month. Because of the low overhead in starting up a website, many people in the industry won’t hesitate to get one up as fast as possible if they see an opportunity. It could be anything–board games, terrorism or hockey fights. The key is to get the traffic. Once there, that traffic can be monetized in a variety of ways, depending on the site.
Optimized for Search Engines. SEO, or Search Engine Optimization, wasn’t a consideration in the early days of the internet. Then came Yahoo. Then came Google. These days, ranking well for the desired keywords in Google is often the difference between success and failure for a website. No matter how good the content on your site, no matter how much word-of-mouth buzz you can generate, if you can’t be found by someone using a search engine, you might as well not exist. To that end, a whole industry has grown, devoted to the art and science of making sites search-engine-friendly. Any Web 2.0 site worth its salt will have basic SEO components in place, including META Descriptions, unique page titles and clean “permalink” URLs. They’ll also actively solicit links using link bait, link exchange and money.
Here are some examples of well-known Web 2.0 sites that offer unique content: YouTube, Lifehacker, Facebook and Digg.
The term Web 2.0, like its site designs and content, may well be more transient than the first generation of websites. Overall, they frequently have less work and thought invested in them, and they are usually of a commercial rather than informational nature. On the other hand, crowdsourcing and community-created resources like the Wikipedia may be the wave of the future, with the collective will of the whole determining the direction of the Web instead of a few visionaries. Either way, there’s no doubting the Web 2.0 movement’s importance in the evolution of the internet and its status as the standard of the World Wide Web today.
