Showing posts with label WWW. Show all posts
Showing posts with label WWW. Show all posts

Sunday, January 17, 2010

Formatted Code - Internet Explorer's Copy Issue

Not a new thing but just for the record: copying formatted text from a web-page in Internet Explorer to plane editors as Notepad or Notepad++ leads to a problem - all line breaks and/or indentations are lost in spite of preserving them with <pre> </pre> tags.

A way around is to paste it into WordPad first and then copy from WordPad to any other editor you want. There is no such a trouble when FireFox is used either in Windows or Linux.
Read more...

Saturday, January 16, 2010

Source Code Syntax Highlighting for Web Pages

Highlighting code syntax has become a common way to improve the code readability and is used broadly in different programming language editors. There are some approaches how to show highlighted code in a web page.

I would divide all of them into the three categories:
  1. If the web-site is on ASP (Active Server Pages) or PHP (Personal Home Page) host and all the files and the web page generating code are under your control then highlighting can be handled by a PHP or ASP routine. In PHP, for example, there are GeSHi (Generic Syntax Highlighter) and CHIP (Code Highlighting in PHP); Actipro CodeHighlighter is ASP.NET Control.

  2. If there is no total control over the web-site as it is, for instance, with Blogger then JavaScript highlighter can be a solution. There are many JavaScript highlighters available, here are some popular ones:
    They all support pretty long list of languages, easy to install and customize.
    In general scripts should be kept either on a host or directly in the page and the drawback with the approach is that too many scripts can degrade a web-page performance.

  3. The straight forward way is to use a highlighting tool which generates HTML code, so the code can be copied and pasted directly in a web-page. There are some online tools of this kind, for example:

    Another possibility is to use offline converters:
    • Notepad++ and SciTE are editors both based on SCIntilla, highlight syntax of many languages and have an option to export the highlighted code as HTML.

    • Pygments is a generic syntax highlighter and it can be used by many different ways including as a standing along converter.

    The direct HTML highlighting approach, for example, seems to be the best suitable for this blog since not so many posts are going to have any code to highlight. Here is a small Python example:
    import Tkinter as tk

    def keycodess(event):
    if event.keysym == 'Escape':
    root.destroy()
    x = event.char
    if x == "a":
    print "A done"
    elif x == "b":
    print "B done"
    elif x == "c":
    print "C done"
    elif x == "d":
    print "D done"
    else:
    print x

    root = tk.Tk()
    print "a. Menu choice A"
    print "b. Menu choice B"
    print "c. Menu choice C"
    print "d. Menu choice D"
    root.bind_all('', keycodess)
    # hiding the tk window
    root.withdraw()
    root.mainloop()

Keep in mind that copying formatted code from Internet Explorer can be an issue - Formatted Code - Internet Explorer's Copy Issue.
Read more...

Sunday, December 27, 2009

Web-Site Statistics - Free Stand-Alone Services

As web-design gurus suggest: keeping an eye on what is going on at your web-site is the must. What information is of the most interest, what part of the world your visitors come from, how long they stay on a particular page, etc. I've had some of such web analysis services in use for a few months and would like to make a note on that.

The main idea behind stand-alone analysis service is pretty simple - when a visitor opens a page the visitor's internet browser receives all text and images from the page and executes scripts. Some of the received information can be linked to an analytical site which provides the requested information and at the same time analyzes and stores the visit related info.

I've been testing the following three services which are offered for free of charge:

  1. Google Analytics - is extremely informative, it allows to look at your web-site statistics from different point of view: visitors benchmarking, new ones vs. returning, world wide location, browsers been used and more; traffic sources as direct, referred from other sites, search engines; content analysis, top visiting pages, top landing and exit pages, etc.. If you really want to know how to improve your site Google Analytics is very helpful. Google Analytics functionality is based on java-script which should be pasted into web-site pages. More detailed information can be found at http://www.google.com/analytics/. Briefly what should be done to use it in Blogger is: to register with Google Analytics, create a new profile for your site, get the code and put the code in the blogger layout template above the </body> tag.

  2. StatCounter - collects a lot of useful information about visits and represents it in very convenient way: popular pages, entry and exit pages, keyword analysis, visit length, new and returning visits, map, browsers and so on and so forth. Similarly to Google Analytics StatCounter is based on java-script code. To make it working with Blogger just put the code right before the </body> tag.

  3. ClustrMaps - is another service which collects only the info about global visitors position and provides a nice world map picture with visitor locations marked.The same picture also serves as a link to ClustrMaps site and allows them to collect visitor's info. Since it is just a picture it can be placed anywhere you like in a web-page - I put it in the Header block.

    Along with the free version of the service ClustrMaps has two more advanced ones with a richer choice of map styles, higher visit rates and better archiving options.
Read more...

Saturday, November 7, 2009

Zimbra - Perfect E-Mail Client for Perfect People

It is common to use a separate e-mail account for each separate activity: work, home, hobby, web subscriptions, etc.. So happened that some of accounts I have at Yahoo and others at Google.  Neither Yahoo nor Google allows simultaneous access to multiple accounts. So I've been thinking for a long time how convenient it would be to have alive connections to all my web e-mail accounts from one place at the same time. Another problem with Yahoo - no support for IMAP (they offer POP3 for $ Mail Plus, but I don't even want POP3). Now solution for both the issues is available - it is Zimbra Desktop.

An attempt to install zdesktop_1_0_3_build_1691_win32.exe failed with a strange error, so I installed previous zdesktop_1_0_build_1537_win32.exe then allowed it upgrading to version 1.0 build 1593 - flawless.

I registered all my Yahoo and Google accounts in Zimbra Desktop and tested them - result is remarkable:
  • All accounts are in simultaneous access as expected.
  • Working from Zimbra Desktop is the same as if it would be from the web-account - all changes applied in the Desktop are properly reflected on the web-account and vice-versa.
  • Somehow Zimbra has true IMAP access to Yahoo free accounts - it's probably become possible because Zimbra is actually Yahoo Zimbra.
  • Zimbra enables IMAP access to Google e-mail accounts and it works fine too.
  • Zimbra provides an access not only to inbox but to all existing folders in the account.
  •  It can work with many other types of accounts as Hotmail, AOL, POP3, IMAP, etc.:

  • Zimbra has many other features which I don't need yet but I'm considering them interesting for the future.
  • Available for Linux and Windows.
I tested it on Yahoo and Google accounts - Zimbra gives a transparent control over e-mails as if you would be really logged in the web-account. Amazing!



The only inconvenience I faced with Zimbra Desktop is that it relies on computer account security, but the issue is related not to the program itself but to a user perfection and I am apparently not such one. So if you have not established a separate password protected account for every member of your crew, your parrot and your wooden leg, then Zimbra Desktop can be started by someone with access to the computer and all your e-mail accounts will be exposed whether you like it or not. I personally didn't want to change the sin way what got settled on my desktop PC - that's why I simply installed Zimbra on a virtual machine with all passwords and I run it only for myself.

Potentially, in order to satisfy imperfect people as myself, the issue could be easily fixed by adding a "user logon to Zimbra" with loading a corresponding account profile... but probably that would be too much to expect from Zimbra developers: Zimbra Desktop is already a great useful program.

It should be said that Desktop is just one application among many what Zimbra offers. The main product is Zimbra Collaboration Suit. It comes with different flavors and prices from the free Open Source Edition to the Professional Edition - check out their web-site for details.
Read more...

Sunday, October 25, 2009

Free Web Storage for Files

Sometimes it's necessary to add a download link to a file related to a post or embed a doc in. The simplest way would be to store files in a place like web-site directory which usually comes with Internet connection from ISPs (Internet Service Provider), but my ISP gives out only 10 MB for that purpose what is not too much. I checked out some of web file storage hosts and found that most of them have serious limitations.

My wish list of features would be the following:

  • Personal account on the host to have control over files;
  • "No delete" after certain period, my files should be stored forever unless I delete them myself;
  • Storage capacity should be more than 1 GB;
  • Public sharing should be available - many hosts limit their file storage to personal use only;
  • Files should be accessible via direct link - that would give a possibility to embed the files into a web page;
  • All those for free of charge would be nice too.
It is not easy to find a web-hosting which would meet all of the wishes, but there are some pretty close I've managed to find:

  1. ADrive - with the free basic subscription stored files are kept forever but public sharing (links to the files) expires in one month. This limitation was not very clear from their description of service, only when I made a file shared it showed such a notification. Also a share link from public domain leads to a page with "Download" button but not to the file itself, so embedding is not possible.

  2. MediaFire is pretty similar to ADrive besides there is no limitation in time for sharing link. A sharing link leads to a "Download" page - same as ADrive, their "Download" page shots out a pop-up every time you're there.

  3. FileFront is another one of the same kind, but its target group is gaming audience.
Those sites represent the same approach for free file storage. As declared these services really work for those who wants just to transfer files to others or to store personal files, but unfortunately it is not possible to get direct link to stored files.

  1. HotlinkFiles was recommended by some people and as the site name suggests it supports direct links. The site has been giving out "too many connections" error for pretty long time, now its response is more informative: they claim been "under attack from malicious hackers that have managed to destroy a large portion of user database". That sounds sad and reveals the danger of storing your info in one place - let's wish them good luck to recover quickly from the disaster.

  2. It seems that a real solution for file-hosting comes from web-hosting services, so I ended up with Google Sites. It's appeared to be a well working variant and I don't see any drawbacks so far. 10 GB of storage per account, direct sharing links, etc. - you can check the list of features.
    To get direct link to a file just copy the address from Properties of the Download link from the Google site page, then paste it into a web browser address field and press Enter - it will show the file and its address will change, this changed address I use as a direct link to the file. As an example below is an embedded PDF - a copy of the Google Sites Overview page:


As a quick update I'd like to add some more sites (I have not tested them yet, I hope I'll do it in the next round of search for file hosting services):
  1. Thanks to the visitor suggested SigMirror.com - with free account you can get there 2.5GB of storage space with 7GB bandwidth.

  2. MyDataNest seems to be an interesting file hosting site. Basic free account gets 2GB of storage and 20 GB of monthly transfer.
I'll keep updating the post with fresh info - it would be interesting to hear suggestions regarding the topic - please, share your experience.
Read more...

Saturday, September 12, 2009

Add Atom and RSS Feeds to Blogger Template

Atom and RSS are two similar methods of web content syndication. The idea of feeds is not to check all web sites of interest one by one, but automatically collect updates from them with one tool called "feed reader" or "aggregator", so feeds can be considered as an advanced alternative to bookmarks. Subscribing to feeds really helps to save time and stay informed. Blogger supports both Atom and RSS feeds.

The truth is that nowadays web browsers can work directly with feeds, so a special program is not really needed. For example, Firefox shows available feeds as an icon in the end of the address field:and Internet Explorer - in the Command Bar: Click the icon to open available feeds from the web page, choose the one you prefer and that will take you to a subscription page. Firefox can save a feed as a "live" bookmark which references not just a website at whole but each article individually from it. IE puts it under tab "Feeds" in the "Favorites" window.

While it is possible to subscribe to the feeds directly from a web browser it is still can be good for the sake of convenience to add them to a web page. Blogger has some variants of the feeds - Blogger Help describes them in the "Blogger Feed URLs" article.

For instance, I decided to put Atom and RSS full site feeds in the right top column along with the "Bookmark and Share" button. In Blogger layout all the three buttons are sitting inside one HTML/Javascript gadget - you can check the source of the page to see how it looks like as code.

For more information a great description of Atom and RSS can be found in Wikipedia.
Read more...

Sunday, August 9, 2009

Blogger Template with Rounded Corners and Adjustable Column Width

While I liked the general style of the "Rounders 3" Blogger template, I really wanted some things to be modified:


  1. to add the third vertical column to the left of the main post section;
  2. the third column should be consolidated with the main post section in one visual block;
  3. I'd like to keep rounded corners.
All those are definitely feasible, but adjusting column width in the original "Rounders 3" could become some headache.

In the "Rounders 3" rounded corners are defined with background pictures in two wrappers: one for two top corners and the other for two bottom ones.
In this case every adjustment in width of a column would require redrawing of the corner picture to follow the change.

A simple solution to make width easily adjustable would be to employ a 4-wrap structure each wrap with one of the corners.
For that 4 corner pictures need to be at a reachable web hosting.
I uploaded them to Picasaweb - anyway it is the default Blogger's storage for images.

Since I planned to use the corners for all of the blocks in the blog page the template styles should be updated with new classes of <div>

/* Round corners div wrappers --------------- */
div.wrap-1 {
float:$startSide;
background-image: url("http://lh5.ggpht.com/
_6uhqGhAnYS8/SoDG27WBpuI/AAAAAAAAAR8/
7W7XN9gbIKY/s800/RCorner_TopLeft.png");
background-repeat: no-repeat;
background-position: $startSide top;
padding:0;
}

div.wrap-2 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKOuKcJ3I/AAAAAAAAASI/
FO8GZlpdnGU/s800/RCorner_TopRight.png")
no-repeat $endSide top;
padding:8px 0 0;
}

div.wrap-3 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKXk4wLwI/AAAAAAAAASM/
vZCNY04HzOs/s800/RCorner_BottomLeft.png")
no-repeat $startSide bottom;
}

div.wrap-4 {
float:$startSide;
width:100%;
background:transparent url("http://lh6.ggpht.com/
_6uhqGhAnYS8/SoDKowtWYZI/AAAAAAAAASQ/
j8KRoSoiN9c/s800/RCorner_BottomRight.png")
no-repeat $endSide bottom;
}
/* Round corners div wrappers END ----------- */

HTML wrapping structure looks like this:

<div class='wrap-1' id='header-wrapper'>
<div class='wrap-2'>
<div class='wrap-3'>
<div class='wrap-4'>
<b:section class='header' id='header' maxwidgets='1'>
.......
</b:section>
</div>
</div>
</div>
</div>

Adding "width" attribute to the <b:skin> (CSS) section:

#header-wrapper {
width:$BlogWidth;
background-color:$titleBgColor;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding:0 0 0 0;
color:$titleTextColor;
}

and the corresponding variable at the top of the <b:skin> section:

<Variable name="BlogWidth" description="Total Blog Width"
type="automatic" default="920px" value="920px">

makes adjustment of the section width a snap.

It should be said that many people are interested in rounded corners techniques for web design. While my current goal was only to make width of a rounded corner block easily adjustable from a variable but my choice of rounded corners implementation was straight forward - there are many very interesting approaches allowing to create rounded corners with fancy graphic effects as 3D profiles, gradients, reflections, shadows, etc. Recently I bumped on an interesting post with a list of different techniques: "25 Rounded Corners Techniques with CSS" - check it out.
Read more...

Wednesday, July 15, 2009

Adding Favicon to Blogger Template

Favicon or Shortcut Icon is a small picture which appears in web-browser address field, tab and bookmark of the corresponding web site. Blogger has a default icon assigned, but it seems pretty nice to add an original favicon to your blog: it would give a distinctive, easier to remember view to the bookmark and to the web page itself. Adding a favicon is not difficult at all, but the solutions I found on the Web were not quite correct, at least they did not work for my Blogger and web-site.

Considering that a desired image have already been prepared the following issues should be resolved:
  1. A proper internet storage for ico file should be found. While some web browsers are flexible to work with different picture standards (jpeg, png, gif) as a favicon the main limitation comes from IE which can work with ICO images only. On the other hand not many sites including Blogger itself accept ICO files for uploading. I chose 1 Pixel Host - so far it seems working fine. Convert your image into ICO format of 16x16 or/and 32x32 pixels and upload to the host. Have to say: while favicon file probably should stay with the *.ico extension unchanged, it may have any name, not only "favicon.ico". 1 Pixel Host replaces the original file name with a random mess. For instance, mine got the name "yjtxmkry15su2xsg8em.ico", so copy Direct Link carefully.

  2. Reference to the ico file should be added to the blog template. There are direct instructions from Mictosoft how to do it in "How to Add a Shortcut Icon to a Web Page" , but it does not work by some reason neither for my Blogger nor for my home page at ISP (Internet Service Provider). Somehow the problem was resolved by changing position of the "Shortcut Icon" line. Microsoft suggests it like this:

    <head>
    <link rel="SHORTCUT ICON"
    href="http://www.mydomain.com/myicon.ico">
    <title>My Title</title>
    </head>
    To make it work I had to put the "Shortcut Icon" line below the "title" line:

    <head>
    <title>My Title</title>
    <link rel="SHORTCUT ICON"
    href="http://www.mydomain.com/myicon.ico">
    </head>
    Replace the "href" value with the Direct Link to your ICO file, add the line to your Blogger template, save - and that's it. From now the favicon should appear at every page of your blog.
Adding a favicon to a web-page is similar besides that you don't need to find external file storage - upload the picture to the web-site hosting directory and put a proper direct link to it in the web-pages.

If you have any questions regarding favicon you can check out source code of any website which has favicon including mine.
Read more...

Saturday, July 11, 2009

Free Web storage for images - Curb your ICO!

Nowadays there are many free web hosts of different styles for image storage. For now I needed the one which accepts ICO files for favicon, but also had checked out some other popular sites I'd like to make a note for the future.
  1. Picasa from Google - provides 1 GB of free storage (have to upgrade and pay to remove the limitation). One good news is that if you are using Blogger you are already using Picasa. All the blog pictures you upload are stored in Picasa and you can see and control them after signing in Webpicasa with Google account login and password. Another good news - it is not necessary to install Picasa on a home computer (at present I don't want anything else but a web-browser). Still there are some complications like, for example, URL assigned for a picture in Blogger is different from Picasa direct link for the same picture - but none of those I find problematic besides that Picasa does not accept ICOs. Some more about Picasa storage for Blogger images is here.

  2. ImageShack - seems to have no limits for free storage; accepts JPG, JPEG, BMP, GIF, PNG, TIF, TIFF, PDF, but ICO files are not accepted.

  3. Photobucket is a very popular site; main disadvantages for me are that it does not accept ICO files and user name appears in direct link to a file (I have a feeling that is not very necessary information to be exposed in reference to a picture).

  4. Tinypic renames files, accepts JPG, BMP, GIF, PCX, PNG, PSD, TIF, no ICO.

  5. 1PixelHost has a very simple interface, accepts ICO files among others (JPEG, JPG, GIF, PNG, ICO, BMP). It renames file name to a random mix of letters and numbers. Registration is required for uploading files as large as 15MB and unlimited bandwidth. This site was my choice for ICO file storage, so far it works quite well. It's a pity the site disappeared and it does not look as a temporary problem. Nevertheless I'll keep an eye on the site for a while.

  6. Google Sites can be used for files storage as it described in the post "Free Web Storage for Files". To get direct link to a file just copy the address from Properties of the Download link from the Google site page, then paste it into a web browser address field and press Enter - it will show the file and its address will change, this changed address I use as a direct link to the file. Due to the problem with the site of my previous choice I moved the favicon.ico to Google Sites.
I'm pretty new to this kind of issues and it's just the first impression of the free image storage I found available on the Web, so something definitely could be missed - I'll be updating the post while I'll be facing and solving other similar problems.
Read more...