Fili's tech

Top Web Developer Mozilla Firefox Add-On Tools

Fili — Thu, 27 Nov 2008 21:17:25 +0000

Responding to repeating questions from clients and colleagues about recommended Firefox plugins for Web Development and basic SEO/SEM, following are the Firefox Addons I can’t do without :

ColorZilla web developer addon

It assists web developers and graphic designers with color related tasks.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

FireBug web developer addon

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Webdeveloper web developer addon

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools.

MeasureIt web developer addon

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

ScreenGrab web developer addon

An extension for Firefox that makes it easy to save a web-page as an image. With it, you can save anything that you can see in a browser window - from a small selection, to a complete page.

Live HTTP Headers web developer addon

View HTTP headers of a page and while browsing.

ShowIP browsing addon

A Mozilla Firefox extension which shows the IP Address of the current page in the browser’s status bar and allows queries to different databases about it when you right click on it. The IP is colored red for an IPv4 address and green for an IPv6 address (hence the name). Since v0.7.8 these colors can be changed in the preferences menu. With a left click one can get information about the hostname of the current page.

IETab browsing addon

Embeds Internet Explorer in a Mozilla/Firefox tab.

YSlow web developer addon

YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites.

SearchStatus SEO addon

A toolbar extension for Firefox and Mozilla that allows you to see how any and every website in the world is performing. Designed for the highly specialised needs of search engine marketers, this toolbar provides extensive search-related information about a site, all conveniently displayed in one discreet and compact toolbar.

SeoQuake SEO/SEM addon

A Mozilla Firefox extension aimed primarily at helping web masters who deal with search engine optimization and internet promotion of web sites. Seoquake allows to obtain and investigate many important SEO parameters of the internet project under study on the fly, save them for future work, compare them with the results, obtained for other, competitive, projects.

Google Global SEO/SEM addon

Google Global allows users to see organic and paid Google search results as they appear in different countries, cities, regions, ZIP codes and IP addresses.

Some of those are quite basic and popular, yet some I’ve rarely seen others use. If you’ve got any other web developing or SEO/SEM Firefox Addon favorites, I’m interested.

Copyright © 2008 Fili's tech. This Feed is for personal non-commercial use only. If you are NOT reading this material in your news aggregator or a feeds-site pointing to http://www.filination.com/tech/, then the site you are looking at is guilty of copyright infringement. Please contact fili@filination.com so we can take legal action.

Custom Google Search Provider with an Open-Search Auto Discovery for a Wordpress Site

Fili — Sun, 28 Sep 2008 02:07:20 +0000

Since I spent the last half an hour doing this for one of the student Wordpress websites (NCKU IIMBA Student Council), might as well explain how it’s been done. Shouldn’t take anyone more than 20 minutes.

First, you’ll need to make a Google Custom Search. I’ve made one for the students, and you can take a quick look at the NCKU IIMBA student search and what a general results page would look like. It shows you all results but emphasizes a few websites that are important for students studying in NCKU-Tainan. A few possible search refinements were added (“Tainan”, “NCKU”, “Taiwan”, “IIMBA”).

Next step it to integrate the Google Custom Search to the Wordpress blog. There are endless guides out there that explain it. Phutse does a good job with “How to incorporate Google Custom Search engine with Adsense into your WordPress blog" as does DoshDosh with “How to Set up Google Custom Search for Your Website and Make Money“. I’ve also added a Text widget on the side with the Custom search Javascript code. Width can be adjusted by playing with the Google Java code provided.

The next step was to make an auto-discovery OpenSearch XML file, so that the students can add this search to the browsers (Internet Explorer 7 and above, Firefox 2 and above). Haacked does a good job explaining that one with “Integrate Your Custom Search Engine With The Browser”.

My XML file ended up looking like this :

    xmlns="http://a9.com/-/spec/opensearch/1.1/">
NCKU IIMBA Search
NCKU IIMBA INCKU students student

    NCKU IIMBA search

    template="http://iim.incku.com/search_result?cx=009510974112669170466%3Aoev8ebat7gw&cof=FORID%3A11&ie=UTF-8&q={searchTerms}&sa=Search&" />

and that’s it, we’re done.

Pidgin (GTK) and Unicode Asian/Hebrew character font display issue

Fili — Sat, 20 Sep 2008 11:29:16 +0000

Pidgin is the best multi protocol instant messaging software out there. There’s really no reason to use all the other messaging programs separately, unless you’re in need of the more advanced features.

It’s not perfect, though, and there are a few annoyances that keep it from being the ultimate solution. One of the more annoying things has to do with displaying Chinese and Hebrew characters, or any characters for that matter that aren’t English. The default installation would show them as question marks (“???”). Since I’m an Israeli currently living in Taiwan, I face this issue whenever I help another person migrate.

Anyways, the description of the problem is as follows (through ticket #604) :

Under the normal Windows binary of Pidgin, Asian characters are not displayed on the buddy list. When hovering over a screen name however, the contact window that pops up shows the characters just fine. This happens on Windows XP and Vista.

and so the solution is…

you can work around it by changing the default GTK theme. This can be done by running "C:\Program Files\Common Files\GTK\2.0\bin\gtkthemeselector.exe" and setting the default theme to something else like "Clearlooks".

So, this applies to all GTK based applications. They should really make a different default GTK theme.

But, that’s not the end of things, blog.portblue.de has more :

Assuming you have Pidgin installed, the first thing you’re going to notice will be the relatively small font which is used by default. The problem here is that you can increase the font size (Tools -> Conversation -> Font), but there is one thing Pidgin has in common with Trillian: they don’t support dynamic font switching — i.e. provided you use a font that is designed for Latin text only and you receive a message in Chinese, your chat app automatically switches to a font that can display Chinese characters. Unlike the original MSN messenger, for example, Pidgin and Trillian don’t do that. So what you will have to do is, chose a text font that can display Latin text and characters in the language you need. Recommendations are: "Sim Sun" for Simplified Chinese, "MingLiU" for Traditional Chinese, "Mincho" for Japanese, "Batang" or "Guilim" for Korean. […]

Update: The unicode issue persists if the other side is using a non-unicode font. To get Pidgin to ignore font formats, open your Buddy List window and go to Tools –> Preferences –> Conversations and uncheck "Show formatting on incoming messages".

Search Engine Optimization for a Flash+HTML site

Fili — Sun, 14 Sep 2008 00:15:29 +0000

Every once in a while I get emails like this next one :

I was talking with [someone] who giving me your email for try to tweak my website www.galeriadelarte.org in google engine at this time no match, seams google robot can’t get anything from my site, is programming in PHP and Flash.

To which I usually reply with an almost ready made template with the same kind of advise.

Although Google’s claiming to get better at understanding Flash, working together with Adobe, I generally advise against massive use of Flash, especially in the case where it’s used as the only form of in-site navigation. Still, following are a few things you can do for a Flash-HTML combined website :

Create a sitemap for your site http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=34654. Submit your Sitemap at :
- Yahoo Site Explorer
- Google webmaster tools
  - Turn on Tools->Enhanced Image Search.
  - Set preferred domain to “www.”
Search Engines have some real difficulties with Flash. It’s very not SEO-friendly. Get links that will point to your php generated pages rather than your main flash website. Get as many links as you can, submit it to a lot of free web directories. Ask your friends to links to you with meaningful titles and anchor text. This is one of the most important factors. In the it’s the title tag. If you’re involved in forums, add the link to your site with your keywords in your signatures.

Make navigation in your website easy with interlinking between pages. When you don’t have others linking to you, this will count. When you link, link with good keywords.

And the tips for the in-site HTML files are the same just about anywhere :

To get higher on search engine page rankings (SERPS) you should :

Make sure your page title is meaningful ()

Make sure you have H1, H2, H3 headings in your pages (

)

Optimize your images with keywords

Name of file.
The ALT / TITLE tags in the images.

Try to use pathnames that would serve as meaningful permalinks.

Add metatags

Use social websites to point to you. For example – to simplify submitting to social websites, use Social Poster (The “Dofollow for SEO” is the more relevant).
- Choose the right keywords in the title of your submission.
- Add relevant tags, try to make it appealing.
Redirect to WWW : Do this next one only if you understand what you’re doing.

Webmarketing, SEO & SEM discussed at MIT forum Israel

Fili — Tue, 29 Jul 2008 07:40:56 +0000

On my short visit to Israel I’ve been invited to join the July MIT forum at Tel Aviv University titled “Web Marketing: Converting Traffic to Sales” discussing the subjects of online marketing, search engine & social media marketing as well as aspects of search engine optimization.

If there’s one thing that’s clear is that companies, marketers and IT professionals, now more than ever, are looking to better understand what this whole thing is about.

Let me summarized the web marketing presentations for you :

There is no one formula for success - “It depends” or “There are no tips”. Web marketers would like to put it that way – web marketing is a difficult ongoing never-ending struggle to try and understand how users behave and as a result - adjust to audience behavior to get “conversions”. Which leads to the second main point …
Webmarketing is all about experimenting. A/B testing, ad adjustment, landing page adjustment, experiment with just about everything.

I’m not sure I agree. Although what they claim is essentially true and is what web power technology is all about – the ability to get instant feedback on what you’re doing immediately – people want something more about web marketers’ experience and talent. For someone to hire professional help or attend a conference and get “we don’t have answers” and “we’ll see, let’s play around a bit” is confusing and frustrating. It’s a problem with all areas of marketing but when it comes to online businesses, this becomes an ever worse phenomenon. The audience in the crowd almost refused to accept it. “Give us some bottom line tips” they demanded, but the presenters wouldn’t go along. Which brings up the question of what a good web marketer does. Is s/he good because they know how to set up effective A/B testing? because they have more experience with knowing that they don’t know and would like to know more?

In recent years my main interest and the focus of my PhD studies has been international cross-cultural differences in organizational and consumer behavior…

Tlalit did a good job of scaring the audience with the notion that cross cultural differences are almost impossible to predict and even more difficult to understand. What might work for one English speaking country will not work for the other. Our globalized world has never been more local, it seems, especially when it comes to the web. I’m mainly involved with the Taiwanese and Chinese webosphere, as opposed to the one I’m personally and professionally related to in Israel and the States and the differences between all of those are remarkable. I could layout some of the basic differences in perception between the different countries that go deep within through values, traits, norms and social behavior, but for now I suggest the example I gave with “Blogging Ethics - Anonymity Freedom of Speech vs. the Dark Side” to get a sense of the differences. The HSBC campaign for understanding culture differences is another funny look at the subject.

Then came SEO and the audience wanted answers. Branko of the Israeli SEO Scientist outlined out some of the principles for SEO and the audience couldn’t get enough. Listening to the people sitting around me, it seemed like they perceive SEO as the black art of online witchcraft, where a selected few know the secrets of the all-capable almighty Google. It really isn’t so.

SEO is not that complicated and it’s something that everyone can do, and fairly easily. You don’t know much about SEO? fine, let others do the job for you, and I don’t mean SEO experts, I mean use open source tools that come with SEO built-in. Unless what you’re looking to do is really revolutionary, there’s no reason not to base an online business or a website on CMSs like Drupal, Joomla and if it’s simple enough – Wordpress. If you use those, even if you don’t do much – you’ll get much better results than with a custom made website. With simple modules and tweaks, you can get the CMS based website to implement all of the common SEO guidelines. Don’t want to listen to long lectures about SEO and pay SEO experts for things you don’t even understand? just insist on building your business with an open-source CMS. Technical onsite SEO has never been so easy as it is today, and don’t let anybody confuse you otherwise.

It was an interesting event, in that it allowed me to see how my clients perceive and understand what it is that I do. Check out the MIT forum website for future events. SMO is always quick to live blog on the MIT forum events in Hebrew. Also, SMX is coming to Israel soon, you might want to check that out if you’re in the area.

Checking Website Browser and Platform Compatibility

Fili — Thu, 24 Jul 2008 07:15:55 +0000

Checking website browser and platform compatibility is key, if you want your site to appeal to the target audiences using them. Since I got a few emails about the topic, both from people asking me what I use and those suggesting their services, following is a list of online and offline tools you can use to check your site

Platform screen-shots and/or ready-made virtual machines

Net-Renderer - Internet Explorer screenshots.
Browsrcamp – Mac screenshots. There’s also a paid virtual machines service with a Demo.
Browsercam – All platforms virtual machines.
CrossBrowserTesting - All platforms, virtual machines, free for 5 minute sessions. Demo.
BrowserPool – All platforms, virtual machines, free test account.
Browsershots – All platforms, screenshots.
IECapture - Internet Explorer screenshots.

Software

Just download everything and run from your local machine (example), maybe through using virtual machines (like VMWare).
Microsoft VNCs.
Multiple IEs – Internet Explorer installations.
IETester - Internet Explorer installations. (through TipTrickMod)
Sizer - Test different resolutions.

I was also made aware of a Smashing Magazine article that has some more details and tools in “Browser Tests, Services and Compatibility Test Suites”. IBM also has a few more in “Cross-browser Web application testing made easy”.

What do you use?

Install, upgrade, test and debug your CMS website locally on a Windows machine

Fili — Fri, 18 Jul 2008 13:39:29 +0000

The other week I was horrified finding out how some of my friends do their CMS testing and debugging (Wordpress, Drupal, Joomla, whatever) – they do it online. To their defense I would say that they backup everything and put the site in maintenance mode, but it’s a real problem that they keep experimenting with their live sites, restoring backups whenever things fail. Nowaways, installing, upgrading, testing and debugging has become so easy, especially for the non-advance user who’s using a shared/VPS hosting with a pretty simple non-customized Wordpress or Drupal installation.

There is no reason what so ever to install, upgrade, test and debug things on a live server. It’s slow, it causes down time, and it can sometimes drive you insane when you’re trying to figure out what’s wrong or do minor devs and manipulations.

There are many ways to get your local Windows machine ready to install, upgrade, test and debug a CMS, and I will only point out to some of those, which is what I use with some very very easy tutorials that will guide you through it.

Keep in mind one thing - Your PHP, apache and other applications all have log files. If things don’t work, check them out. There are a few other applications you can use to see how things are working on your machine with stuff from Sysinternals like Process Monitor. So…

Get your Wampserver.
Watch the wonderful Lullabot tutorial on how to install it and get it ready (direct video link, direct video download link). It’s about Drupal, which Lullabot does a terrific job in promoting for the general public, but the same would naturally work for Wordpress, Joomla and other common CMS.
Configure your php.ini (please note that you have three – Apache, PHP4, PHP5). You can look at the php settings with the phpinfo() function.
Configure your installation to send emails using fake sendmail for Windows.

Examples for using this for Wordpress? Check out Webtoolscollection or Wordpress@T2 for using XAMPP. Prefer this in Hebrew? Check IT-Bananas or Dakar’s.

Anything else interesting others should know about?

Good luck.

Blogging Ethics - Anonymity Freedom of Speech vs. the Dark Side

Fili — Wed, 11 Jun 2008 14:51:57 +0000

More on ethics, this time a lecture I gave about the dark side of blogging and the issue of how far bloggers freedom of speech and right of anonymity stretches.

Presentation include 3 case studies from 3 different countries : China, Israel and the US, and compares general attitudes and national laws.

Would love to get your opinions on this.

Social Media Optimization and Blogging Ethics

Fili — Mon, 09 Jun 2008 16:19:49 +0000

Today, I gave a presentation on the topic of Social Media Optimization ethics, covering some of the new ethical issues that Social Media professionals are facing. I can say from my personal perspective that these issues are something I’m still struggling with, especially when the pressure from clients and competitors intensifies. The boundaries on the question of what constitutes ethical behavior on the Internet are being constantly challenged and redefined.

Presentation includes a few case studies from Coke-Mentos, Sony with "All I want for Christmas is a PSP" and Walmart with "Walmarting Across America".

Would love to get your opinions on this.

Optimizing a Dream-Weaver photography site : Basic webdesign SEO tips

Fili — Tue, 27 May 2008 00:25:12 +0000

A classmate photographer showed me his new Dream-Weaver based photography website and asked for my opinion. I gave him a few web-design-SEO tips and advice about what I think he should do to make it easier for him to build and scale the site and for the search engines to better understand what his site is about and I attach it here in case it would be any help for others.

First, I strongly recommend photographers that want to get a gallery up and running to run a software that would allow them to do that in an easy scalable way. If you have a choice, I’d recommend skipping Dream-weaver and using one of the many open-source PHP gallery software. The one I like the most and use quite often, integrated with Drupal/Wordpress/Joomla is the excellent Gallery2.

Take a look at the basic site design :

This kind of design is actually quite easy to achieve with Gallery2, and in a more interactive scalable way, but one of the main drawbacks is having to do manual basic SEO work to make the search engines understand what its about.

Following are some general SEO tips suggested for this kind of Dream-weaver website

Optimize your images with keywords
- Name of file.
- The ALT / TITLE tags in the images.
Try to use filenames that would serve as meaningful permalinks.
Add metatags (tutorial1, tutorial2)
Make sure your page title is meaningful ()
Make sure you have H1, H2, H3 headings in your pages (
)
Ask your friends to links to you with meaningful titles and anchor text (less of “Garret” and more of “Taiwan Art” “Asian photography” “culture gallery” and other keywords that you would want to appear on. This is one of the most important factors. In the it’s the title tag. If you’re involved in forums, add the link to your gallery with your keywords in your signatures.

Make navigation in your website easy with interlinking between pages. When you don’t have others linking to you, this will count. When you link, link with good keywords.

Put this script on your website to make the most of Google/Yahoo Image Search traffic.
Create a Sitemap (method 1, method 2)
Submit your Sitemap at :
- Yahoo Site Explorer
- Google webmaster tools
  - Turn on Tools->Enhanced Image Search.
  - Set preferred domain to “www.”
Use social websites to point to you. For example – to simplify submitting to social websites, use Social Poster (The “Dofollow for SEO” is the more relevant).
- Choose the right keywords in the title of your submission.
- Add relevant tags, try to make it appealing.
Redirect to WWW : Do this next one only if you understand what you’re doing.

Easy simple steps that would make a big differences. Any more idea? other suggestions welcome…

Blogging : Live direct communication with your readers - Google Talk and Woopra

Fili — Mon, 28 Apr 2008 14:54:06 +0000

Live communication with your blog readers is something I’ve noticed is beginning to gain popularity across the web. Quite a few of the blogs I visit to leave comments after browsing their RSS are now using this relatively new Google Talk widget which allows your readers to try and communicate with you (add it to your blog here).

The more alarming one is that new service of Woopra that allows the site admin to get the most incredible collection of stats, actually see what’s happening on the blog live and even start a conversation.

The feature itself isn’t new, but how it comes up on the user side is a bit, eh, different from what I’ve seen so far. Here’s an example from one of the sites.

The Webmaster says "hi". That’s just great. The first time a blogger attempted to talk to me this way I was a bit confused. This is a neat little feature if you’re the blogger, but I’m not so sure about the reader side.

In any case, this is an interesting direction for interactivity and communications between bloggers/web-admins and their users. It will take me a while to get used to it, on both sides, but aside from the obvious implications I can already see some great benefits.

Bloggers, Blogs and Blogging : Ethics, Categorization, and Code of Conduct discussed

Fili — Wed, 23 Apr 2008 19:07:14 +0000

Yesterday, I gave a short talk regarding the issue of blogs, bloggers and blogging ethics - should there be a code of ethics, should bloggers regard ethical issues and if so - which ethical considerations should a blogger be concerned about.

Having been involved in the world of blogging for so long, I find the discussion of blogger ethics fascinating, and I do believe it is something that most bloggers confront and think about at some point in their blogging life. I would be trying to gain some more academic insights regarding this topic as part of a more general inspection of ethics in business and IT.

Following are the “Blogging Ethics” presentation slides, I strongly encourage your comments and feedback :

Would love to get your opinions on this.

The open-source Browser Shots : Test your website on all platforms and browsers

Fili — Sat, 05 Apr 2008 02:49:05 +0000

If there’s something I really hate about doing webdesign is having to making sure the design is running the same on all browsers running on all platforms. There are endless little issues that could drive the most patient of people absolutely insane, and the problem is that we usually have no way of knowing what the problem really is.

Browser Shots is a terrific open-source project to help you test your website’s design on all platforms running all browsers (found through AdesBlog). I previously mentioned a way of "Testing your website on Internet Explorer : Making sure you’re okay with IE5-IE6" which will allow you a more dynamic immediate way to browse through your website using old versions of Internet Explorer but Browser Shots can be used to make final design overview and changes on all other platforms.

Very useful, very simple. A wonderful service for web-designers.