Learn Web Design Online » Resources

Webtool to measure your website speed and performance

admin — Sat, 31 Aug 2013 04:03:31 +0000

GTMetrix.com will let you type in a URL and it will give you a grade on speed and performance. No signup required to use.

List Drop Down Menu Examples

admin — Thu, 06 Sep 2012 04:50:25 +0000

It is not a problem building a basic horizontal menu, but building a horizontal menu with drop down item upon hover is a bit more challenging — especially if it is a complex multi-level menu system.

Plus there are so many different ways of building them, from pure CSS menus to those that uses some jQuery. Making them cross-browser compatible is another chore.

There are so many drop down menu examples out there, that you might want to look through a few to find one the most closely matches what you are looking for and then see how it works.

Here is a list of some drop down menu example (listed in no particular order).

SuckerFish – AListApart.com
Son of SuckerFish – HTMLDog
SuperFish -
How to Create a drop-down nav menu with HTML5, CSS3, and JQuery – tutsplus.com
Smooth Navigation Menu – dynamicdrive.com
Sliding JQuery Menu – hv-designs.co.uk

Where to Learn About Responsive Web Design

admin — Thu, 30 Aug 2012 05:19:48 +0000

Wikipedia defines Responsive Web Design as …

“an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)”

Ethan Marcotte wrote the book Responsive Web Design and the article about it on A List Apart.

Learn responsive web design by watching some videos at TeamTreeHouse.com.

SmashingMagazine.com has some good tips.

If you looking for detailed tutorials, try the 15 listed in designwoop.com

The one on WebDesignWall.com is a nice short easy one to begin with.

The tutorial talked about using the meta viewport tag and using media-queries.js or respond.js to make Internet Explorer 8 support media queries.

In the book “Responsive Web Design”, it talks about using base “font-size: 100%;” and changing everything to be em’s or percentages, including padding and margins. Column widths are to be done in percentages. This makes for a flexible grid. Even the background-image faux column technique can be adapted to work with percentage width columns.

Images are constrained to always scale to fix within their containers with “max-width: 100%;” Alternatively, the excess image portions can be hidden with “overflow: hidden;”

And of course, the book talks about media queries.

Remapping Function Key to do Copy and Paste with AutoHotKey

admin — Sat, 16 Jul 2011 15:09:55 +0000

The copy and paste keystroke combinations of Ctrl-C and Ctrl-V in Windows are used so frequently, it is surprising that there is not a single function key for that. You have to do a double key combination with the left-hand which can be hard on the hand. And it is not typically not possible to do the key combination with the right hand.

There may be some external keyboards that have the copy and paste buttons on them, but if you are using the keyboard on the laptop, there is no built-in control panel settings to remap the function keys to do the copy to and paste from clipboard function.

Fortunately, there is a free open-source utility called AutoHotKey which can remap your function keys to do the Ctrl-C and Ctrl-V combinations.

After downloading and installing the AutoHotKey_L from autohotkey.com, run the autohotkey.exe program. It will ask if you want it to create an sample AutoHotKey.ahk script on your “My Documents” folder in Windows. Say yes. Then you can open and edit that AutoHotKey.ahk script and put in commands such as …

F1::^c
F2::^v
F3::^x
CapsLock::^c

The first line says that if you press the F1 function key, then it will perform the Ctrl-C instead. The second line says pressing F2 will do a Ctrl-V to paste. And F3 to cut.

Since the CapsLock key is hardly used, I like to map it to the “copy to clipboard” command. Note that now you can press either CapsLock or F1 to do the “copy”.

To run the Autohotkey script, just double-click on the autohotkey.ahk. Because this script is named autohotkey.ahk, it means that this script will run if you run autohotkey.exe as well.

When autohotkey is running (as noted by the green autohotkey icon on the system tray), the remapping takes place and the original functionality of the CapsLock, F1, F2, F3 key will no longer work. If you want to turn of the remapping, just right-click on the green autohotkey icon on the system tray and select exit. Now your keyboard is back to normal.

Autohotkey has many more features including programming constructs and compiling into an executable. But for key remapping, you don’t need all that. And sometimes compiling it into an executable can trigger off your anti-virus/anti-malware software.

There are other key mapping programs out there. But you have to be careful that they do not contain malware that may record your keystrokes (such as when you are typing in a password, etc).

Autohotkey has been around for a long time. According to Wikipedia, developer Chris Mallett released the beta of AutoHotkey in 2003. The program is well-known and is on Wikipedia. It has been reviewed by CNet. And because it is open-source, the source code is downloadable for anyone to review. Hence, it is unlikely that this software has any malware in it. I have my anti-virus/anti-malware software up-to-date. And for the simple keymapping shown above, it has never triggered my anti-virus/anti-malware software.

Tools for Freelancers

admin — Tue, 05 Jul 2011 22:32:52 +0000

Here are some tools that may be useful to freelancers…

FreshBooks.com – invoicing
BatchBlue.com – CRM
EchoSign.com – capture digital signatures for contracts.
GotoMeeting.com – online meeting and screen share
TeamViewer.com – remote control and desktop sharing
Basecamp – project management
Skype.com – Voice of IP telephony
Google Voice – telephony you can get your own number and forward it to your cell phone
RingCentral.com – toll-free or local hosted number for small businesses
OvernightPrints.com and VistaPrint.com for business cards

Resources of Job Sites for Job Seekers

admin — Tue, 05 Jul 2011 22:28:25 +0000

Below are some collected resources of sites where you can find work and jobs. If you are looking specifically for freelance work, go to our Freelance Work section.

Job Search Engines

Indeed.com
oodle.com/job
SimplyHired.com
JobSter.com
JobPile
InSourced.com
Job-Search-Engine.com
AllJobSearch.com

Job Staffing Agencies

ManPower.com
Robert Half Technologies
Aquent
Volt Information Sciences
CreativeGroup.com
AdeccoUSA.com
Act-1.com
Hudson.com
Yoh.com
TechniSource.com
Spherion.com
Accolo.com
FrogDesign.com/jobs

Resume Related Sites

VisualCV.com – online resume with video
ResumeCourier.ca – resume distribution
Employment911.com

Other Noteworthy Sites

LinkedIn.com – career networking
GlassDoor.com
JobFox.com
RiseSmart.com

Resources for Finding Freelance Work

admin — Tue, 05 Jul 2011 22:26:13 +0000

Here are some collected resources of where freelancer might be able to find freelance work.

If you are a business owner that require the services of a freelancer or whether you are a consultant who needs some expertise in some technical area, these resources can also be a great place to find freelancers.

Freelance Marketplace Sites

If this is not enough, also take a look at AllFreelance’s hugh list of freelance job boards.

Job Postings for Freelancers

GoFreelance.com
oDesk.com
ProgrammerMeetDesigner.com
FreshWebJobs.com
Gig Board on 37Signals.com
AuthenticJobs.com – click the freelance tab
CraigsList.org – Look under “Gigs” for your city
BackPage.com – look under “jobs” for your city
Job board on FreelanceSwitch.com
AllFreelanceWork.com
MediaBistro.com – look for “Duration = freelance”
Behance.net/Job_List
FreelanceBBS.com – click “available projects”

Job Listing on Forums

Freelance Work in Application Specific Expertise

Sites and Forums for Freelancers

admin — Tue, 05 Jul 2011 22:16:26 +0000

Here are some sites, forums, and resource for freelancers that might have useful information for their freelance business.

Sites for Freelancers

Forums for Freelancers

Be sure to take a look at list of places to find freelance work.

Joomla Forums

admin — Mon, 04 Jul 2011 19:45:45 +0000

JoomlaBoard Forums

If you want to integrate forums into your Joomla site, try Joomla Board

Once you have JoomlaBoard installed, you can go to Components -> Joomlaboard Forum to configure and administer the forum.

Go through the Joomlaboard Configuration.

Then set up your form in the Forum Administration. You need to set up a Category which is a container for your Forums. Posts can only be made to Forums and Forum must be within a Category. So you will need to have at least one Category and then one Forum under that category. Then publish all the Categories and Forums.

The User Administration is where you can view your users of your forums.

Now create a new menu with the selection of “Component”.

Joomla-SMF Forum Component by JoomlaHacks.com

If you want to use Joomla with Simple Machines forum instead, then you can use Joomla-SMF Forum Component by JoomlaHacks.com with is associated User Guide, Forum, and Help Topic. Joomla-SMF Component has optional modules to display recent posts on your front page.

What happened to Joomla-SMF Bridge?

Forum as a separate entity.

Alternatively, you can setup your forum totally separate from your website. And then skin the forum to match the site and integrate into it via a menu link. The method does not require you to hack Joomla code or use bridges and hence will make upgrade forums and data migration to different forums easier. But the drawback is that the author and publisher logins are totally separate from each other. Hence you might want to move the Joomla login component to separate page that only authors and publishers will know. That way, forum users will not try to use that login.

Adding a menu to your separate forum.

Go to the menu in the Admin console and click New menu. Then select Link URL as the menu type.

JCE Joomla Content Editor

admin — Mon, 04 Jul 2011 19:29:03 +0000

If you don’t like the default TinyMCE editor that comes with Joomla, try JCE. It allows user to upload photos from their desktops, which is not possible with TinyMCE. JCE also allows you to style the tag and easily create linkable and hover over images.

To install JCE, first install the Admin component, and then the Mambot. Now you got a JCE admin panel at Components -> JCE Admin where you can configure your JCE editor. There is a JCE Plugin submenu that you can use to install other JCE plugins. The JCE Media Manager might be something that you might want to install. To switch to using the JCE editor by default go to Site -> Global Configuration and change the default WYSIWYG editor. For existing users, you may have to assign the default editor for them.

Here is a visual tutorial on the installation and use of JCE. The component and support can be found at JoomlaContentEditor.net