Categories
Business and Marketing Engineering Web Design Tips and Insights

Information as Deck of Cards

Found this site when searching for answer to some git issues. It turns out to be a very nice way to teach stuff, simple and efficient:

https://githowto.com/setup

A guide like this should be as easy to write as it is easy to learn from.

The key here is to associate problem / question / issue with a straightforward solution / answer in a very simple manner. Talk is expensive. We should talk as less as possible.

Deprive of any words that your tutorial or guide can live without but leave only those that are vital to the actual solution / answer.

A full tutorial or guide should be comprised of a list or a network of standalone articles that are simple yet powerful in addressing 1 – 3 problems each. They are more like a deck of cards wired together linearly or hierarchically that the readers can search or navigate back and forth.

Each article / card should be no more than 2 minutes of reading. This helps establish learning milestones for the readers thus keep them motivated to continue because each learning session is easy to finish and apply.

Categories
Web Design Tips and Insights WordPress How To

Theme Van Premium Portofolio WordPress Theme by My Friend Johnny

My friend Johnny is a very talented web designer. He’s recently released a portfolio WordPress theme at ThemeForest which is very classy and cutting-edge in styles.

SimpleKey

Be sure to also check out some of his other work at the ThemeForest page and his design studio ThemeVan.

Categories
Affiliate Programs Internet Tools Microsoft Windows PDF Tips & Tutorials

Software to Convert PDF to MS Word Format

PDFZillaOne of my friends has created a very useful piece of software to do PDF to Word conversions. I find his product a breeze to use so I’m recommending it to my fellow readers. Hopefully it would be of some use to you guys.

Differences between PDF and Word

PDF (.pdf) and MS Word (.docx, .doc) are probably two of the most popular digital file formats for readable documents that are intended for humans. The major difference between the two is that MS Word can be easily edited while PDF is a finalized container of postscript data that are essentially non-editable vector information. Although you can read text in a PDF document, they are actually vector graphics rather than plain text such as those in a MS Word document.

This difference explains why people would want to convert a PDF document to a Word one as they can then make changes to the content and make further use of it. A lot of online tools and desktop applications exist for this purpose, such as PDFZilla, which provides easy procedures to imitate an OCR process to scan and analyze the supplied PDF document and convert it into high quality editable Word, in just 3 clicks. A batch mode is also available for people who want to convert a large number of PDF documents.

How to convert PDF to Word?

This is as simple as 3 clicks. Here are the steps:

  1. Head to http://www.pdfzilla.com and download the latest version of the PDF to Word software.
  2. Run PDFZilla.
  3. Add a PDF file by clicking the big green plus / add button.
  4. Choose the destination format as Word Files (*.doc).
  5. Click “Start Converting Now” button.

Okay, that’s like 8 clicks, but you got have some clicks…😉

Selling PDFZilla for 75% Commission

Lots of my readers are webmasters, so I’m also thinking this might be a good chance to earn some bucks by promoting this software as it’s rather generous of my friend’s offer – 75% affiliate commission. It’s very rare to come by a product of such usability yet of such high commission rate. Definitely much better than those ClickBank hit and run. Think about it.

Categories
Free Webmaster Resources Internet Tools My Products & Services Web Design Tips and Insights

How to convert .png, .gif, .bmp or .jpg images to .ico icons to make favicon.ico for your website?

image conversion tool Over a year ago I created this online web application Convert Hub by the help of the splendid open source image manipulation library Netpbm. Give it a try, upload an image and convert it to another format. But not just that, it’s also capable of resizing an image, rotating or flipping it.

I love it. It’s simple yet adequately useful. The best part of it for a webmaster like me is that it can convert other image formats such as .bmp, .jpg, .gif and .png to .ico so I can use them as favicon.ico for my sites. Try these US state flags and convert them in any way you want!

It’s a great tool and gained tremendous popularity. I know this because one day DreamHost warned me of overwhelming server resource usage and took it down for good reasons. I had to move it elsewhere and Linode is where it currently resides on.

Server side computing is too expensive for a free application like this. After a few ideas and thoughts, I decided to create a client side software program to do the job instead. It’s called Batch Image Converter. And it proves to be much better. It doesn’t come with a daily limit on the number of conversions allowed per IP but you can do as many conversions as you want. The whole software consists of one single executable file, there’s even no need to go through any installation steps. It’s totally green to your system. What’s best, it can work in batches which means you are able to perform operations such as format conversion and dimension resizing on a lot of images by a single click.

All you need is to download it there. It’s free. The problem is that it only supports Windows for now. I’m planning on rolling out versions for other platforms but this may not happen soon.

Please do let me know what you think of the application in the forum.

Categories
Web Design Tips and Insights

If you are not a professional designer and don’t want to look stupid

I have a few tips for you:

  1. Stick to simple white design.
  2. Use no more than 4 colors other than grey scale (white, black, grey). Actually 2 would be perfectly enough for text information intensive sites.
  3. Design the site as if it’s a chapter in a print book.
  4. Plan blank areas.
  5. Be goal oriented and GET RID of EVERYTHING that’s not closely contributing to the goal. You achieve perfect by having nothing to peel off instead of the other way around.
Categories
CSS & HTML Tips Web Design Tips and Insights

Please, by all means, don’t use overflow:hidden for content!

No matter how fairy or pretty your design / template is, never use overflow:hidden for content containers.

Content comes a thousand times more important than any design or layout. I don’t care how much you hold proud your artistic work and how you think accommodating the content in any way possible would ruin the holy sweet layout, when an image or a table with indispensable content that the readers / visitors are ultimately concerned about expands across the content areas and messing up with your fucking design, using overflow:hidden to restrict them is just plain STUPID and ANNOYING.

Please by all means, DO NOT use overflow:hidden for content containers! What really matters is the idea / content the design is trying to convey rather than the design itself.

Categories
CSS & HTML Tips Web Design Tips and Insights

HTML Tags Design for Template / Theme Creation

There are in total nearly a hundred HTML tags with good ones as well as bad ones in terms of XHTML. In the creation of a template or theme, after designing for the overall layout, artistic feel as well as the entire set of visual elements, the designer will be preparing the ready-to-use styles needed for common content tags such as the headings <h1>, <h2>, <h3> and <blockquote> and so forth, even though they may not have been used yet in the design. This article tries to be a rough guide on what tags to be styled before hand.

Here’s a shortened list for the most common scenario:

  1. <a>, the hyperlink, of course.
  2. <acronym>, usually for acronyms and abbreviations such as HTML. Industry standard is to style it with a dotted border at the bottom. However, <acronym> tag has fallen out of favor of HTML5, use <abbr> instead.
  3. <cite>, author, <q>, inline quotations, <blockquote>, large paragraphs of quoting which is one of the most necessary tags that need to be styled before hand.
  4. <button>, you may or may not prescribe a global visual style for all button tags across the template
  5. <caption>, table caption / title, centered and bold by default, come out with a better one in case the content contains a lot of tables. <table>, <tr>, <th>, <td>, <thead>, <tfoot>, <tbody>, … for table styles
  6. <code>, for templates dealing with code samples.
  7. <dfn>, for definition terms, frequently used with a lot of inline terms and definitions.
  8. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, content headings.
  9. <img>, content image styles.
  10. <fieldset>, form fieldsets. <legend>, form fieldset title.
  11. <form>, forms.
  12. <input type=”text”>, <input type=”checkbox”>, <input type=”radio”>, <input type=”file”>, <input type=”password”>, <textarea>, input controls of forms.
  13. <label>, form field labels.
  14. <li>, <ol>, <ul>, ordered list styles and unordered list styles.
  15. <p>, paragraph styles.
  16. <select>, <option>, <optgroup>, select list styles.
Categories
Kavoir & Whatever Web Design Tips and Insights

Key Differences between the Web Design of Google, Microsoft and Yahoo

Microsoft and Yahoo is colorful in colors but Google is colorful in the imagination.

Google uses much less colors than Microsoft and Yahoo do. Yet somehow, Google comes out as the versatile one.

Google uses much more traditional colors than Microsoft and Yahoo do and rarely change in the style, yet it comes out as the innovative one.

Google has much less web page elements than either Microsoft or Yahoo, yet it has come to be known as the sophisticated one.

Openness is rich in Google in that they design all of their pages with no distinct boundaries at all on a plain white blank sheet stretching as wide as the browser window / computer screen. On the contrary, Microsoft and Yahoo believes in borders, boxes and restrictions.

Categories
Client Side Coding Books CSS & HTML Tips Web Design Tips and Insights

Best CSS Books to Learn CSS Web Design

While HTML is the concrete of all web pages and websites, CSS is the spirit. It specifies the aesthetic aspect of all the web pages by design through presentation, conveying the ideas and sensations by visual languages. The first class of all web designers start with CSS.

These are some of the best CSS books out there reviewed indispensable for those who want to be a web designer or / and developer.

Web Developers / Designers’ Books:

  1. Best HTML Books
  2. Best CSS Books
  3. Best JavaScript Books
  4. Best PHP Books
  5. Best MySQL Books
  6. Best Linux Books
  7. Best Apache Books (mod_rewrite Books)
  8. Best Web Hosting Books

CSS: The Missing Manual

CSS The Missing Manual

CSS: The Definitive Guide

CSS The Definitive Guide

CSS Mastery: Advanced Web Standards Solutions, Second Edition

CSS Mastery Advanced Web Standards Solutions, Second Edition

Stylin’ with CSS: A Designer’s Guide (2nd Edition) (Voices That Matter)

Stylin' with CSS A Designer's Guide (2nd Edition) (Voices That Matter)

CSS Pocket Reference: Visual Presentation for the Web (Pocket Reference (O’Reilly))

CSS Pocket Reference Visual Presentation for the Web (Pocket Reference (O'Reilly))

Pro CSS and HTML Design Patterns

Pro CSS and HTML Design Patterns

The Ultimate CSS Reference

The Ultimate CSS Reference

Transcending CSS: The Fine Art of Web Design (Voices That Matter)

Transcending CSS The Fine Art of Web Design (Voices That Matter)

Beginning CSS Web Development: From Novice to Professional

Beginning CSS Web Development From Novice to Professional

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition) (Voices That Matter)

Bulletproof Web Design Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition) (Voices That Matter)

Handcrafted CSS: More Bulletproof Web Design

Handcrafted CSS: More Bulletproof Web Design

The Zen of CSS Design: Visual Enlightenment for the Web

The Zen of CSS Design: Visual Enlightenment for the Web

More Eric Meyer on CSS (Voices That Matter)

More Eric Meyer on CSS (Voices That Matter)

Designing with Web Standards (2nd Edition)

Designing with Web Standards (2nd Edition)

Categories
Client Side Coding Books CSS & HTML Tips Web Design Tips and Insights

Best Books of HTML and XHTML to Learn How to Create Web Pages / Sites with HTML and CSS

HTML is the language of the Web and all websites are written in HTML (XHTML). To learn creating website, the first thing you will need to learn is HTML. Period.

Some of the selected books below are for beginners and some are for intermediary coders to consolidate your knowledge of HTML and CSS and practice along reading the books.

Web Developers / Designers’ Books:

  1. Best HTML Books
  2. Best CSS Books
  3. Best JavaScript Books
  4. Best PHP Books
  5. Best MySQL Books
  6. Best Linux Books
  7. Best Apache Books (mod_rewrite Books)
  8. Best Web Hosting Books

HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)

HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)

Head First HTML with CSS & XHTML

Head First HTML with CSS & XHTML

Build Your Own Web Site The Right Way Using HTML & CSS

Build Your Own Web Site The Right Way Using HTML & CSS

HTML, XHTML, and CSS All-in-One Desk Reference For Dummies (For Dummies (Computer/Tech))

HTML, XHTML, and CSS All-in-One Desk Reference For Dummies (For Dummies (Computer Tech))

The Ultimate HTML Reference

The Ultimate HTML Reference

HTML and XHTML Pocket Reference (Pocket Reference (O’Reilly))

HTML and XHTML Pocket Reference (Pocket Reference (O'Reilly))

HTML A Beginner’s Guide (Beginner’s Guide (Osborne Mcgraw Hill))

HTML A Beginner's Guide (Beginner's Guide (Osborne Mcgraw Hill))

HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

HTML & XHTML The Complete Reference (Osborne Complete Reference Series)

Creating a Web Page with HTML: Visual QuickProject Guide

Creating a Web Page with HTML Visual QuickProject Guide