Tuesday, September 30, 2014
Thursday, April 18, 2013
An Amazing, Free & Web-Based CSS Editor: bluePen Editor
An Amazing, Free & Web-Based CSS Editor: bluePen Editor:
When we need to update the styles of websites that are already online, we either perform the change locally (if we have the source with us) or FTP-edit it.
bluePen Editor is a PHP-powered CSS editor that can be installed to any static or dynamic website and makes live CSS editing possible.
Once triggered (with a bookmarklet), it opens the editor widget and makes all HTML elements hoverable so that blupePen can locate the CSS rules of them (like Chrome Dev Tools).
It has features like color-picker, file manager, ruler, color comparison and more.
The editor keeps track of the changes made and auto-backups them in case you prefer to revert the styles.Advertisements:
ioDeck, a self-hosted and awesome PHP form generator.
When we need to update the styles of websites that are already online, we either perform the change locally (if we have the source with us) or FTP-edit it.
bluePen Editor is a PHP-powered CSS editor that can be installed to any static or dynamic website and makes live CSS editing possible.
Once triggered (with a bookmarklet), it opens the editor widget and makes all HTML elements hoverable so that blupePen can locate the CSS rules of them (like Chrome Dev Tools).
It has features like color-picker, file manager, ruler, color comparison and more.
The editor keeps track of the changes made and auto-backups them in case you prefer to revert the styles.Advertisements:
ioDeck, a self-hosted and awesome PHP form generator.
Tuesday, March 26, 2013
Drawscript: Generate vector code from Illustrator
Drawscript: Generate vector code from Illustrator: 
Drawscript is an extension for Adobe Illustrator that generates graphics code from vector shapes in realtime. Generates OBJ-C, C++, JavaScript for HTML5 Canvas, Processing, Actionscript 3, JSON, and Raw bezier points.
Drawscript is an extension for Adobe Illustrator that generates graphics code from vector shapes in realtime. Generates OBJ-C, C++, JavaScript for HTML5 Canvas, Processing, Actionscript 3, JSON, and Raw bezier points.
Friday, March 22, 2013
‘Social Media Image Maker’ makes it easy to create profile and cover images for Facebook and other social networks
‘Social Media Image Maker’ makes it easy to create profile and cover images for Facebook and other social networks
March 21, 2013 By Leave a Comment
Facebook cover photos (i.e. the large image that you open a Facebook profile) have become popular lately. If you’ve tried to add one you know that they have to be of specific sizes for the cover photos to look good. And if you try to make one yourself, you will realize that its not as simple as it seems to get it right and with proper dimensions. This is true not just for the cover photo but for profile pictures on multiple social networks as well.
How it works:
Scroll down the page and the various social services will appear in the sidebar. What is nice about the interface is that it for each web service it displays a kind of mockup that illustrates where your image will be displayed on the site itself as well as the appropriate size (see screenshots above for an example).To create the image, simple click on the Create button under the image type you want to create. You can either drag and drop the image in your browse or simply browse the file you want to use as your image.
After uploading the image, you will be presented with a bunch of options that allow for rotating and flipping the image. Click on Apply when done.
Next you will be presented with the options to add effects to the images, crop images and more. Once done, you can simply download the image to your computer and use it on the specific social network you want.
In Conclusion
This service is very nicely designed, is easy to use, and is quite handy if you want to create your profile and cover images in few simple clicks.There is room for improvement though, as you have to upload the same image again and again if you want to use it in multiple social networks. It would be nice if they somehow just kept it and let you reuse it at will, whether in the same session or long term by allowing registrations and logins, etc.
Try it and let us know what you think.
Go here to get started.
Sunday, January 13, 2013
reate a WIFI hotspot from a WIFI-enabled PC, with Winhotspot
Create a WIFI hotspot from a WIFI-enabled PC, with Winhotspot:
If you have a single PC with WIFI access and you would like to use that connection to broadcast A WIFI signal to other devices then read on: Winhotspot is one of the simplest FREE virtual WIFI programs available, and possibly the easiest to use.
Windows 7 (and above) supports the broadcasting of a WIFI connection as a virtual WIFI hotspot. This can actually be done manually, but you can think of Winhotspot as a GUI interface that makes broadcasting a virtual hotspot a very simple process as easy as pressing a button. It is also 100% free software
(more…)
If you have a single PC with WIFI access and you would like to use that connection to broadcast A WIFI signal to other devices then read on: Winhotspot is one of the simplest FREE virtual WIFI programs available, and possibly the easiest to use.
Windows 7 (and above) supports the broadcasting of a WIFI connection as a virtual WIFI hotspot. This can actually be done manually, but you can think of Winhotspot as a GUI interface that makes broadcasting a virtual hotspot a very simple process as easy as pressing a button. It is also 100% free software
(more…)
Saturday, December 01, 2012
10 Tiny Yet Useful Web Apps For Designers
10 Tiny Yet Useful Web Apps For Designers:
As the web has evolved over the last few years into a powerful, dependable platform, web apps have grown in popularity as well as complexity. There are web apps out there for pretty much anything you want to get done — even something as unthinkable a few years ago as replacing Photoshop for image editing. This development has come at a cost though — web apps are more powerful than ever with their own learning curves and subscription costs.
As has been the case with any popular platform though, the web has also been a breeding ground for utilitarian applications that do small things well, and at the unbeatable cost of free. In this post, I’ll be listing some of the best small design utilities that I’ve come to use on the web to get very specific tasks done. They’re tiny, focused and get the job done with little fuss.
Like the article? You should subscribe and follow us on twitter.
Most fonts these days come with a whole bunch of characters beyond the regular alphabet — from different types of bullets to arrows, stars and more complex shapes. The problem in using these characters in your designs is that they can be pretty hard to find. Who wants to open the Character Map every time you need a shape? And how do you know if that shape is available in the first place?
Enter CopyPasteCharacter, a website dedicated to making it super-easy to find all those hidden characters and getting the right codes to you use them in your designs. Simply browse through the visual listing, select the character you want and copy the code to paste into your editor or in HTML. You can also sign up and create your own sets of characters you use most for easy access later.
You know how irritating it can be to find images of just the right size when you are creating prototypes, or mocking up a UI design with dummy text. Personally I dislike using dummy images because they can easily distract from the overall design, so I use grey boxes instead. If you need those when creating the HTMLs, you can avoid creating images from those grey boxes and use placebox.es instead.
Simply type in the URL of the site with the appropriate variables — say http://placebox.es/150/150/#900 for a red box of 150 x 150 pixels — and the appropriate images will be rendered when you open the HTML, directly from the web, complete with the dimensions or any other text you may want to add to them.
So you have the color scheme for your design all set with the basic colors, accents, et al. Now you need to add a CSS gradient with a slightly lighter and a slightly darker version of the base color. What do you do? No need to fire up Photoshop and mess around with the color palette for something as simple as this. Simply go to 0to255, enter the hex value of your color and the app will list all tints and shades of the color — all the way up to white at the top and black at the bottom. Clicking a shade automatically copies its hex code to the clipboard, ready for you to paste it into your CSS.
If you need something more powerful than just different shades of a color, how about a full-fledged color scheme generator? Color Scheme Designer will help you define the entire color palette for your design based on one color as a starting point. Choose from different approaches — monochromatic, complementary, triad, tetrad and more — then tweak the color scheme to your liking till you get the exact shades you need. You can vary the saturation and lightness of the scheme, or edit each shade individually. You can even review the implications on color blind people if accessibility is an important factor in your design.
No matter how much broadband speeds have increased over the last few years, optimizing your graphics on the web is always a good idea. Designers love PNGs for their ability to have multiple levels of alpha transparency, but the lossless compression comes at the cost of higher file sizes. TinyPNG can help you out in this situation by squeezing out the smallest possible file sizes from PNG files, almost always doing a much better job than Photoshop or Fireworks can. Simply upload your PNG and download the compressed version from the site.
Favicons are those tiny icons that appear in the title bar or the tab when your website is open in a browser. They’re pretty much a necessity in any web design project these days, but not natively supported by most of the popular design apps. So how do you go about creating your own custom favicon without spending on dedicated — and mostly overkill — icon design apps? Simply create a PNG of your image, upload it on the Favicon Generator web page and download your custom favicon.ico file. There is even an editor to handcraft your icon from scratch, and a gallery of converted favicons if you are looking for some inspiration. Another similar tool is iConvert Icons, though it takes an extra step since their site pushes their desktop app first.
Icon fonts are all the craze these days. The ability to have icons as scalable, always sharp and infinitely stylable text characters can be quite empowering until you figure out that the icon fonts available to you don’t have all the icons you need for your design. Rather than use multiple fonts for different icons, you can simply create your own icon font, custom made for a design by mixing and matching from a huge collection of free icons at IcoMoon. Simply choose the icons you need, change the character codes if you want and download the font to embed into your stylesheet. You can even import your own icons to be included in the font.
So you’re a hotshot designer with killer Photoshop skills, all excited about the prospect of converting your super detailed design into HTML with cools CSS3 effects. The problem is, even the thought of trying to create CSS3 gradients and shadows using lines and lines of code makes your stomach churn. Then there are all those vendor prefixes you don’t want to deal with!
Enter Layer Styles, a neat web app that gives you a Photoshop-like interface to visually design your CSS effects and then spits out the exact code to copy and paste into your CSS files. That’s it — a cross browser compatible CSS implementation of your design in minutes!
Texture is a big part of any design these days, and one of the easiest ways to show texture is to add subtle noise to a plain background. You don’t always need to open Photoshop or Fireworks to create a simple background with some noise, though. Simply fire up the Noise Texture Generator, choose your background color, edit the opacity and density of the texture and download your file. As an added bonus, the app will even remember your noise settings if you close the tab and open the site again later.
Finally, let’s talk about wireframing. As more and more designers adopt the concept of wireframing for quickly visualizing user interfaces and prototypes, a growing number of full-fledged wireframing apps have crowded the web. If all the power and complexity of those apps is not your cup of tea, you might want to give this app a try.
wireframe.cc provides a super minimalistic wireframing experience with a resizable browser (or mobile UI) frame and the ability to quickly draw the most common UI elements without the hassle of toolbars, grids and the likes. Draw the wireframe like you would on paper and share it with your colleagues right from the browser. Anybody with the URL can then view and edit it, so everyone is always looking at the latest version.
Hopefully there were a few in this list that will work for you. If you have your own favorites that I somehow missed out, let’s hear about them in the comments.
As the web has evolved over the last few years into a powerful, dependable platform, web apps have grown in popularity as well as complexity. There are web apps out there for pretty much anything you want to get done — even something as unthinkable a few years ago as replacing Photoshop for image editing. This development has come at a cost though — web apps are more powerful than ever with their own learning curves and subscription costs.
As has been the case with any popular platform though, the web has also been a breeding ground for utilitarian applications that do small things well, and at the unbeatable cost of free. In this post, I’ll be listing some of the best small design utilities that I’ve come to use on the web to get very specific tasks done. They’re tiny, focused and get the job done with little fuss.
Like the article? You should subscribe and follow us on twitter.
CopyPasteCharacter
Most fonts these days come with a whole bunch of characters beyond the regular alphabet — from different types of bullets to arrows, stars and more complex shapes. The problem in using these characters in your designs is that they can be pretty hard to find. Who wants to open the Character Map every time you need a shape? And how do you know if that shape is available in the first place?
Enter CopyPasteCharacter, a website dedicated to making it super-easy to find all those hidden characters and getting the right codes to you use them in your designs. Simply browse through the visual listing, select the character you want and copy the code to paste into your editor or in HTML. You can also sign up and create your own sets of characters you use most for easy access later.
placebox.es
You know how irritating it can be to find images of just the right size when you are creating prototypes, or mocking up a UI design with dummy text. Personally I dislike using dummy images because they can easily distract from the overall design, so I use grey boxes instead. If you need those when creating the HTMLs, you can avoid creating images from those grey boxes and use placebox.es instead.
Simply type in the URL of the site with the appropriate variables — say http://placebox.es/150/150/#900 for a red box of 150 x 150 pixels — and the appropriate images will be rendered when you open the HTML, directly from the web, complete with the dimensions or any other text you may want to add to them.
0to255
So you have the color scheme for your design all set with the basic colors, accents, et al. Now you need to add a CSS gradient with a slightly lighter and a slightly darker version of the base color. What do you do? No need to fire up Photoshop and mess around with the color palette for something as simple as this. Simply go to 0to255, enter the hex value of your color and the app will list all tints and shades of the color — all the way up to white at the top and black at the bottom. Clicking a shade automatically copies its hex code to the clipboard, ready for you to paste it into your CSS.
Color Scheme Designer
If you need something more powerful than just different shades of a color, how about a full-fledged color scheme generator? Color Scheme Designer will help you define the entire color palette for your design based on one color as a starting point. Choose from different approaches — monochromatic, complementary, triad, tetrad and more — then tweak the color scheme to your liking till you get the exact shades you need. You can vary the saturation and lightness of the scheme, or edit each shade individually. You can even review the implications on color blind people if accessibility is an important factor in your design.
TinyPNG
No matter how much broadband speeds have increased over the last few years, optimizing your graphics on the web is always a good idea. Designers love PNGs for their ability to have multiple levels of alpha transparency, but the lossless compression comes at the cost of higher file sizes. TinyPNG can help you out in this situation by squeezing out the smallest possible file sizes from PNG files, almost always doing a much better job than Photoshop or Fireworks can. Simply upload your PNG and download the compressed version from the site.
Favicon Generator
Favicons are those tiny icons that appear in the title bar or the tab when your website is open in a browser. They’re pretty much a necessity in any web design project these days, but not natively supported by most of the popular design apps. So how do you go about creating your own custom favicon without spending on dedicated — and mostly overkill — icon design apps? Simply create a PNG of your image, upload it on the Favicon Generator web page and download your custom favicon.ico file. There is even an editor to handcraft your icon from scratch, and a gallery of converted favicons if you are looking for some inspiration. Another similar tool is iConvert Icons, though it takes an extra step since their site pushes their desktop app first.
IcoMoon App
Icon fonts are all the craze these days. The ability to have icons as scalable, always sharp and infinitely stylable text characters can be quite empowering until you figure out that the icon fonts available to you don’t have all the icons you need for your design. Rather than use multiple fonts for different icons, you can simply create your own icon font, custom made for a design by mixing and matching from a huge collection of free icons at IcoMoon. Simply choose the icons you need, change the character codes if you want and download the font to embed into your stylesheet. You can even import your own icons to be included in the font.
Layer Styles
So you’re a hotshot designer with killer Photoshop skills, all excited about the prospect of converting your super detailed design into HTML with cools CSS3 effects. The problem is, even the thought of trying to create CSS3 gradients and shadows using lines and lines of code makes your stomach churn. Then there are all those vendor prefixes you don’t want to deal with!
Enter Layer Styles, a neat web app that gives you a Photoshop-like interface to visually design your CSS effects and then spits out the exact code to copy and paste into your CSS files. That’s it — a cross browser compatible CSS implementation of your design in minutes!
Noise Texture Generator
Texture is a big part of any design these days, and one of the easiest ways to show texture is to add subtle noise to a plain background. You don’t always need to open Photoshop or Fireworks to create a simple background with some noise, though. Simply fire up the Noise Texture Generator, choose your background color, edit the opacity and density of the texture and download your file. As an added bonus, the app will even remember your noise settings if you close the tab and open the site again later.
wireframe.cc
Finally, let’s talk about wireframing. As more and more designers adopt the concept of wireframing for quickly visualizing user interfaces and prototypes, a growing number of full-fledged wireframing apps have crowded the web. If all the power and complexity of those apps is not your cup of tea, you might want to give this app a try.
wireframe.cc provides a super minimalistic wireframing experience with a resizable browser (or mobile UI) frame and the ability to quickly draw the most common UI elements without the hassle of toolbars, grids and the likes. Draw the wireframe like you would on paper and share it with your colleagues right from the browser. Anybody with the URL can then view and edit it, so everyone is always looking at the latest version.
Wrap-Up
Believe me when I say that this is just the tip of the iceberg. In the ever-expanding sea of complex, feature laden and exceedingly pricey web apps, there are tons and tons of these little gems that focus on doing just one thing and doing it right. They may not boast all the features you might ever need, but will probably be good enough for that one quick thing you need most.Hopefully there were a few in this list that will work for you. If you have your own favorites that I somehow missed out, let’s hear about them in the comments.
Thursday, August 30, 2012
Backup Box: Move cloud hosted files directly between providers and servers
Backup Box: Move cloud hosted files directly between providers and servers:
Sometimes you may want to move files hosted somewhere on the Internet to another server or provider. While you could download the files to your local computer – if you do not have a local backup available – to upload them again to the new server or provider, you sometimes however may prefer to transfer files directly between servers.
A core benefit of this procedure is speed. Your home computer’s upload and download speed is usually fairly limited in comparison to the speed of Internet servers, so that it should take less time to move the files. You may however run into issues as well, with trust being one of the most important ones. If you want server to server communication, you need to trust those servers with data so that they communicate with each other.
Once you have added at least two services you can configure transfers between them. You have got the option to transfer all files, or only select files or folders to the new server or service.
And instead of transferring files directly, you can alternatively schedule transfers so that they are run regularly by the application. You could for instance backup your website on a weekly basis, or transfer the files from your Dropbox account to SkyDrive once a month.
Another interesting option is the archive and timestamp feature which zips the selected files during the transfer. That’s useful if you need to make room on a server or an account.
Free account users are limited to transferring 1 Gigabyte of data per month using a maximum of 10 transfers in that time. Pro, premium and enterprise accounts are available that raise limits and make available additional features such as incremental transfers.
It usually takes minutes before the first files start to appear on the selected server or cloud hosting account you are transferring the files to.
As far as security goes, Backup Box states that it is using 256-bit SSL encryption whenever supported to transfer files, that it wont retain files on their servers, and that Amazon S3 is used with a AES 256-bit encryption for temporary storage.
One Gigabyte per month won’t take you far, especially if you are thinking about scheduling regular backups of your websites or data that you host online.
Sometimes you may want to move files hosted somewhere on the Internet to another server or provider. While you could download the files to your local computer – if you do not have a local backup available – to upload them again to the new server or provider, you sometimes however may prefer to transfer files directly between servers.
A core benefit of this procedure is speed. Your home computer’s upload and download speed is usually fairly limited in comparison to the speed of Internet servers, so that it should take less time to move the files. You may however run into issues as well, with trust being one of the most important ones. If you want server to server communication, you need to trust those servers with data so that they communicate with each other.
Backup Box
And it is the same when you look at the Backup Box service. The service’s core feature are direct server to server transfers between cloud storage providers such as Box, Google Drive, SkyDrive, SugarSync or Dropbox, as well as custom servers that can be accessed via ftp or sftp. You configure Backup Box to transfer files from one server or provider to another. Why would you want to do that?- To migrate your files to another cloud hosting provider
- To backup your websites regularly
- To backup databases
- To safe time transferring files
Once you have added at least two services you can configure transfers between them. You have got the option to transfer all files, or only select files or folders to the new server or service.
And instead of transferring files directly, you can alternatively schedule transfers so that they are run regularly by the application. You could for instance backup your website on a weekly basis, or transfer the files from your Dropbox account to SkyDrive once a month.
Another interesting option is the archive and timestamp feature which zips the selected files during the transfer. That’s useful if you need to make room on a server or an account.
Free account users are limited to transferring 1 Gigabyte of data per month using a maximum of 10 transfers in that time. Pro, premium and enterprise accounts are available that raise limits and make available additional features such as incremental transfers.
It usually takes minutes before the first files start to appear on the selected server or cloud hosting account you are transferring the files to.
As far as security goes, Backup Box states that it is using 256-bit SSL encryption whenever supported to transfer files, that it wont retain files on their servers, and that Amazon S3 is used with a AES 256-bit encryption for temporary storage.
One Gigabyte per month won’t take you far, especially if you are thinking about scheduling regular backups of your websites or data that you host online.
Subscribe to:
Posts (Atom)