Deprecated: Function set_magic_quotes_runtime() is deprecated in /srv/www/web164/html/blog/textpattern/lib/txplib_db.php on line 14 Vitaly Friedman's Notebook

List of nifty tools for drawing diagrams, charts and flow-charts
  » Aug 18, 12:53 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

Update: The site is experiencing heavy load at the moment, please be patient. Meanwhile, you can digg the article, if you think it could be useful for other users.

Being a web-developer means not only being able to design web-sites or program their functionality. Sometimes it also means to be able to explain complex issues clearly and be able to present to your potential customers reasonable and convincing arguments – in order to find the best compromise between the customer’s wishes and the standards you respect. In fact, it is essential to make sure the customer understands which advantages you are actually offering and why this or that layout and markup are better for a given web-project.

Developing web-sites over the last few years, I’ve been stumbling over the same problem over and over again: how can I visualize my idea easily and quickly? Since human being is used to visualize things, trying to understand the idea behind them, recently I’ve spent hours googling for useful tools and tutorials which would help me to create images – mostly, diagrams, charts, chart-flows etc. to visualize my personal ideas to my potential clients.

The results of my search were initially published in one of the most popular German Web-Magazines Dr. Web in German; however, I’d like to present them to the even broader audience – and in English. If you have any further suggestions, ideas or constructive criticism, don’t hesistate to comment on this article!

List of nifty tools for drawing diagrams, charts and chart-flows


(compiled by Vitaly Friedman)

List of nifty tools for drawing diagrams, charts and flow charts

Tutorials

Free Web-Tools

Free Software

Leading commercial products:

  » Web-development, Web-Resources @ Aug 18, 12:53 PM

  Comment? [31]

New Free Quality Fonts - Union & Vollkorn
  » Apr 17, 10:02 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

In the article “25 Best Free Quality Fonts” published in my blog few months ago, I’ve mentioned the font “Union” (s. below). This font, designed by the Danish Ministry of Education, was removed from the server in the December of 2005. Since then, I’ve received numerous inquires about the location of the font. To be honest, I just didn’t know where you could download it. I didn’t! Until Karasu has informed me about the copy of the page and the Union font which is stored in the cache of WayBack Machine. I am not sure how long the link will work, but now you finally have an opportunity to download the font I’ve written about few months ago. Anyway, thanks, Karasu!

Union: Description and Download

Union

And since we are talking about fonts: Vollkorn is a beautiful, quality font, released by Friedrich Althausen under the Creative-Commons-license.

Vollkorn: Description and Download

Vollkorn

Found via Gerrit, of course.

  » Web-development, @ Apr 17, 10:02 PM

  Comment? [5]

Icons Round-Up: Free Mini Pixel Icons
  » Apr 10, 09:53 AM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

Mini-icons are becoming more and more popular. You can use them every now and again – developing web-sites, weblogs or eCommerce-portals. Few hours ago n.design-studio has released a set of Mini Pixel Icons. The icons are divided into 5 categories – File Type Icons, Web Design Icons, Web Blog & CMS Icons, User Icons, E-commerce Icons.

Mini Pixel Icons

Over 320 free mini pixel icons are designed at 14×14px with transparent background. They are specially designed for header or side navigation buttons. Feel free to use these icons for your site (personal or commerical). However, if you are using more than 10 icons, you must give a link back to the sie you’ve downloaded them from.

If you are looking for more professional free icon sets, you may be interested in visiting the following links:

Any ideas, suggestions? Don’t hesistate to comment!

  » Web-development, Web-Resources @ Apr 10, 09:53 AM

  Comment? [11]

Free Quality Font - Charis SIL
  » Mar 31, 12:22 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

SIL International, the creator of Gentium, presents Charis SIL – a free quality serif font, proportionally-spaced and optimized for readability in long printed documents. Charis is similar to Bitstream Charter, one of the first fonts designed specifically for laser printers. It is highly readable and holds up well in less-than-ideal reproduction environments. It also has a full set of styles – regular, italic, bold, bold italic – and so is useful in general publishing.

Charis SIL

The font can be downloaded from Charis SIL Font Homepage.

[ Found via Praegnanz.de ]

  » Web-Resources, Web-development @ Mar 31, 12:22 PM

  Comment? [1]

WebSiteTips.com re-designed
  » Mar 23, 01:57 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

One of the most useful web-dev-sites with articles, references, tutorials and tips for web-developers is re-designed and updated. Recommended for daily visiting and daily reading.

An educational Web site design and development resource, Websitetips.com provides CSS, HTML, and XHTML tutorials, graphics tutorials, articles, tips, and Web design and development resources to build or improve your Web site presence - especially for Web site owners, Web designers, Web professionals, webmasters, teachers and educators, and students.

Websitetips.com

WebsiteTips.com's hallmark is our hand-picked, carefully selected, extensive listing of over 2,400 annotated resources to best-practice tutorials, articles, resources, and information on the Web for HTML, CSS and color charts, font sites, search engine optimization and marketing sites, graphics and HTML tutorials and programs, usability and information architecture sites, informative articles, tips, and more.

The resource is definitely worth visiting. But what about you? What sites do you visit regularly? Comment on this article!

  » , Web-Resources @ Mar 23, 01:57 PM

  Comment? [1]

20 Rules Of Smart And Successful Web-development
  » Mar 20, 04:45 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

12 months. 12 months already…

20 rules of smart and successful web-development

A year ago I have started to improve my web-development skills and to share the knowledge I had with the visitors of my blog. Most projects and articles I’ve created or written are still popular in the Net – The Web-Developer’s Handbook has become one of the most popular web-sites since the beginning of social tagging, it was digged, slashdotted (twice), bookmarked by over 8000 + 3770 delicious users; the articles about my projects and articles appeared on SiteProNews, Lifehacker, Zeldman.com, 456bereastreet, mezzoblue, stopdesign and 274.000 other web-pages.

The funny thing is that as I was just realizing my ideas in the Web, I didn’t think about getting the page popular, tweaking its position in search engines or finding potential clients on the Web. The basic idea was helping people. First of all, helping me, but also sharing my work with people who might need it sometimes. And, essentially, exactly this attitude has provided and provides thousands of hundreds visitors on my page – per week.

Over the last 12 months, developing few web-sites, I’ve found out some interesting concepts and ideas which helped me to improve the quality of web design and information I present on my web-pages. Besides, I’ve realized some insightful facts I hadn’t know before. I’ve acquired a vision of what it means to create web-sites and what it means to create them well. Since this information might be of a public interest, I’d like to share it with you, presenting the key points in the list below.

So, basically, “20 Rules Of Smart And Successful Web-development” is my personal pick of the main ideas and concepts, which might improve the quality and popularity of your web-sites and provide a good foundation for successful development in the future.

20 Rules Of Smart And Successful Web-development

The rules mentioned above won’t bring you any success if you don’t believe in what you do and don’t explore your creativity. Every idea can be the one.

This is pretty much everything I came up wuth during my train trip from Saarbruecken to Frankfurt am Main. Any suggestions, ideas? Don’t hesistate to comment!

  » Ideas, Web-development @ Mar 20, 04:45 PM

  Comment? [36]

Creating graphs
  » Mar 13, 12:13 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

Have you ever wondered how you could create a nice graph or present statistical data for your presentation or web-site? Well, Wolfgang Bartelme had. And decided to share his knowledge with web-dev-community.

Creating Graphs

Every now and then you may come into the situation that you have to present some sort of statistical data to your client. Of course you may use Excelв's graph tool to easily create a bunch of charts - but let's face it, more or less all of those predefined designs suck. So you have to look for another option.

Learn more: Creating Graphs. Part 1,
Creating Graphs. Part 2.

  » Web-development, Ideas @ Mar 13, 12:13 PM

  Comment? [1]

Dali's dream of a virgin
  » Mar 7, 09:24 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

Dali's dream of a virgin

Salvador Dali. Dali’s dream of a virgin.

No comments are needed.

  » Life, Ideas @ Mar 7, 09:24 PM

  Comment? [12]

Free Quality Font - NeueSans
  » Mar 4, 03:09 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

Belgian type foundry OurType presents a free quality font NeueSans, available for download as the bonus font of the month.

Neue Sans

From the license:

The free fonts may only be used on 1 computer. They may NOT be distributed on other websites, CD, DVD or other electronic media. The free fonts cannot be sold to other parties. All free fonts are subject to the normal license conditions.

Update: Ourtype has contacted me recently:

We would like to make clear that OurType bonus font/s are not free fonts. They are part of our regular collection and are subject to normal license. We would appreciate it if you would specify this clearly in your comments above. That is important to us, and to the font users, especially because those very fonts are available for download free of charge just for a limited period of time, for promotional reasons. Neue Sans family, for example, is to be released this month.
With thanks, Corina Cotorobai, OurType.

Thanks for information, Corina!

To download NeueSans, click on the “Download bonus font of the month” star, which appears after the page is loaded. Found via http://blog.ulfgermann.de. Thanks, Ulf!

Any further suggestions on free quality fonts? Comment on this post!

  » Web-development, @ Mar 4, 03:09 PM

  Comment? [2]

A Study of Website Navigation Methods
  » Mar 3, 09:31 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

In the beginning of 2005 Fidelity Investments, a web-design-agency based in Boston, has conducted a study of Website Navigation Methods. Aiming to find an effective approach to finding an optimal design solution, company has used an online study to evaluate six different navigation methods for the same website and chose one based on the results.

After evaluating the pros and cons, we decided to choose the Drop-down menus as our navigation method. A subsequent lab-based usability test of the complete prototype using the drop-down menus showed that users were able to use it to navigate the site very effectively. For more information about that usability test, and the entire context of the redesign, see the related paper at UPA 2005 on "Extreme Makeover: UI Edition" (PDF). This process shows the impact of gathering usability data to support your user interface design choices.

Found at The WebDesign Blog

Do you have any suggestions on other researches on Website Navigations Methods? What do you think? What kind of navigation do you prefer?

  » Web-development, @ Mar 3, 09:31 PM

  Comment?

Dealing with Plagiarism Issues
  » Feb 11, 12:59 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

It’s funny if you think about it. I’ve been working on The Web Developer’s Handbook for a year now, gathering links to interesting articles on CSS techniques, typography, web design etc. A lot of time was spent on categorizing them, selecting them and presenting them. According to Populicio.us, alvit.de/handbook has become one of the most bookmarked web pages since the beginning of social bookmarking (No, I can’t compete with Slashdot, really). Every day I receive dozens of e-mails from web developers who support me and my project, suggest links and ideas for the handbook, creative web-developers inform me about the techniques they developed; besides I really appreciate concrete criticism coming from the visitors of the page.

And then this page occurs, offering “full index of every (web)design-related links”, just copying my work without giving credit to the author of the project.

I’ve already written an e-mail at fporumb@hotmail.com, however, nobody has responded and the page exists as if it always were there.

Do you have any idea what I could do in this situation? Have you ever been ripped? What would you do?

PS: Thanks to everybody letting me know about the page.

  » Blog, Web-development @ Feb 11, 12:59 PM

  Comment? [6]

Imagining Google's Future
  » Feb 2, 11:25 AM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

Have you ever thought about the future of the Internet? You did, right? Semantic Web, Web 2.0, whatever, what will it look like in the next decade? What willl it be capable of? Which social and programming patterns will it change? CNN Money has published an insightful article called “Imaging the Google Future”, in which several scenarios of the Google’s development in the future are described.

From the article:

Name any long-term technology bet you can think of—genome-tailored drugs, artificial intelligence, the space elevator—and chances are, there’s a team in the Googleplex working on an application.

Which raises the most widely debated question in business: What kind of company will Google become in the coming decades? Will it succumb to hubris and flame out like so many of its predecessors? Or will it grow into an omnipresent, omnipotent force—not just on Wall Street or the Web, but in society? We put the question to scientists, consultants, former Google employees, and tech visionaries like Ray Kurzweil and Stephen Wolfram. They responded with well-argued, richly detailed, and sometimes scary visions of a Google future. On the following pages, we’ve compiled four very different scenarios for the company. Each details an extreme, but plausible, outcome. In three of them, Google attains monopolistic power, lording over the media, the Internet, and scientific development itself. In the fourth, Google withers and dies. That may seem unthinkable now, but nobody is immune to arrogant missteps. Not even today’s smartest business minds.

Read more: “Imaging the Google Future”

What do you think? How will Google look in 20 years?

  » Web-Resources, Thoughts @ Feb 2, 11:25 AM

  Comment?

Interface Design Contest: $1,500 To Make Good Look Better
  » Jan 29, 10:22 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

Luigi Canalli De Rossi, also known as Robin Good, has launched a web design contest open to anyone capable of designing with valid XHTML+CSS. The mission is to propose an innovative new look for Luigi’s site, the winner is getting $ 1,500 in cash and a design contract for a period of at least 6-months to work on MasterNewMedia.org and on other new Robin Good’s web-based projects.

Are you interested? You know what to do.

  » Web-development, @ Jan 29, 10:22 PM

  Comment? [1]

The Beauty of Typography: Delicious and Fontin
  » Jan 23, 10:29 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

I am literally speechless. Browsing through my logs and exploring the links leading to "25 Best License-Free Quality Fonts", I accidentally discovered a post in a Dutch blog linking to two pure masterpieces of typography - two typofaces, presented by a talented Dutch designer Jos Buivenga. Delicious and Fontin - two unique, delightful, delicious, license-free beauties, which definitely will make a lasting positive impression on the visitors of your web-projects.

Delicious: Description (contact the author to download the font) Delicious Delicious

Fontin: Description (contact the author to download the font) Fontin Fontin

Both fonts are freeware. Jos Buivenga is sending his fonts via e-mail-requests. So make sure you are the first asking Jos for his delicious fonts. However, there is a small, tiny and extremely unpleasant "but" for me. Both fonts are Mac-fonts only; so if you aren't a Mac-user, you shouldn't visit Jos' page at the first place. For once you took a look at it, you will never excuse yourself for not having a Mac.

By the way, any ideas how one could use the fonts on a not-Mac-PC? Comment on this article!

  » Web-development, Blog @ Jan 23, 10:29 PM

  Comment? [6]

The State Of The Web: CSS Galleries and Showcases '2006
  » Jan 12, 02:42 PM

Add to Blinklist! Add to Delicious! Add to Digg! Add to Fark! Add to Furl! Add to Kinja! Add to Ma.gnolia! Add to Reddit! Save to Newsvine! Add to Shadows! Add to Spurl! Add to Wink! Add to Wists!

During the past few months various CSS galleries and showcases have been popping up like mushrooms after a spring rain - almost every month a "newcomer" was promising more quality content, more updates, just more everything. And even although one could wonder whether the growing amount of css-showcases actually improves the quality of web design, sometimes CSS galleries can serve as a great source for inspiration, creativity and new ideas. Indeed, they present the most beautiful examples of CSS-based web design and they have to be good, so they get regular visitors. There is no need to overestimate them, however, one shouldn't underestimate their ability to inspire, too.

This article is the first part of the series of articles titled "The State of The Web". Every month one specific branch of web-development will be reviewed, web-designers interviewed and web-resources presented, exhibiting the state of the web from my personal perspective. What are you interested in? What topic should be next? Comment on this article!

As I was thinking about writing this article, I have considered reviewing every single gallery; however, googling "CSS Showcases", I have stumbled over the great series of articles about the history of CSS galleries, written by Simon Collison. Simon takes a closer look at the CSS showcases, describing every single gallery and presenting his personal opinion on the advantages and disadvantages of the sites. I know I won't do it better than Simon did, so I don't need to try, right?

Allright, then. Here is my houmble attempt to review the current state of the most popular css galleries and showcases in the Web. Maybe you have know any showcases I am not aware about? Don't hesistate to comment! It will help me, and it will help thousands of users who visit The Web Developer's Handbook developing web-sites.

Feel free to link to this page, but please don't copy the image. Please respect me and my work.

Updated: two more galleries were added.

  » Web-development, Web-Resources @ Jan 12, 02:42 PM

  Comment? [13]