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!
Tuesday 23 October 2012
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!
Browsers
Hi Developers!
As originally promissed, here's about the browsers.
The most popular browsers in use today are: Microsoft Internet Explorer, Opera, Mozilla Firefox, Google Chrome and Safari. Almost all of them supports latest inventions of current web desing World like html5 or css3 (with all their fancy functionality). They are easy to use, mostly portable and even have mobile versions for handheld devices like phones or tablets.
If you ask me which to use, for the starter I can say each one of them... except... the Internet Explorer.
Why?
Internet Explorer is made without consistency. I would love to ask Microsoft engineers why almost every page looks very weird on different version of their browser (while in other browsers changes are minimal if not none). It's a little awkward to see page looking reasonably fine in IE8 or 7, but things can quickly go from bad to worse with 6 and 5. More to that - if we include in our page nicely rotated images made in css3 they will be straight (not rotated) in Internet Explorer. Now that is a major disadvantage and Microsoft seems to be a step back to it's rivals. Ask any web development man and he will tell you - there's no other browser for which you have to specify different style sheet (for each version)! There's even a handy tag to do so.
You know why there's no such tag for Chrome, Firefox or Safari?
Answer: because these browsers are better and they don't need them.
In fact the changes required to the styles to make it - in browser language - "cross-platform" are limiting to slight changes which at the end of the day do not affect functionality nor appearance in a vital way.
But which is the best?
They all have good and bad sides and too be honest I'm using both Chrome and Firefox. Chrome for browsing, Firefox for development. I praise that you can get both in portable versions.
I think that Firefox is slightly better for web development because of it's extensibility (easy to install collorzilla, webdeveloper toolbar, firebug - I will write about those later on), speed (these addons work slower on my Chrome) and overall I generally like it.
The worse thing about this is that some people still use "old bad" Internet Explorer and make developers work hard for they money. Web Development People throughout the World would have easier life if not for Internet Explorer. Thank you Mr. Gates!
As originally promissed, here's about the browsers.
The most popular browsers in use today are: Microsoft Internet Explorer, Opera, Mozilla Firefox, Google Chrome and Safari. Almost all of them supports latest inventions of current web desing World like html5 or css3 (with all their fancy functionality). They are easy to use, mostly portable and even have mobile versions for handheld devices like phones or tablets.
If you ask me which to use, for the starter I can say each one of them... except... the Internet Explorer.
Why?
Internet Explorer is made without consistency. I would love to ask Microsoft engineers why almost every page looks very weird on different version of their browser (while in other browsers changes are minimal if not none). It's a little awkward to see page looking reasonably fine in IE8 or 7, but things can quickly go from bad to worse with 6 and 5. More to that - if we include in our page nicely rotated images made in css3 they will be straight (not rotated) in Internet Explorer. Now that is a major disadvantage and Microsoft seems to be a step back to it's rivals. Ask any web development man and he will tell you - there's no other browser for which you have to specify different style sheet (for each version)! There's even a handy tag to do so.
You know why there's no such tag for Chrome, Firefox or Safari?
Answer: because these browsers are better and they don't need them.
In fact the changes required to the styles to make it - in browser language - "cross-platform" are limiting to slight changes which at the end of the day do not affect functionality nor appearance in a vital way.
But which is the best?
They all have good and bad sides and too be honest I'm using both Chrome and Firefox. Chrome for browsing, Firefox for development. I praise that you can get both in portable versions.
I think that Firefox is slightly better for web development because of it's extensibility (easy to install collorzilla, webdeveloper toolbar, firebug - I will write about those later on), speed (these addons work slower on my Chrome) and overall I generally like it.
The worse thing about this is that some people still use "old bad" Internet Explorer and make developers work hard for they money. Web Development People throughout the World would have easier life if not for Internet Explorer. Thank you Mr. Gates!
Consistency is a key...
Hi Developers!
Actually I've got myself into a trap. I wanted to talk to you about the browsers, but there is more important thing that somewhat leads to browsers, one specific actually. It's consistency and this is the trap - I'm inconsistent to what I've previously said.
Anyway the most important concept of all websites and web design practices, regardless whether it is a minimalistic or grunge, modern or oldish, cool or uncool, page or blog, is consistency.
Consistency is a single word but in web design semantics it has multiple meaning, or indeed multiple application.
In the code for example it is best practice to follow single convention: if you are using self-closing tags in one place you should be consistent in doing so throughout the whole page.
Similarly if you are coding styles with all properties in single line you shouldn't in build a block in next line. It will be easier to you and others to follow your code (sometimes you may not be the only developer working on a page).
In typography (something I will discuss later) it is important to follow proper web design techniques. For example, when building whats called "font stack" you should always refer to similar fonts; so if you're using serif - be consistent. Use it throughout the entire page. In color schemes it's a similar story. Try to select the colors that are consistent with each other, that match and does not cause you to get a heart attack! Same thing relates to links - keep them consistent...
I will tell you what happens when the consistency is gone in the next post... About the browsers.
See you then!
Actually I've got myself into a trap. I wanted to talk to you about the browsers, but there is more important thing that somewhat leads to browsers, one specific actually. It's consistency and this is the trap - I'm inconsistent to what I've previously said.
Anyway the most important concept of all websites and web design practices, regardless whether it is a minimalistic or grunge, modern or oldish, cool or uncool, page or blog, is consistency.
Consistency is a single word but in web design semantics it has multiple meaning, or indeed multiple application.
In the code for example it is best practice to follow single convention: if you are using self-closing tags in one place you should be consistent in doing so throughout the whole page.
Similarly if you are coding styles with all properties in single line you shouldn't in build a block in next line. It will be easier to you and others to follow your code (sometimes you may not be the only developer working on a page).
In typography (something I will discuss later) it is important to follow proper web design techniques. For example, when building whats called "font stack" you should always refer to similar fonts; so if you're using serif - be consistent. Use it throughout the entire page. In color schemes it's a similar story. Try to select the colors that are consistent with each other, that match and does not cause you to get a heart attack! Same thing relates to links - keep them consistent...
I will tell you what happens when the consistency is gone in the next post... About the browsers.
See you then!
Thursday 4 October 2012
Code Editor
Hi Developers!
In my first article I wanted to discuss about most down-to-the-ground aspect of web design which is choice of text editor.
It is not a news that you can use such simple tools as Windows-provided Notepad (on top of MS Office – their best piece of software
). However, Notepad has many limitations. The most obvious is the lack
of formatting. When you create the html tags in it, it does not help you
to align them so it is your job to make sure every tag is properly
closed and aligned/formatted according to the web design best practices. I use Notepad only when I have nothing better at my disposal.
A way better tool is an editor I found many years ago which is called Notepad++. As the name suggests, it is an enhanced text editor. The advantage of Notepad++ is that it somewhat knows what you’re doing – it colors the tags with different schemes and by doing so it makes the code more understandable to the Web Developer. It also aligns the tags according to the good convention – all tags are properly aligned and little vertical dots appears in each block of code so it is easy to follow divs, lists, etc. Another advantage is that you can get fully portable version (I will write about portable tools on other occasion).
Recently I have found Sublime to be also very advanced tool. It doesn’t vary significantly from Notepad++ apart from it’s neat darkish interface (which I praise to be honest, but that’s just me), having basically the same cool functionality but it has one more function that I have never witnessed else. It can do a group rename to the similar tags. For example if you are referring to a css class used three times in your project but you’ve misspelled the class name and copied it three times, you can just double click on one of the misspelled tags and you can rename all three tags in just one go. Cool, isn’t it? And it is also portable!
But I guess the editor that impressed me the most was one suggested to me by our Senior Developer at DigitalEire. I would never expected it but it’s my “old college friend” NetBeans. On top of solid functionality it offers a very good tool to browse in appearance of a specific keyword throughout the project files. Also it holds ftp client sort of “built-in”. Every time you save a file in the project, given that the project structure is the same on your machine as it is on the server – it can be overwritten straight on, or you can decide when you want to upload it. I guess Eclipse for php offers similar functionality but I had no chance to check that as yet.
I have to admit that I like the free NetBeans more than expensive DreamWeaver…
Ah, DreamWeaver. Many say that it’s the best web design package. Many would question it. It definitely has many exciting functions, couple interesting ones (like image-map generator built-in) but other than that it hadn’t impressed me that much as other programs of the Adobe Creative Suite which is being used by our guys from DigitalEire. Maybe I simply don’t know it that much…
Next time I will tell about browsers… See you then!
In my first article I wanted to discuss about most down-to-the-ground aspect of web design which is choice of text editor.
It is not a news that you can use such simple tools as Windows-provided Notepad (on top of MS Office – their best piece of software
). However, Notepad has many limitations. The most obvious is the lack
of formatting. When you create the html tags in it, it does not help you
to align them so it is your job to make sure every tag is properly
closed and aligned/formatted according to the web design best practices. I use Notepad only when I have nothing better at my disposal.A way better tool is an editor I found many years ago which is called Notepad++. As the name suggests, it is an enhanced text editor. The advantage of Notepad++ is that it somewhat knows what you’re doing – it colors the tags with different schemes and by doing so it makes the code more understandable to the Web Developer. It also aligns the tags according to the good convention – all tags are properly aligned and little vertical dots appears in each block of code so it is easy to follow divs, lists, etc. Another advantage is that you can get fully portable version (I will write about portable tools on other occasion).
Recently I have found Sublime to be also very advanced tool. It doesn’t vary significantly from Notepad++ apart from it’s neat darkish interface (which I praise to be honest, but that’s just me), having basically the same cool functionality but it has one more function that I have never witnessed else. It can do a group rename to the similar tags. For example if you are referring to a css class used three times in your project but you’ve misspelled the class name and copied it three times, you can just double click on one of the misspelled tags and you can rename all three tags in just one go. Cool, isn’t it? And it is also portable!
But I guess the editor that impressed me the most was one suggested to me by our Senior Developer at DigitalEire. I would never expected it but it’s my “old college friend” NetBeans. On top of solid functionality it offers a very good tool to browse in appearance of a specific keyword throughout the project files. Also it holds ftp client sort of “built-in”. Every time you save a file in the project, given that the project structure is the same on your machine as it is on the server – it can be overwritten straight on, or you can decide when you want to upload it. I guess Eclipse for php offers similar functionality but I had no chance to check that as yet.
I have to admit that I like the free NetBeans more than expensive DreamWeaver…
Ah, DreamWeaver. Many say that it’s the best web design package. Many would question it. It definitely has many exciting functions, couple interesting ones (like image-map generator built-in) but other than that it hadn’t impressed me that much as other programs of the Adobe Creative Suite which is being used by our guys from DigitalEire. Maybe I simply don’t know it that much…
Next time I will tell about browsers… See you then!
Welcome to WebDesignEnvrionment
Hi Everyone! My name is Greg and I am trainee Web Developer from Tullamore, Ireland. I am currently having work placement internship in one of the quickest growing web development companies in Ireland – DigitalEire from Tullamore, Co. Offaly, Ireland.
Every day I am learning new skills and I extend my toolkit and experience. I wish to share some of the ideas and concepts that I have learned at Omicron.
I will be posting in couple of categories tightly related to web design and all of it’s aspects. I hope some other developers, more or less experienced, will find this blog somewhat interesting.
Regards, WebDevelopers!
Every day I am learning new skills and I extend my toolkit and experience. I wish to share some of the ideas and concepts that I have learned at Omicron.
I will be posting in couple of categories tightly related to web design and all of it’s aspects. I hope some other developers, more or less experienced, will find this blog somewhat interesting.
Regards, WebDevelopers!
Subscribe to:
Posts (Atom)