Hi Developers!
So this week I would like to introduce google tools for web design.
I will start with the Analytics but before I do that I need to say one important thing: first of all - get yourself a google account if you haven't one already.
Google is the most popular search engine and it plays top role in lives of a web design personel.
Google account is also a requirement for use of google apps for web design.
Now - back to the analytics.
One of apps provided by google is the website statistics and traffic directory called analytics. It's basically a tracker that keeps the record of entries and clicks on our website and provides a descriptive and straightforward data about those. By means of that we can easily find out how our website is performing and for example compare the page clicks with the sales figure to evaluate the effectiveness of our website.
It features many usable modules, one of the most important is the traffic directory where the traffic sources are described on a pie chart with actual figures and their percentage. It divides the overall search into the organic (through google search), refferal (if somebody followed a link to your website found elsewhere) and direct (if you said somebody to visit your website).
To install the tracker you need to upload the code name of the tracker given to you by google and insert it along with a special script into the footer (or the bottom part of your website if you don't have a footer specified).
Although there is no direct need to put it exactly there I belive it is a good practice since you usually put other code into header (search engines verification codes, related links to stylesheet or favicon, etc., etc.)
See you soon Developers!
Tuesday 11 December 2012
Wednesday 5 December 2012
Cache
Hi Developers!
In many cases we can see a phenomena of getting faulty readings although everything is OK. For example, when American astronauts went to the moon, every time the capsule was going behind the far side of the moon, the controllers in Houston were receiving faulty indications about some readings that were fine just second ago and now they were implausible. So they were calling it the "dirty data". It was happening due to the radio signal being disrupted by the moon which at that time stood between the craft and the Earth.
Well guess what!
There is a similar phenomena in Web Design! It is called the cache. Cache is a handy memory space utilized by the browser that works as a buffer - some of the elements of frequently browsed websites (and in web design it's obvious that the websites are tested, controlled, viewed all the time) are saved to cache to increase the speed of loading the page. The reason is simple - to enhance the download speed of the potential user's favorite sites. From this perspective cache is a good thing.
It has also one rather unhonest but life-saving property that I will discuss at the end.
The disadvantage of cache is that it could lead to a heart attack! Say you were asked by your boss to fix some issue and you do. You're happy, the page looks great on your machine and then you report to your superior. And then he tells you that it isn't done.
OR
You did some changes, you're sure they works and are done correctly and then suddenly after the refresh nothing is changing!
And why?
That happens because his cache is not refreshed or cleared and the browser uses the elements saved in cache to increase speed, but because of that it doesn't necessarily comply with the latest changes done to the project. The solution is usually to clear the browser cache.
I said that there is also one not necessarily honest but life-saving property of cache. If somebody had asked you to do something and you didn't do it because you have forgotten or whatever, you can always do it quickly and then blame cache! See you soon developers!
In many cases we can see a phenomena of getting faulty readings although everything is OK. For example, when American astronauts went to the moon, every time the capsule was going behind the far side of the moon, the controllers in Houston were receiving faulty indications about some readings that were fine just second ago and now they were implausible. So they were calling it the "dirty data". It was happening due to the radio signal being disrupted by the moon which at that time stood between the craft and the Earth.
Well guess what!
There is a similar phenomena in Web Design! It is called the cache. Cache is a handy memory space utilized by the browser that works as a buffer - some of the elements of frequently browsed websites (and in web design it's obvious that the websites are tested, controlled, viewed all the time) are saved to cache to increase the speed of loading the page. The reason is simple - to enhance the download speed of the potential user's favorite sites. From this perspective cache is a good thing.
It has also one rather unhonest but life-saving property that I will discuss at the end.
The disadvantage of cache is that it could lead to a heart attack! Say you were asked by your boss to fix some issue and you do. You're happy, the page looks great on your machine and then you report to your superior. And then he tells you that it isn't done.
OR
You did some changes, you're sure they works and are done correctly and then suddenly after the refresh nothing is changing!
And why?
That happens because his cache is not refreshed or cleared and the browser uses the elements saved in cache to increase speed, but because of that it doesn't necessarily comply with the latest changes done to the project. The solution is usually to clear the browser cache.
I said that there is also one not necessarily honest but life-saving property of cache. If somebody had asked you to do something and you didn't do it because you have forgotten or whatever, you can always do it quickly and then blame cache! See you soon developers!
Tuesday 23 October 2012
Portable Apps
Hi Developers!
Today about portable apps. These are the applications that can be installed on removable memory sources like memory cards or pendrives.
Why are they useful? What's the benefits of using them? How can they aid in web design?
They are useful because on most of occasions they are lightweight and self contained. These are usually very useful simple editors, but also antivirus software, browsers, mail clients, etc.
Benefits of using them are: first of all they leaves no marks in system's register so they surely won't affect the functionality of the existing configuration and therefore they will probably work without problems (everything however depends on the system hardware requirements); second: they allow to bring whatever you do to the environment where some of the functionality required is not available, for example when you are given a new computer with nothing on it you still can have your toolkit with you. Third: you can take it anywhere and use it anywhere.
Aid for web design is therefore simple: you can always have your office, your e-mails, messages, pages, servers, editors, code, websites always with you.
So is it fully bulletproof?
Of course not. You can always forget your memory key (although it is your fault and not the portable apps nor your pendrive!).
And sometimes applications tends to freeze and generally are working slower due to limited transfer posed by USB itself.
Two great pages with portable apps are:
PortableApps.com
and
PendriveApss.com
See you soon Developers!
Today about portable apps. These are the applications that can be installed on removable memory sources like memory cards or pendrives.
Why are they useful? What's the benefits of using them? How can they aid in web design?
They are useful because on most of occasions they are lightweight and self contained. These are usually very useful simple editors, but also antivirus software, browsers, mail clients, etc.
Benefits of using them are: first of all they leaves no marks in system's register so they surely won't affect the functionality of the existing configuration and therefore they will probably work without problems (everything however depends on the system hardware requirements); second: they allow to bring whatever you do to the environment where some of the functionality required is not available, for example when you are given a new computer with nothing on it you still can have your toolkit with you. Third: you can take it anywhere and use it anywhere.
Aid for web design is therefore simple: you can always have your office, your e-mails, messages, pages, servers, editors, code, websites always with you.
So is it fully bulletproof?
Of course not. You can always forget your memory key (although it is your fault and not the portable apps nor your pendrive!).
And sometimes applications tends to freeze and generally are working slower due to limited transfer posed by USB itself.
Two great pages with portable apps are:
PortableApps.com
and
PendriveApss.com
See you soon Developers!
Thursday 18 October 2012
Session manager
Hi Developers!
I have always praised the ability to start up where I have left off the other day. It makes a sense to do so, and there are numerous ways to do it.
One is to leave anything like it was and do not shut down your computer. But what happens when suddenly there was a power shortage? Ok, you might have a backup ups. Yes, but it's a terrible waste of energy, and those daimn bills are draining pocket. That would have to be accounted in the bill for web design and customers might not be happy about it.
The other way is even better if combined with portable apps like Firefox (which can be) and Chrome for example (it might too). It's a session manager. A cool plugin that saves the state of current browsing session including number of opened browser windows/tabs and even the position inside a page. It's like a screenshot of your work environment. When the session is restored the only thing that has to be done is reload of the content. And we're back in (web design) business.
What is the advantage apart from saving energy and natural environment (those polutions from power plants agrrrrr:/)?
If we save a saved session on portable Firefox, we can travel with it anywhere and continue the work on every computer with usb and Internet connection.
Cool huh?
See you soon Developers!
I have always praised the ability to start up where I have left off the other day. It makes a sense to do so, and there are numerous ways to do it.
One is to leave anything like it was and do not shut down your computer. But what happens when suddenly there was a power shortage? Ok, you might have a backup ups. Yes, but it's a terrible waste of energy, and those daimn bills are draining pocket. That would have to be accounted in the bill for web design and customers might not be happy about it.
The other way is even better if combined with portable apps like Firefox (which can be) and Chrome for example (it might too). It's a session manager. A cool plugin that saves the state of current browsing session including number of opened browser windows/tabs and even the position inside a page. It's like a screenshot of your work environment. When the session is restored the only thing that has to be done is reload of the content. And we're back in (web design) business.
What is the advantage apart from saving energy and natural environment (those polutions from power plants agrrrrr:/)?
If we save a saved session on portable Firefox, we can travel with it anywhere and continue the work on every computer with usb and Internet connection.
Cool huh?
See you soon Developers!
Monday 8 October 2012
Colorzilla
Hi Developers!
Today I will introduce another of my favorite web design plugins for Firefox (among others).
It's Colorzilla.
If you have ever used Photoshop (which I will cover in next post and I promise to be consistent) you sure know the color picker tool. Even if you used MS Paint you should know it.
Well that's what Colorzilla is for the website. It is a color picking tool that can extract rgb or hex value of the color that resides on a website. It can be extracted from an image of from static element. It can also be easily transferred to the clipboard so you can straight on copy it elsewhere. It is very handy to use and lightweight.
Although it is not that vital as firebug or Web Developer Toolkit, it is definitely a nice aid for any web design professional. Until next time Developers!
Today I will introduce another of my favorite web design plugins for Firefox (among others).
It's Colorzilla.
If you have ever used Photoshop (which I will cover in next post and I promise to be consistent) you sure know the color picker tool. Even if you used MS Paint you should know it.
Well that's what Colorzilla is for the website. It is a color picking tool that can extract rgb or hex value of the color that resides on a website. It can be extracted from an image of from static element. It can also be easily transferred to the clipboard so you can straight on copy it elsewhere. It is very handy to use and lightweight.
Although it is not that vital as firebug or Web Developer Toolkit, it is definitely a nice aid for any web design professional. Until next time Developers!
Friday 5 October 2012
Firebug
Hi Developers!
Here is another handy tool that makes web design and development easier. A definite must-have tool.
Firebug is yet another extension for Firefox (originally it was and recently it is available for chrome and standalone which can be used even with the "infancy" Internet Explorer).
What it does is somehow similar to the inspect tool of Web Developer Toolbar.
It allows to select a given element of a web page and inspect on the go the style and html. By doing so you can "update" the styles on the go. I'm not entirely sure but I think that you cannot overwrite the stylesheet nor the html from Firebug console, but at least you can see instantly what inpact would your changes have to the existing web design.
The advantage of Firebug over CSS Inspect of Web Developer Toolbar is that Firebug is sometimes more intuitive and easier to follow. However when these two are combined they form a powerful aliance against bugs in the code. I enjoy using Firebug even for development because of it's real time display of what changes are made.
That's all for today. See you soon!
Here is another handy tool that makes web design and development easier. A definite must-have tool.
Firebug is yet another extension for Firefox (originally it was and recently it is available for chrome and standalone which can be used even with the "infancy" Internet Explorer).
What it does is somehow similar to the inspect tool of Web Developer Toolbar.
It allows to select a given element of a web page and inspect on the go the style and html. By doing so you can "update" the styles on the go. I'm not entirely sure but I think that you cannot overwrite the stylesheet nor the html from Firebug console, but at least you can see instantly what inpact would your changes have to the existing web design.
The advantage of Firebug over CSS Inspect of Web Developer Toolbar is that Firebug is sometimes more intuitive and easier to follow. However when these two are combined they form a powerful aliance against bugs in the code. I enjoy using Firebug even for development because of it's real time display of what changes are made.
That's all for today. See you soon!
Web Developer Toolbar
Hi Developers!
Now here is a nice piece of browser plugin that works best to my mind with Firefox. Essentially it adds a new toolbar with some cool and unique tools for web design.
Here's a short briefing of what it can do and how it can help you debug the websites:
Strictly speaking this plugin on it's own is a quite comprehensive solution but it suits better for debugging than for web design itself. Yet some of it's functions are unique and the biggest advantage of it is that it has all these functions "under one roof" and very easily accessible. It is definitely a must-have for a web design individuals.
See you soon!
Now here is a nice piece of browser plugin that works best to my mind with Firefox. Essentially it adds a new toolbar with some cool and unique tools for web design.
Here's a short briefing of what it can do and how it can help you debug the websites:
- disable all styles -> it allows you to quickly specify whether the problem that you are encountering is of css nature or not;
- inspect element style -> allows to see what style is associated with given element (I recommend firebug for that purpose - I will write about it soon)
- clear cookies -> it happens all the time that even though you have made and saved the change, after refreshing the page still looks the same - it's due to chache which is a browser memory; it can hold the older versions of the page browsed recently (to make it loading quickly since it is frequently watched/read)
- forms management -> allows to clear fields, add new and trace the forms
- images -> allows to mess around with size of the images, backgrounds, etc.
- information -> allows to get specific info about tags, like div size, etc.
- disable -> allows to disable various elements like JavaScript, Cache, popups, proxies, etc.
- edit CSS and HTML
- outline various elements
- resize elements
- view page source (very usefull but most browsers has it built-in)
- validate page source
- most importantly I guess it has a function called Ruller. It is really handy. This feature allows to create a resizable box with given dimensions that can be changed. It helps a lot with measuring how much space a div for example should take...
Strictly speaking this plugin on it's own is a quite comprehensive solution but it suits better for debugging than for web design itself. Yet some of it's functions are unique and the biggest advantage of it is that it has all these functions "under one roof" and very easily accessible. It is definitely a must-have for a web design individuals.
See you soon!
Subscribe to:
Posts (Atom)