Archive for category Developer's Toolbox

40 Free High-Quality WordPress Themes

Nov 12

Posted by Smashing Editorial in Developer's Toolbox, WordPress, themes | No Comments

High quality free Wordpress Themes have become harder and harder to find in the past year, with the influx of premium themes, more and more designers and developers are selling themes (and rightly so, they do amazing work). However, the quality of freely available themes has improved as well; in fact, some themes are very advanced and professional and can serve as a solid foundation for your next designs.

There are a lot of choices out there for someone wanting to choose a Wordpress theme for their blog. But, that aside, the quality is certainly there, and we are sure you will be impressed with this Wordpress theme compilation.

You may be interested in the following related posts:

Free High-Quality WordPress Themes

AppCloud Theme
A nice e-commerce WordPress theme with a clean and professional look. Built upon 960.gs, with an integrated slideshow, two layouts (horizontal and vertical) for app/gadget images. The theme also includes sections “Featured products” and “Top Selling” and a categorized products view.

Berita (via ThemeCloset)
Berita is a minimalist corporate theme created for companies to prominently display their logo, but the theme could be used for any type of website. It’s a feature-rich theme with a preview slider on the front page and a robust theme administration page.

Magazeen
Magazeen is a two-column theme released specifically for Smashing Magazine readers. The theme has some subtle enhancements that encourage looking at related and new posts, like a related posts drop-down effect for the category link.

Mainstream Theme (via Wootheme)
You have the option of choosing from five different theme colors with Mainstream. Thumbnails are automatically resided and the sidebar is widgetized.

Rusty Grunge
Rusty Grunge is a simple WordPress theme yet still gives you the “destroyed” look. This theme utilizes a fully-widgetized sidebar and has been downloaded over 28,000 times and is featured as a pre-installed theme on Dreamhost’s default installation of WordPress.

Obscure WordPress Theme
A dark magazine WordPress theme suitable for any site niche; also a good fit for a community-based site.

Paper Wall
Smashing Magazine released the illustrated theme Paper Wall last month. The inspiration behind the Paper Wall theme was a designer’s desk, as designers typically put things on paper. It’s a two-column theme with many elements of paper: paper boards, peeling paper and paper “menus”.

Gallery WordPress Theme
a beautiful, free, gallery-style Thematic child theme for WordPress, designed by Christopher Wallace especially for Smashing Magazine and its readers. It is extremely flexible and can be used as a starting point for design galleries and portfolios.

Cool Retro
A nice, clean illustrated WordPress theme with a retro-look and nice typography.

Life Collage
Life Collage is a child theme of the Hybrid theme framework. It’s about getting back to the roots of blogging. About sharing our lives. And, about having a little fun while we do it.

Shalom Typo
This theme was designed for the typographic template contest at Smashing Magazine by the German designer David Hellmann. This WordPress theme is based upon this layout. A clean and nice typographic WordPress-theme.

Jungleland Theme (via Theme Lab)
The stylish browns give an earthy feel to this blog making it a good choice for those blogs focused on the environment and nature. It features a photo gallery and a sidebar menu

Monkeypr Theme (via Queness)
Monkeypr is a nicely designed and fun WordPress theme.

Folio Elements Theme (via Press 75)
With its black background, Folio Elements theme will surely make your images and photographs noticed. There is no sidebar, no widgets, no list of categories, no place to comment and nowhere to search. However, if you are looking for a basic carousel-type theme with absolutely no basics, bells or whistles, then Folio Elements might be the one for you.

SimpleCart(js)
SimpleCart(js) is another child of the Thematic Wordpress framework. The theme requires WP E-Commerce and is a flexible way to showcase products with the grid framework. The theme features a rich wood background and simple white content area.

Glassic
A simple clean WordPress theme with the focus on typography and simplicity. Released by Abdullah Ibrahim exclusively for Smashing Magazine and its readers.

Zinepress Theme (via Well Medicatedi)
Zinepress is a two column magazine style theme. There is a nice sidebar with enough space for ads and for your widgets. It is hand coded and has valid XHTML STrict 1.0 and CSS Level 2.1. The developer has successfully tested this them with IE 6.0+, Firefox 2+, Opera 9+, Safari 3+, and Chrome 0.2+. Suggested Wordpress version is 2.7 or higher.

Futurosity Aperio Prototype
Futurosity Aperio is a clean straight-forward blog theme built on Sandbox

Futurosity Vero (via Theme Meme)
Built on Sandbox and Blueprint CSS framework, the Futurosity Vero is a minimalist theme. Near the top of your home page, your most recent and featured post will be displayed.

PolaroidPress (via Tutorial9)
PolaroidPress, as you might guess from the name, plays on the usage of “polaroids” in the theme that display your random images. It’s a simple two-column theme with an airy feel.

H5
The H5 theme is more of a proof-of-concept theme to show designers how to show theme designers how to design with HTML5 and CSS 2.1. It’s a bare-bones theme that’s perfect as a building block for creating your next Wordpress theme.

Inuit (via CSS Reflex)
Inuit makes use of a lot of whitespace and preview images for each post on the homepage. The theme also comes integrated with Twitter and Flickr.

Wu Wei
Clean, modern and minimal. The theme was based on the Taoist concept of wu wei: knowing when to act, and knowing when not to act. The theme is built on the principles of the grid system.

Cardeo Minimal
A minimal three-column theme with plenty of white space and gray text.

Album Theme (by Allan Cole)
Auto-focus is a blog theme designed for photographers to showcase their work.

Mystique (by Digital Nature)
This sleek one column theme has a flexible-width, threaded comments, and an adjustable header.

Manifest
Manifest is a straight-forward one column blog. It has no widgets or sidebar, but gives you a nice clean approach that focuses on your content.

Debug Theme (by Joost de Valk)
When your WordPress installs fail and you need more information, the debug theme is perfect. On the home page, it displays the important URL’s, editor, memory setting, etc. On sub pages it shows the page type, all the query vars that are set and the SQL query for that particular page.

Calmdream WordPress Theme
A very clean and simple layout for magazine layouts.

Portfolio Theme (via WPESP)
Portfolio is a two column blog theme which can be described as a minimalist. This modifiable design will make your own portfolio look great!

Blog Theme
The Carrington Blog-style theme is filled with advanced features like widgetized sidebars, AJAX loading of content, stylish galleries, customizable headers and colors.

Mobile Theme (via Carrington Themesl)
The Carrington Mobile has a beautiful design supporting advanced touch browsers (Android, BlackBerry, iPhone and Pre).

Pyrmont V2 Theme (via WP)
Pyrmont V2 is a two-column theme with a black background that could very well make your photographs and designs stand out.

Destyle Theme
Destyle is a magazine-style WordPress theme. This is another theme packed with useful features such as: multi-level superfish dropdown menu, ad management, predefined CSS styles, customa page templates, Twitter and Flick badges on sidebar and automatic image resizing.

ImpreZZ
A dark, three-column theme that gives the second column a third dimension.

Would you like to see more similar lists on SM?

Your opinion is very important to us. There are literally hundreds of similar lists on various design blogs. We are trying to do our best to present you only the best of the best, collecting useful links over months. Would you like to see more similar lists in the future? Or should we drop lists altogether and focus on more original content?

Tags: Photoshop Tutorial

Web Conferences Roundup: Events from Around the Globe

Oct 21

Posted by Louis Lazaris in Developer's Toolbox, conferences | No Comments

Each year, thousands of developers, designers, and programmers from around the world gather together at conferences and events to share ideas, promote the latest technologies, and discuss best practices, standards, and emerging trends in their respective fields. For those of us who have had the privilege to participate in one or more of those events, we likely received valuable information that had a profound effect on our progress as web professionals.

In this article, I’ve attempted to gather together a comprehensive list of web development and graphic design-related conferences and events that developers and designers can use as a reference to find out where and when the latest of such of events will be taking place. I’ve tried to ensure that the event descriptions and links are as general as possible, allowing this list to stay relevant for as long as possible.

Unfortunately, it is not possible to include every pertinent event. So if there is anything relevant missing, please comment below and we’ll try to add it to the list. Also, if any of the information is incorrect or out of date, you can contact me using the bio information at the bottom of this article, and we’ll make any necessary corrections.

The list, which includes a brief description plus location, is divided into the following categories:

General Web Design Conferences

The following list consists of web conferences and events that cover a broad range of topics, including design, usability, web standards, and coding.

An Event Apart
“From the makers of A List Apart. An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

Location: Multiple U.S. cities

Web Directions
“Our major conferences, Web Directions South and Web Directions North, are held annually in Sydney, Australia and Vancouver, Canada, and cover the full range of interests for web professionals — web design, front-end and back-end development, information architecture, interaction design, accessibility, data visualization and much more.”

Location: Australia, North America, Japan

Front-End Design Conference
“web-conference-roundup.”

Location: U.S.A.

Future of Web Design
“There’s loads going on at this years event. You’ll hear from great speakers, enjoy in depth workshops and make new friends and contacts. It’s a 1 day, 1 track event with a 2nd day of fantastic workshops.”

Location: New York City, U.S.A.

Voices That Matter Conferences
“The Pearson Education Voices That Matter Conference series gives voice to the most important thought leaders in technology, design, and business today. These conferences give our readers access to those who have devised new technologies, new approaches and new inventions. Our speakers are the individuals who have made the strongest contributions impacting their industry. ”

Location: Multiple U.S. cities

In Control Conference
“Learn from a diverse array of Web experts to use modern tools and techniques to refine your Web design craft now. Harness creative inspiration to unlock your potential, amplify innovation, and broaden your reach. Immerse yourself in two days of idea exchange with potential business partners who are as forward-thinking as you are.”

Location: U.S.A.

@media Web Conferences
“Founded in 2004, Vivabit has been producing widely renowned and consistently well-received conferences for web professionals since the first sell-out @media event in London in 2005.”

Location: Multiple cities worldwide

Webstock
“Webstock is a range of web-related events with the aim of improving how websites are built through inspiration, education, insightful analysis and practical application. It features industry leaders and kick-ass speakers talking on topics such as accessibility, web standards, usability and other best practices.”

Location: New Zealand

WebVisions
“WebVisions explores the future of design, content creation, user experience and business strategy to uncover the trends and agents of change that will shatter your assumptions about the Web. Be ready to network, share ideas and be inspired by an all-star lineup of speakers.”

Location: Portland, Oregon, U.S.A.

Web Developers Conference
“As always we’ve put together a great line up of speakers from across the UK. Not only that but we have also got local developers and designers together to help answer your questions.”

Location: Bristol, U.K.

Edge of the Web Conference
“The conference program offers a diverse range of leading edge and highly topical content focusing on key areas of current web development best practise, such as usability and accessibility and current web trends such as social networking and open data exchange, in a two day conference format.”

Location: Western Australia

Build Web Conference
“With a variety of companion workshops, lectures, parties, meetups and an unconference, Build was created for those enthusiastic about the web and passionate about what they do.”

Location: Belfast, Ireland

EdUI Conference
“EdUI offers a rare speaker lineup of top web innovators that will inspire and enlighten web designers, developers, managers, and user experience and interaction design professions from any industry.”

Location: Charlottesville, Virginia, U.S.A.

The Rich Web Experience Conference
“RWE is a technically focused event targeted at: Web Designers, Developers, and Technical Project Managers.”

Location: Orlando, Florida, U.S.A.

Web Design World
“Since 1997, we’ve helped thousands of Web designers learn what they need to know to make better web sites, manage web projects, and get home at a decent hour.”

Location: Seattle, Washington, U.S.A.

Fronteers
“Fronteers wants to organize a world class front-end web development conference each year. This is entirely done by volunteers, so we can keep the costs as low as possible.”

Location: Amsterdam, The Netherlands

The Big (D)esign Conference
“The Big Design Conference is an intense day of learning within the scope of Strategy, Social Media, User Experience, and Code Development. Experts from across the country will gather to present theories, research, experiences, and best practices to students, professionals, and executives looking to stay on the bleeding edge.”

Location: Dallas, Texas, U.S.A.

IDEA Conference
“IDEA brings together leading interaction design thinkers from across the globe, and challenges them: to share beyond the concepts that inspire them most, and deliver practical guidance for attendees to begin making an immediate difference in the networked world of today and tomorrow.”

Location: North America

UI, UX, & IA Conferences

The following list includes conferences and events focused on user interface design, user experience design, usability, and information architecture.

User Interface Conference
“Whether you’re looking for insights into new strategies, you need to learn the latest advancements, or you want a primer for new skills, this conference is the one for you. Our team of experts will set your imagination on fire, powering up your creative juices so you can dazzle and delight, whether you’re a member of a large team or a UX-Team-Of-One.”

Location: Massachusetts, U.S.A.

International Conference on Intelligent User Interfaces
“IUI is the annual meeting of the intelligent interfaces community and serves as the principal international forum for reporting outstanding research and development on intelligent user interfaces.”

Location: Worldwide

Web 3.0
“At Web 3.0 Conference we will explore how companies are using the semantic web today, and should be using them tomorrow, for significant bottom line impact in areas like marketing, corporate information management, publishing, customer service, and personal productivity.”

Location: Multiple U.S. cities

Information Architecture Summit
“The Information Architecture Summit is the premier gathering place for information architects and other user experience professionals. The conference has grown from a special interest group’s efforts to define an emerging field, to a rich and expanding community of practice, shaping and informing multiple disciplines.”

Location: Multiple cities worldwide

UX Australia
“UX Australia is a 3-day user experience design conference, with inspiring and practical presentations, covering a range of topics about how to design great experiences for people.”

Location: Australia

UXCampLondon
“A one day BarCamp in Richmond, London for anyone involved or interested in user experience design, interaction design, information architecture or usability.”

Location: Richmond, London, U.K.

UX Week
“UX Week is the premier user experience conference. With a mix of inspiring talks from recognized thought leaders and hands-on workshops delivering takeaway skills, this event delivers for user experience professionals at all levels — directors, managers, and practitioners.”

Location: San Francisco, U.S.A.

UX London
“UX London is a unique three-day event combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names.”

Location: London, U.K.

Usability Week Conference
“In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead 33 full-day tutorials on topics such as: Fundamental guidelines for Web usability, Improving usability for complex applications, Applying information architecture (IA) principles, Writing for the Web, Agile development and usability, Managing user experience strategy.”

Location: Multiple cities worldwide

Advanced Common Sense Usability Workshops
Usability workshops presented by the consulting firm “Advanced Common Sense”, owned and operated by Steve Krug, author of Don’t Make Me Think.

Location: Multiple U.S. Cities

JavaScript & Ajax Conferences

The following list includes conferences and events focused on JavaScript programming, JavaScript libraries, and Ajax.

jQuery Conference
“The annual conference of jQuery users and developers. There will be talks on jQuery, jQuery UI, plugins, complex application development, and more — all from the top jQuery developers. Case studies from some of the leading users of jQuery will be included along with a 3 hour tutorial for those just getting started.”

Location: U.S.A.

Full Frontal JavaScript Conference
“Full Frontal is a conference held in Brighton UK, for the front end developers with JavaScript skills ranging from beginner to advanced. If you’ve dabbled with JavaScript in the past and wanted to learn more about how the language works and what makes it tick, then this conference is for you.”

Location: Brighton, U.K.

The Ajax Experience
“The Ajax Experience (TAE) is the original, and most authoritative, event for Web developers and designers wanting to learn more about Ajax and next generation Web applications. TAE bridges technology and practice by focusing on new solutions for real world problems, and giving practical examples on those solutions. Presented by over 40 independent Ajax experts from across the globe and with so many expert attendees present as well, you can even network and leverage informal learning opportunities from your peers who can contribute directly to your skills and project success.”

Location: Boston, Massachusetts, U.S.A.

JSConf
“JSConf … is a conference devoted to the programming language we all love to hate and hate to love, JavaScript. This is conference will be thoughtful, content driven, and exemplify the very nature of JavaScript. The core focus of this conference is to expose some of the details about JavaScript that are often overlooked and present them more as a discussion with the audience. The content of the conference should cater to all types of JavaScript users from client interfaces to server development to testing.”

Location: Europe

AJAXWorld RIA Conference & Expo
“The first and only major AJAX event in the world.”

Location: New York City, U.S.A.

Graphic Design Conferences

The following list focuses on events and conference related to graphic design and design-related tools and technologies.

HOW Design Conference
“The HOW Design Conference recognizes that graphic design is a business as well as an art. We launched this annual event in 1991 with the goal of providing a hands-on, educational program to enable designers to better balance the three key components of graphic design: creativity, business and technology. Conference sessions cover a mix of these three critical design issues, with particular emphasis on creative and business topics.”

Location: U.S.A.

Adobe MAX
“Connect. Exchange ideas and build relationships with leading designers and developers, industry experts, and Adobe product teams. Discover. Choose from hundreds of sessions and labs presented by industry leaders and Adobe experts on best practices and emerging technologies. Inspire. Join the inspiring conversations that unfold when thousands of the most innovative, creative minds gather in one place.”

Location: U.S.A.

AIGA Design Conference
“Join us for the AIGA Design Conference, to celebrate design excellence, reinforce friendships and connections and stimulate thinking about the critical issues that surround design practice.”

Location: U.S.A.

TypeCon
“TypeCon explores type for the screen, printing history, Dutch design, type in motion, Arabic calligraphy, the American Arts and Crafts movement, experimental typography, and much more. Special events include the third annual Type and Design Education Forum, and an exhibition of international type and design.”

Location: U.S.A.

Photoshop World Conference & Expo
“Photoshop World is the ONLY Photoshop and digital photography conference designed to put you at the top of your game with fast and furious classes from the world’s leading experts. Photoshop World is where Photoshop users go to learn hard and play even harder!”

Location: Multiple U.S. Cities

PDN PhotoPlus International Conference + Expo
“PDN PhotoPlus International Conference + Expo is the most important event in the photo industry. Designed for professionals and advanced amateurs in the photographic and imaging industries, PDN PhotoPlus Expo showcases the latest advances in photography.”

Location: New York City, U.S.A.

London Design Festival
“The London Design Festival is an annual event established to celebrate and promote London as the creative capital of the world.”

Location: London, U.K.

View Conference
“VIEW Conference is the premiere international event in Italy on Computer Graphics, Interactive Techniques, Digital Cinema, 3D Animation, Gaming and VFX.”

Location: Italy

Design City
“Design City, a ’show within a show’, will bring together graphic designers with vendors who sell to the graphic design market. It connects buyers with sellers in a modern, interactive, results-driven environment. As one of the first trade shows of its kind in Canada, Design City aims to further strengthen the graphic design community and bring together buyers and sellers in the industry.”

Location: Canada

Design Indaba
“With a focus on international thought leadership, the Design Indaba Conference has become one of the world’s leading design events and hosts more than 40 speakers and 2 500 delegates. Independently curated with a focus on case studies and ingenious problem solving, rather than simply eye-catching portfolios, conference alumni are contemporary industry pacesetters.”

Location: Cape Town, South Africa

5D: The Future of Immersive Design
“Our goal is to unite a vital community of designers and image-makers and to serve as a catalyst for innovation.”

Location: California, U.S.A.

Mogo Media Web & Graphic Design Conferences
“Home of the InDesign Conference, the Adobe Creative Suite Conference, the Pixel Conference, the Vector Conference, the Web Design & Developer Conference, the Conference for Adobe Acrobat, and more!”

Location: Multiple cities worldwide

Mobile Web Conferences

The following list focuses on events and conferences covering to mobile web design and related technologies.

Design for Mobile
“The Design for Mobile conference is North America’s only design conference exclusively for mobile devices. All aspects are covered, from academic explorations to practical execution, from research to design to development.”

Location: Lawrence, Kansas, U.S.A.

Mobile 2.0 Conference
“Our two-day event, presented by the Mobile 2.0 Organizing Committee, focuses on understanding and leveraging Mobile Ecosystems, building and successfully monetizing new Mobile Applications and Services, and exploring Disruptive Mobile Innovation and Business Models.”

Location: San Francisco, California, U.S.A.

Voices That Matter: iPhone Developers Conference
“Learn what it takes to build killer iPhone apps, leveraging your existing skills in Objective-C. From Core Animation and Core Data to Push Notification Services and MapKit, we’ve got the bases covered.”

Location: Massachusetts, U.S.A.

BlackBerry® Developer Conference
“At the heart of the BlackBerry® Developer Conference is a core group of technically minded people who come together because they’re passionate about development and the possibilities for building outstanding mobile applications on the BlackBerry solution. Join the best and the brightest from Research In Motion (RIM), drawn from a team of thousands focused on the success of one platform, with a wealth of knowledge and experience in mobile application development.”

Location: California, U.S.A.

Mobile Web & Applications
“Mobile Web and Apps, incorporating an exclusive focus day on Mobile Social Networking, will provide you with all that you need to understand, improve and profit from this seismic shift in our industry.”

Location: London, U.K.

FITC Mobile
“Jam packed with information as well as a massive networking opportunity, FITC Mobile consists of presentations, demonstrations, and panel discussions, and is one of the only events in the world covering all aspects of mobile content.”

Location: Toronto, Ontario, Canada

PodCamp Az
“What makes ours different? Well, as you’ll note from the main page, this isn’t all about podcasting. Now we love podcasting, don’t get us wrong. But podcasting is simply a means to an end. It’s a method of distributing media files. We think the creation of those media files is more interesting. And we think what people do with those files is far more interesting than that.”

Location: Arizona, U.S.A.

Mobile 2.0 Conference
“The event provides a dynamic networking and information-sharing business environment, bringing together key stakeholders within the mobile web 2.0 value chain to discuss current trends and revenue generation possibilities, successful business models and the future opportunities that exist within Mobile social networks, Mobile internet and broadband, Devices and mobile AppStores, Mobile advertising Mobile content, Mobile gaming, video and TV.”

Location: Berlin, Germany

Back-End Programming Conferences

The following list consists of events and conferences focused on back-end programming languages and tools, platforms, and technologies related to those languages.

PHP Conferences
Visit the conferences page at PHP.net for updates and information on php-related conferences from around the world.

Location: Multiple cities worldwide

MySQL Conference & Expo
“The MySQL Conference & Expo is an interactive learning community — four days packed with connections to MySQL developers and open source experts who know their subject inside and out. You’ll gain unique insights from speakers, vendors, project leaders, and other participants who are using MySQL to successfully run the world’s most demanding applications, saving millions of dollars over proprietary software and hardware solutions.”

Location: Santa Clara, California, U.S.A.

Microsoft Professional Developers Conference
“The Professional Developers Conference (PDC) is the definitive developer event focused on the technical strategy of the Microsoft developer platform. Attendees come from around the world to learn about the future of Microsoft developer technology directly from the people who make it happen. If you’re a developer, architect or technology leader involved in making strategic technology decisions for your company or organization, the PDC is for you.”

Location: Los Angeles, California, U.S.A.

Microsoft MIX
“MIX is for designers and developers who build innovative web sites. Attendees are coders, strategists, information architects, visual designers, UX professionals and digital marketers. They represent top web sites, web start-ups, interactive agencies and other organizations that do business on the Web.”

Location: Las Vegas, Nevada, U.S.A.

The ExpressionEngine & CodeIgniter Conference (EECI)
“At the ExpressionEngine & CodeIgniter Conference you can meet the experts, be inspired and break new boundaries! This event brings you presentations and workshops from your favorite EE & CI speakers. Both beginners and experienced users will benefit from a variety of topics and sessions: discover how your favourite content management system and PHP framework can bend even further!”

Location: Leiden, The Netherlands

JavaOne
“The JavaOne conference is the kind of event where the declaration “Classpath is dead!”* causes hundreds of people to applaud soundly and hoot their approval. We’re talking hardcore, middleware-loving, certified-geeky Javaheads coming together to share their love of — and frustrations over — the Java programming language and platform, and the extended technology that it informs.”

Location: San Francisco, California, U.S.A.

Yahoo Developer Conference: Open Hack
“Hack Days are events hosted by Yahoo!—sometimes with other partners—in which participants are encouraged to create web applications in 24 hours ideally using one or more of Yahoo’s APIs or open source libraries. They normally consist of a combination of structured talks and unstructured ‘hacking’ time, often run overnight and normally conclude with a hack demo session with prizes for the best hacks.”

Location: Multiple cities worldwide

OpenSource World
“OpenSource World focuses on innovative solutions in real-world environments using open source, open standards and open architecture as part of an integrated IT infrastructure. The OpenSource World conference will present the latest Linux and open source ideas in a technical context by industry experts and innovators, giving IT end-users actionable initiatives that bring cost savings to the enterprise.”

Location: Multiple cities worldwide

Google I/O Developer Conference
“Google I/O is a web developer-focused conference held annually by Google to discuss web applications using Google and open web technologies.”

Location: San Francisco, California, U.S.A.

Google Developer Day
“Google Developer Days are a chance to learn about Google developer products from the engineers who built them. These one-day events will include seminars and “office hours” on web technologies including Google Maps, OpenSocial, Android, AJAX APIs, Chrome, Google Web Toolkit and more.”

Location: Multiple cities worldwide

Atlanta Linux Fest
“The Atlanta Linux Fest is a free grassroots conference for the GNU/Open Source Software/Free Software community to gather and share information about fun and exciting existing and upcoming Linux and Open Source Software. Attendees of all skill levels are invited to share their experiences to benefit all users of Linux/Free and Open Source Software. Atlanta Linux Fest is the place to learn, make new friends, and have fun!.”

Location: Atlanta, Georgia, U.S.A.

PayPal Innovate Developer Conference
“For two days, you’ll have the absolute inside track on how to capitalize on all of PayPal’s products. You’ll be in the mix with hundreds of other passionate developers — front and center as the possibilities of innovation are explored in over 35 interactive, technical sessions and Code & Build Labs. You’ll see how some of the most innovative developers in the world are building business on the PayPal platform.”

Location: San Francisco, California, U.S.A.

Scotch on the Rocks
“Scotch on the Rocks, established in 2005, is a conference based out of Edinburgh, Scotland concentrating on all things ColdFusion. Incorporating keynotes, technical sessions and tutorials, as well as the most innovative and successful ColdFusion experts and companies, Scotch on the Rocks is a must-attend conference.”

Location: Edinburgh, Scotland

OSCON Open Source Convention
“OSCON brings together over 3,000 experts, visionaries, and hackers in the trenches to explore all that open source has to offer. OSCON is the premier gathering place to gain exposure to and evaluate the new projects, tools, services, platforms, languages, software, and standards sweeping through the open source community.”

Location: U.S.A.

DrupalCampLA
“DrupalCampLA is the annual FREE conference organized by LA Drupal to unite and improve the Drupal Development Community in Los Angeles and the Greater Southern California Area. DrupalCampLA is an unconference-style Drupal training, founded in the style of BarCamp. While there are some differences (DrupalCamp does more pre-planning on the sessions), they have the common goal of bringing smart people together in an environment that is accessible to everyone.”

Location: Los Angeles, California, U.S.A.

WordCamp Wordpress Convention
“WordCamp is a conference type of event that focuses squarely on everything WordPress. Everyone from casual end users all the way up to core developers show up to these events. These events are usually highlighted by speeches or keynotes by various people.”

Location: Los Angeles, California, U.S.A.

Ruby on Rails Conferences

The following list consists of events and conferences focused on the Ruby programming language and Rails web application framework.

RubyConf
“RubyConf 2009 is the premier gathering of Ruby developers, experts, and innovators.”

Location: U.S.A.

EuRuKo
“EuRuKo is an annual conference about the Ruby programming language with an informal atmosphere and lots of opportunities to listen, to talk, to hack and to have fun.”

Location: Barcelona, Spain

Aloha On Rails
“The Aloha on Rails Conference is the premier destination event for Ruby on Rails and Web Development. This unique, intimate three day event (2 day conference and 1 day tutorial) unites the community’s top speakers and talent with motivated and excited attendees for an unforgettable conference in beautiful Hawaii.”

Location: Hawaii, U.S.A.

RailsConf
“RailsConf, co-produced by Ruby Central, Inc. and O’Reilly Media, Inc., is the largest official conference dedicated to everything Rails. Through keynotes, sessions, tutorials, panels, and events, RailsConf is an interactive meeting ground for the most innovative and successful Rails experts and companies.”

Location: U.S.A.

WindyCityRails
“Join us for a one-day conference packed with an abundance of Rails knowledge at WindyCityRails. Sharpen your technical skills, network with other professionals, and meet some of the top minds in the Ruby on Rails community. Developers, designers, entrepreneurs, and investors all find value in WindyCityRails.”

Location: Chicago, Illinois, U.S.A.

acts_as_conference
“Want to know what the future of Ruby on Rails looks like? Come to acts_as_conference … and find out. This annual two day event is dedicated to Ruby on Rails and the happy developers that use it (or wish to use it) in their daily lives. Come learn what’s to come.”

Location: U.S.A.

Scottish Ruby Conference
“Whether you’re interested in finding out what Ruby and Rails can deliver, or already convinced and keen to hang out with some of the foremost thinkers in the community, this conference is for you!”

Location: Scotland

The Rails Edge Conference
“The Rails Edge is a unique conference where we bring some of the best minds in the Rails and Ruby communities together with you in a single-track environment, so that we can all sharpen our edge. We hope you’ll join us!”

Location: U.S.A.

Flash & ActionScript Conferences

The following list consists of events focused on Adobe Flash animation, ActionScript development, and related technologies.

Flash on the Beach
“Flash on the Beach conference is the place to go for design, technical and inspiration if you are a web developer. It has grown quickly and gained fantastic status as the ‘must go to’ conference around… Flash on the Beach brings together the most creative, technical, inspirational, awe-inspiring, educational and entertaining industry leading speakers in the rich media industry.”

Location: Brighton, U.K.

FITC Design & Technology Events
“FITC has produced events for the last 7 years with over 700 presenters and 14 000 attendees through countless cities around the world. From Flash to Motion Design, FLEX to AIR, Mobile and more, FITC events each stand as unique and exciting experiences that inspire, educate and challenge.”

Location: Multiple cities worldwide

The ActionScript Conference
“The ActionScript Conference (TAC) is a community conference with the focus on Flash Platform. Attendants will see themselves immersed in a day of learning, knowledge exchange, and networking. TAC aims to bring topics on ActionScript 3.0, Flash development, Enterprise Flex 3 and 4, AIR, Integrating of Flash and other Platforms, and building Rich Internet Application to its audience.”

Location: Singapore

Flash on Tap
“The Flash on Tap conference is blurring the lines between business and pleasure. Experience the excitement of a beer festival while soaking in presentations by top tier design and technology professionals. It’s a three-day event, by Flash professionals for Flash professionals. Who’s talking? We have rounded up a great mixture of talented, Flash and beer-loving speakers.”

Location: Boston, Massachusetts, U.S.A.

Flashbelt
“The mission of Flashbelt is to bring together new media designers, developers and enthusiasts to share knowledge, inspiration and build community. It’s about professional development and creative inspiration.”

Location: Minneapolis, Minnesota, U.S.A.

360|Flex
“360|Flex is a community driven event. The sole purpose of the show is to bring the best of the Flex community together in one place to share war stories from the trenches and to allow the experts to share their deep technical knowledge with the community at large. Another benefit is finally being able to put a face, voice and personality onto the bloggers, flex coders and article writers that you’ve come to depend on.”

Location: Brighton, U.K.

Flash Forward
[Flash Forward was recently acquired by Lynda.com, so there was no information available about the event.]

Location: TBD

Flash Camp Bangkok
“Flash Camp Bangkok will provide an introduction to the Flash platform as well as covering everything you need to know about getting started with building and designing rich Internet applications (RIAs) with Flex 4, Flex Builder 4 and Catalyst.”

Location: Bangkok, Thailand

Flash Camp St. Louis
“Flash Camp St. Louis is a full-day event featuring some top industry experts on the Adobe Flash Platform from both inside and outside Adobe. Come advance your Flash, ActionScript and Flex skills, meet members of the Adobe team and network with local companies and fellow developers. Sessions are geared towards designers and developers with beginning to intermediate level of experience with ActionScript 3, Flash, and/or Flex and AIR.”

Location: St. Louis, Missouri, U.S.A.

SEO & SEM Conferences

The following list consists of events and conferences focused on Search Engine Optimisation and Search Engine Marketing.

Search Engine Strategies (SES)
“Search Engine Strategies (SES) is the leading global conference & expo series that educates delegates on search engine marketing (SEM), including optimization (SEO) and advertising strategies, tactics and best practices. SES Search Marketing Events provide instruction from the industry’s top Search experts, including representatives from the Search Engines themselves.”

Location: Multiple cities worldwide

Search Marketing Expo
“The world’s leading search engine marketing conference, Search Marketing Expo — SMX — is the search engine marketing conference from Third Door Media, the company behind the Search Engine Land news site, Sphinn.com, and the Search Marketing Now webcast series. SMX is programmed by the sharpest minds in search marketing. Together, Search Engine Land editor-in-chief Danny Sullivan and executive editor Chris Sherman have covered the topics, interviewed the luminaries and educated a generation of search marketers.”

Location: Multiple cities worldwide

PubCon
“WebmasterWorld’s PubCon is an educational conference and industry trade show programmed specifically for web professionals and website site owners. Although our center piece is Search Engine Marketing, whether your primary role is in web site marketing, corporate IT development, or in technology business management, you will find something of value at PubCon (aka: Publishers Conference). It is also designed to be fun and entertaining with ample opportunity for quality networking.”

Location: Worldwide

Marketing & Social Media Conferences

The following list consists of events and conferences focused on Internet marketing, social media, and related trends and technologies.

BlogWorld New Media Expo
“BlogWorld & New Media Expo is the only trade show and conference created for the industry of blogging and new media. It will give participants the strategies, tools and technologies they need to stake their claim in the blogosphere.”

Location: Las Vegas, Nevada, U.S.A.

The Good Web
“The Good Web is a forum for Advertisers, Designers, Brands, and Non-Profits to share their ingredients of success for building awareness and participation around the causes they believe in.”

Location: New York City, U.S.A.

Internet Marketing Conference (IMC)
“IMC is going to be a full day event dedicated to the challenge of how Internet is impacting your business. The program will be designed to meet executives needs of information about how big part of a companies revenues & costs should belong to the Internet channel.”

Location: Multiple cities worldwide

Atlantic Internet Marketing Conference (AIM)
“Winning in today’s online marketplace takes skill and understanding of the tools, methods, and strategies employed by Online leaders. The AIM conference will teach your team what it takes to win. From marketing strategists to designers and programmers — we’ll show you the most successful practices today online, how to execute them, and get ahead of your competition.”

Location: Eastern Canada

mesh conference
“mesh is happening because the five founders (see below) believed that Toronto deserved to have a world-class conference where people with an enthusiasm for the Web could talk about how it is affecting the media, marketing, business and society as a whole. Join us at mesh 2009 and help us connect, share and inspire.”

Location: Toronto, Ontario, Canada

meshmarketing
“meshmarketing is a one-day event focused on insights, tools and tactics to help you win customers’ hearts and minds, online. An insightful keynote will lead us into a series of engaging conversations and “show and tell” presentations, as well as in-depth workshops.”

Location: Toronto, Ontario, Canada

Webit e-marketing & e-business Expo
“e-Business & e-Marketing Expo for SE Europe is the first event of such scale in the region of Southeastern Europe. At the heart of Webit is The Main Stage, where the very essence of modern integrated marketing will be debated and challenged by influential industry leaders.”

Location: South East Europe

Social Media World Forum
The Social Media World Forum brings together a good diverse range of speakers from different areas in the world, with the right mix of brands, agencies and social networks, and provides an excellent recap of Social Network best practice, brought to life with inspiring case studies.

Location: Worldwide

The Internet Show
“The Internet Show is a series of seminars and showcases, presented globally. It is the only event that brings together Big, Medium and Small business, all eager to find new ways of doing internet business. It is a business, not a technology, show.

Location: Multiple cities worldwide

TWTRCON
“Twitter is transforming business, government and the non-profit world. At TWTRCON, a one-day conference focused entirely on the business use of Twitter, you’ll see case studies and learn best practices from leading organizations that are using the real-time web to deliver measurable results.”

Location: Multiple U.S. cities

140 Characters Conference
“At the #140conf events, we look at twitter as a platform and as a language we speak. Over time it will neither be the only platform nor the only language. #140conf is not an event about microblogging or the place where people share twitter ‘tips and techniques’ but rather where we explore the effects of the emerging real-time Internet on Business.”

Location: Multiple cities worldwide

MIMA Summit
“The Summit attracts professionals from design, media, promotions, content development, product development, publishing, marketing, usability, and experience design. This day-long conference is the top interactive marketing event in the Midwest.”

Location: Minnesota, U.S.A.

UGCX
“UGCX will uncover success stories behind companies who have maximized user-generated content, and the importance of building a robust community management strategy. Leaders in the field will also discuss the best ways to generate revenue as the big shift in media continues to take shape.”

Location: New York City, U.S.A.

The Next Web
“Internet professionals gather for 3 days to enjoy Amsterdam, the conference and to do business.”

Location: Amsterdam, The Netherlands

eduWEB Conference
“The eduWeb Conference is an annual, internationally recognized event for the higher education community, attracting those who are involved in online strategy, marketing and technology. This includes recruiting, web site design/ development, CMS, social media, marketing communications and the integration of traditional marketing channels into this new medium.”

Location: U.S.A.

Technology Conferences

The following list consists of events and conferences covering a broad range of web-related technologies.

Devconnections Conferences
“DevConnections rocks the technology industry as the largest and most exciting event focused on Microsoft technology and your needs. Hands-down this event has the best speakers in our industry, not to mention the coolest attendees. Compare the number of expert speakers, Microsoft architects and in-depth number of sessions to other conference events and you will not find a better value.”

Location: Las Vegas, Nevada, U.S.A.

dConstruct
“dConstruct brings together leading thinkers from the fields of ubiquitous computing, interface design, gaming and mobile to explore the challenges of designing for tomorrow.”

Location: Brighton, East Sussex, U.K.

Apple’s Worldwide Developers Conference (WWDC)
“The Apple Worldwide Developers Conference provides developers and IT professionals with in-depth technical information and hands-on learning about the powerful technologies in iPhone OS and Mac OS X from the Apple engineers who created them.”

Location: California, U.S.A.

International World Wide Web Conference
“The World Wide Web Conference is a yearly international conference on the topic of the future direction of the World Wide Web. It began in 1994 at CERN and is organized by the International World Wide Web Conferences Steering Committee (IW3C2). The Conference aims to provide the world a premier forum for discussion and debate about the evolution of the Web, the standardization of its associated technologies, and the impact of those technologies on society and culture.”

Location: Worldwide

DLD (Digital, Life, Design) Conference
“DLD (Digital, Life, Design) is an inspiring community for the 21st century which features digital innovation, science and culture and brings together thought leaders, creators, entrepreneurs and investors from Europe, the Middle-East, the Americas and Asia.”

Location: Munich, Germany

webDU
“webDU is the premier Antipodean Web Technology Conference. The conference offers the opportunity to get hands-on technical training, gain new skills, hear breaking news from the Web Industry, network with peers and industry leaders, and ultimately become more successful developing and delivering web applications. Nowhere else in ANZ can this audience find the volume and quality of information available under one roof at webDU.”

Location: Sydney, Australia

Web 2.0 Expo
“Web 2.0 Expo is a conference and tradeshow for everyone who cares about embracing and extending the opportunities created by Web 2.0 technologies.”

Location: New York City & San Francisco, U.S.A.

Macworld Expo
“Macworld offers access to hundreds of Mac products and services, paired with expert advice, demonstrations and instruction. Macworld conference programs feature industry leading minds, presenting cutting edge product training on the topics you most want to see. Whether you are a creative professional or a Mac IT pro, Macworld has the conference content, special presentations, exhibit hall highlights and experiences that meet your specific Mac needs.”

Location: U.S.A.

International Conference on Scalable Vector Graphics
“At the Scalable Vector Graphics (SVG) Open Conference you will have the opportunity to learn to use SVG to create effective and compelling web content, learn techniques for developing SVG software solutions, and see the latest developments from the W3C. You will meet the creators of SVG applications in person, the authors of the SVG specifications, and you will have the opportunity to provide your own input for future development.”

Location: Worldwide

Webinale
This conference covers e-Business and Advertising, RIAs, Wdigets, Social Networking, Future and Mobile Web as well as Design and Usability. It takes place every year in Germany and features over 70 talks from leading web experts in English and in German languages.

Location: Berlin, Germany

Where 2.0 Conference
“Now in its sixth year, the Where 2.0 Conference is where the grassroots and leading edge developers building location-aware technology intersect with the businesses and entrepreneurs seeking out location apps, platforms, and hardware to gain a competitive edge. In the O’Reilly conference tradition, Where 2.0 presents leading trends rather than chasing them.”

Location: California, U.S.A.

Internet Summit
“Presented by TechJournal South and Southern Capitol Ventures, the Internet Summit supports web oriented entrepreneurial activity, innovation, and the resultant economic development of the southeast region.”

Location: North Carolina, U.S.A.

Is Your Event or Conference Missing?

Do you know of any significant web-related event or conference that is not listed here? Let us know in the comments below and we’ll do our best to add it to the list.

About the Author

Louis Lazaris is a writer and freelance web developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.

Tags: Photoshop Tutorial

40+ Desert Island Web Development Tools

Sep 29

Posted by Cameron Chapman in Developer's Toolbox, Software, Tools, portable | No Comments

What would you do if you were suddenly stranded on a desert island in the middle of nowhere, with only a USB drive, a dial-up internet connection, and a barebones computer with no software outside the operating system installed? Of course, you’d use the internet connection to call for help first, but what about after that? How would you keep your design business going?

Okay, maybe a scenario that’s a bit more likely would work better. What if your computer crashed, wiping out all of your data and programs, and you have a deadline in two days? Or maybe you want to be able to pick up and leave at a moment’s notice without taking anything more than a change of clothes and a USB drive. If you have the apps below, neither of those scenarios would be much of a problem.

The apps on this list can help you with everything from coding to graphics to running your business and managing your projects, all from a single USB drive. And while USB drives are getting bigger all the time (last I checked a 64GB one wasn’t too badly priced, and that’s 4GB more storage than my current MacBook has), you still need special programs in most instances to have true portability. The apps below are just that: truly portable and small enough to fit on a USB drive (often a very small USB drive).

Coding

Notepad++ Portable Edition

Notepad++ Portable Edition is a coding application that includes all the features you’d expect in a coding app. It’s written in C++ and runs on Windows. It’s open source and was released under the GPL license.

The portable edition includes all the features of the regular version. It has multi-view, supports a multi-language environment, a WYSIWYG editor, auto-complete, syntax highlighting and folding, and macro recording and playback, among its other features. It’s a great lightweight coding app.

Nvu Portable

Nvu Portable is the portable edition of Nvu Web Authoring Software. It includes a WYSIWYG editor and powerful file management. It’s aimed at users who might not be particularly technically savvy and only have a limited knowledge (or none at all) of HTML and CSS.

The portable edition has all the features and capabilities of the regular version. It works on Windows systems, and was released under the open source GPL license.

Oiko CSS Editor

Oiko CSS Editor is a full-featured CSS, (X)HTML and XML editor in a portable format. It works on Windows 98 through XP. It’s a fairly robust editor, with an easy-to-use interface, grouped view of properties and selectors, a tree view of your CSS’s structure, and includes active preview in both IE and Mozilla browsers.

Graphics and Multimedia

Blender Portable

Blender Portable is a portable version of the Blender 3D rendering program. It works with the PortableApps.com platform. The portable version includes all the features of the regular version of Blender.

Blender has a range of features for rigging, modeling, animating and rendering 3D images. It has a fully customizable window layout and a non-overlaping, non-blocking UI. And it includes a built-in text editor for annotations and editing Python scripts.

GIMP Portable

GIMP Portable is a good alternative to Adobe Photoshop in a portable format. While GIMP’s user interface takes a bit of getting used to compared to other photo editing programs, it’s actually quite flexible.

The portable version of GIMP has all the features of the full version, including layers and filters. It can also be extended and expanded, just like the full version.

Lightscreen Portable

Lightscreen Portable is a portable app that runs on Windows and lets you take screenshots of the desktop of whatever computer you’re on. It will perform five configurable actions (to capture window, screen, etc.) and each has its own hotkey.

Lightscreen will save images in PNG, JPEG and common other image formats. It also has a delay function for taking screenshots. It runs as a hidden background process and is activated with one or more hotkeys.

Portable Audacity OS X

Portable Audacity is portable audio editing software for Mac OS X. Audacity has tons of features, including the ability to record live audio, edit (including the ability to edit and mix an unlimited number of tracks), add effects to audio files, and work with a variety of different file formats.

While the full version of Audacity is available for Windows, Mac OS X, and Linux machines, the portable version is available for Mac OS X and Windows. Considering it’s open source, it makes sense that a portable version for Linux would be developed if there’s enough demand.

Portable Inkscape OS X

Portable Inkscape is a portable vector graphics editing program. Inkskape has features similar to other vector graphics programs, including Illustrator, CorelDraw, and Xara X. It saves graphics in SVG (Scalable Vector Graphics) format.

There is extensive documentation available for Inkscape on their website, a big plus if you’re new to using it. The portable version is only available for Mac OS X, though the full version is also available for Linux and Windows.

FastStone Capture

FastStone Capture is a portable screen capture utility. You can capture anything on your screen: windows, full screen, rectangular regions, objecs, freehand regions, and even scrolling windows (a big plus over many other screen-capture programs, portable or not).

Other features include the ability to add text annotations to captures, resize them, and use hotkeys for specific functions. FastStone Capture only works on Windows systems, but is compatible with Windows98 right up through Vista.

Fotografix

Fotografix is a portable graphics program that lets you both edit and create images. There are brush tools, support for custom brushes, layer and channel support (including adjustment layers and masking), and a variety of other tools included.

One of Fotografix’s biggest advantages, though, is it’s tiny file size: it’s only 367KB. If you want a really lightweight and easy to use graphics editor, Fotografix might be the right choice for you. However, it’s not as robust as a program like Photoshop, so keep that in mind.

Artweaver

Artweaver is a portable, freeware paint program. It lets you create sketches right from photos and includes a wide variety of brushes. It also lets you create new brushes and customize existing ones.

Artweaver also supports transparency and layers, and a variety of image formats (JPG, PNG, PSD, and more). It’s expandable via plugins, too. Artweaver works on Windows 2000, XP, or Vista.

VLC Media Player Portable

VLC Media Player Portable is a portable media player for using audio and video files. It will play MPEG-1, MPEG-2, MPEG-4, DivX, WMV, MP3, and a host of other file formats. And, in addition to playing your various media files, it can also act as a media server to stream in unicast or multicast in IPv4 or IPv6.

Winamp Lite

Winamp Lite is the portable version of Winamp MP3 player software. Skins and plugins are also portable, making this another great solution for listening to MP3s on the go. Portable setup is a bit involved but not particularly complicated.

File Management

FileZilla Portable

FileZilla Portable is another PortableApps.com application for FTP. It supports FTP, FTPS, and SFTP file transfers, as well as management for transferring large files (over 4GB). There are tons of configuration options. It also supports HTTP/1.1, SOCKS5 and FTP-proxy, and includes logging to file, synchronized directory browsing, and remote file search.

WinSCP Portable

WinSCP Portable is an FTP program for Windows that includes SFTP and SCP protocols and directory synchronization. It’s been around for awhile but performs all common file operations and has an integrated text editor. It also supports batch file scripting and a command-line interface in addition to a GUI.

7-Zip Portable

7-Zip Portable is a PortableApps.com program that lets you compress and uncompress a variety of archived file types, including 7z, ZIP, GZIP, BZIP2, TAR, and RAR files. It also supports creating encrypted 7z and ZIP archives and includes a powerful file manager. There are localizations for 63 languages available with the portable edition.

Toucan

Toucan lets Windows users back up and sync data between two drives (like your hard drive and USB drive). It’s completely portable and free to download. There are a variety of advanced backup settings you can use, including incremental backups with compression and advanced rulesets.

Testing

XAMPP

XAMPP is a complete, portable web server package of Apache, MySQL, PHP and Perl. It’s preconfigured, so all you need to do is unzip and install it. It includes phpMyAdmin, FileZilla FTP Server, SQLite, the Zend Optimizer, and MiniPerl, among other features. It’s a complete web, FTP and database server in a single package. There’s also a lite version that includes Apache, MySQL, phpMyAdmin, SQLite, and their related packages.

Portable Firefox

Portable Firefox is the portable edition of Mozilla Firefox. It’s a great app to take with you for working on other people’s computers, as you can store and access your own bookmarks, passwords, and preferences. The portable edition doesn’t leave anything behind on the computer you’re using, so you can be secure in saving your passwords and other information. It even appears to work with any extensions you install. It’s a PortableApps.com app, so it’s only available for Windows machines.

Don’t forget if you’re using Portable Firefox to also make sure you’ve downloaded some of the useful web development add-ons available.

Firebug – For viewing and on-page editing of HTML, CSS, and JavaScript.
CSS Viewer – A basic CSS property viewer.
HTML Validator – An HTML validator toolbar for Firefox.
Web Developer – Adds a menu and toolbar with various tools for web developers.
CodeBurner – An HTML and CSS reference guide built into Firefox.

Instant Rails

Instant Rails is a Ruby runtime solution with Ruby on Rails, Apache and MySQL, all ready to run. All you have to do is put it in the directory you choose and run it; there are no installation files.

Server2Go

Server2Go is a server package available with a variety of different configurations. There are packages that include Apache, PHP and SQLite; Apache, PHP, SQLite, and MySQL; Apache, PHP, SQLite, MySQL, and Perl; as well as mini packages (with only the needed files) and a “plain vanilla” package that doesn’t include PHP, Perl, or MySQL).

Portable Chrome

Portable Chrome is the portable vesion of Google’s Chrome browser. It includes all the features of the regular Chrome browser, including better stability and speed, tabbed browsing, and search right from the address bar.

Opera@USB

Opera@USB is a portable version of the Opera web browser. It’s very similar to the desktop version, though the differences aren’t expounded upon in the documentation for the app. The full version (and presumably the portable version) includes tabbed browsing, a password manager, an inline spell checker, and support for savable browsing sessions.

MoWeS Portable

MoWeS Portable is a portable web server for Windows. It’s been tested on Windows 98 through Vista. It’s free and released under the GNU/GPL license. The server is based on Apache, MySQL, and PHP. The biggest difference between MoWeS and many other portable server packages is that you can download MoWeS preconfigured with a variety of software options, including TYPO3, WordPress, PHPMyAdmin, OS Commerce, Drupal, Mambo, Joomla!, and others.

Planning and Productivity

Dia Portable

Dia Portable is a diagramming app similar to Microsoft Visio. It’s more focused on informal diagrams than Visio, though, and is great for casual use. It works with XML files, and also includes the ability to export files to EPS, SVG, PNG, WMF, and XFIG files. Dia also lets you print diagrams (including multi-page ones).

It’s compatible with Linux, Unix, and Windows systems. It can be used to draw UML diagrams, flowcharts, and other types of diagrams.

Mozilla Sunbird, Portable Edition

Mozilla Sunbird, Portable Edition is a Windows and Linux compatible calendar application. It’s a full-featured, stand-alone calendar application, perfect for scheduling and simple project management.

ToDoList

ToDoList is a portable project management and task list manager. It lets you subdivide tasks an unlimited number of times to make them more manageable. And it saves your task lists in XML format so that you can format them with stylesheets.

ToDoList is under constant development and is suitable for IT project management as well as more general task management (like the GTD method). There are French and Spanish versions available in addition to English.

Task Coach Portable

Task Coach Portable is another task manager that lets you manage your to-do list and tasks on the go. Features include an easy-to-use UI that makes it easy to create, organize, and manage tasks, as well as the ability to set a budget for particular tasks, set start dates and deadlines for each task, and more.

Business

GnuCash Portable

GnuCash Portable is another PortableApps.com application. It’s an open source financial management app with most of the features of commercial finance programs. It works with double-entry accounting, stock/bond/mutual fund accounts, and can handle invoices and accounts payable and receivable.

GnuCash is perfect for small business accounting and bookkeeping. It uses a checkbook-style register to make it easier for new users to learn. It also handles reports and graphs, multiple currencies, statement reconciliation, and more.

OpenOffice.org Portable

OpenOffice.org Portable is the PortableApps.com version of the open source OpenOffice.org suite of business programs. It includes all of the regular OpenOffice.org applications: Writer (a word processor), Calc (spreadsheets), Impress (presentations), Draw (graphics), and Base (database).

OpenOffice.org is a great alternative to Microsoft Office and provides much of the same functionality in a free and open source package. It’s very easy to use in comparison with many other office suites, and it’s free.

AbiWord Portable

AbiWord Portable is a word processor that can open a variety of files from other word processing programs, including Microsoft Word, Word Perfect, Open Document (OpenOffice.org), Office Open XML, RTF, HTML, and more. It includes all the basic functions you’d expect in a word processor, including spelling and grammar check and mail merge.

The portable version is built on the PortableApps.com platform and works on Windows 2000, XP, or Vista. There are plugins available to extend AbiWord’s functionality.

Other Useful Apps

Sumatra PDF

Sumatra PDF is a lightweight, portable, free PDF viewer for Windows. It’s designed to be portable, so there’s no “portable version” per se. It works with a variety of keyboard shortcuts, and can be configured as your primary PDF viewer.

Eraser Portable

Eraser Portable is a portable version of the Eraser security app. Eraser allows you to completely delete files from your harddrive by overwriting them multiple times with predefined patterns. It’s free and open source (under the GNU General Public License). This is a particularly useful app to have if you work with sensitive information on a regular basis, as it can be used to completely remove any traces of an original file.

OperaTor

OperaTor combines Opera and Tor to let you browse anonymously from any computer. No data is stored on the computer you’ve plugged your USB drive or other portable device into, making it particularly useful if you’re using a public computer. It also includes Polipo, a caching web proxy, adding an extra layer of anonymity and security.

Portable Windows Live Messenger 2009

If you need to keep in touch with your colleagues or clients, then Portable Windows Live Messenger2009 is a great way to do it. It’s a fully functional version of Windows Live Messenger 2009, just in a portable format you can use from any USB drive. It’s useful for a lot more than just instant messaging though: you can use it to share documents, and communicate via voice and video.

Foxit Reader v3.0

The Portable Freeware Collection offers Foxit Reader V3.0. Use Foxit to open and read PDF documents on the go. Just be aware that according to the comments on the download page, it can be difficult to install and configure.

KeePass

KeePass is a password management program for Windows. It’s free and open source and can help you keep track of all your passwords for FPT accounts, email, website passwords, and more. It saves everything in a single database file that you can open either with a key or key file.

TrueCrypt

TrueCrupt is a portable encryption program that will create a virtual encrypted disk and mount it as a real disk. You can encrypt an entire partition or USB flash drive. It uses parallization and pipelining to let data be accessed as fast as if the drive wasn’t encrypted. Be aware that TrueCrypt does require administrator privileges in order to access files, which is a major drawback if you may need to use public computers.

Pidgin Portable 2.1.0

Pidgin Portable is the portable version of the Pidgin instant messaging client (formerly Gaim). It supports AOL, MSN, ICQ, Jabber, and Yahoo IM. You can add encryption plugins to it to enable secure messaging.

WinPT Portable

WinPT Portable lets you encrypt files on your flash drive and then unlock them without having any special software installed. It’s still in development, so it’s not entirely bug-free, but according to most reports it’s a very polished build. The only thing it requires to run is GnuPGP, which is also available as a portable app.

Trillian Anywhere

Trillian Anywhere lets you use the Trillian IM client from a USB drive or disk. It lets you take your contact list and preferences with you wherever you go and use a full-featured but portable version of Trillian from any computer with an internet connection.

Further Resources

100 Portable Apps for Your USB Stick (for Mac and Win)
This is an excellent roundup of useful apps from makeuseof.com, though it’s not specific to development and design apps.
PortableApps.com Suite and PortableApps.com Platform
Many of the apps in this post are built on the PortableApps.com Platform. PortableApps.com offers a huge variety of programs for use on a USB drive or other portable media. The suite includes a web browser, email client, office suite, calendar/scheduler, and other useful programs.M
FreeSMUG
FreeSMUG offers free open source software for Mac users. Some of their apps include Adium, Cyberduck, Vienna, and Newspeak.
Linux for Travelers
Linux for Travelers offers a ton of information on portable computing for Linux users.

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Tags: Photoshop Tutorial

How To Integrate Facebook With WordPress

Sep 14

Posted by Thiemo Fetzer in Developer's Toolbox, Facebook, WordPress | No Comments

Facebook is one of those Web phenomena that impress everyone with numbers. To cite some: about 250 million users are on Facebook, and together they spend more than 5 billion minutes on Facebook… every day. These numbers suggest that we should start thinking about how to use Facebook for blogging or vice versa.

We did some research to find out how the integration of Facebook with WordPress and vice versa works, or — in other words — how you can present your WordPress blog on Facebook or use the functionality of Facebook on your WordPress-powered blog. Both of these can be achieved with a set of WordPress plug-ins, a couple of which we’ll present here in detail.

1. Integrating A WordPress Blog Into Facebook

Integrating a WordPress blog into Facebook is actually quite simply achieved via the Facebook API. The Facebook API makes programming applications that can be spread via Facebook almost a piece of cake. A lot of interactive browser games are on Facebook, such as the currently popular “Mafia Wars.” This game allows users to start a mafia family with their friends, with the goal of becoming an important figure in the virtual underground crime scene. To start a clan, you invite other friends on the network to join. This is the growth strategy of any application on Facebook: the simple snowball effect.

The applications sustain themselves through earnings generated by displaying advertisements, which also makes Facebook an even more attractive platform to develop on. This symbiosis generates growth for both Facebook and its applications.

Plug-In Installation and Configuration

John Eckman developed the WordPress plug-in Wordbook in early 2009. This plug-in allows WordPress blog owners to integrate their blog in Facebook. This gives a blog two lives: one as an application on Facebook (such as, for example, my private FreigeistBlog) and one at the original URL (http://freigeist.devmag.net).

To access a blog via Facebook, you need to first grant access to the application. To do this, go to the so-called “canvas” page, which is where the Facebook twin of the blog lives (my example). However, granting access to the blog’s application means that the administrator of the blog also has access to information about you as a user (this is what most applications aim for: information such as date of birth, gender and educational status allows them to display quite targeted ads).

The application we’re dealing with is a simple blog and, in this sense, quite innocent, but we should state outright that the Facebook API as it is now treats blogs and websites as applications, which may not be appropriate, given the issue mentioned above. Facebook users who authorize the blog application can now easly send comments and share posts from within Facebook. The data, however, is still stored in the original database on the server where the blog is installed.

This makes it look as though Facebook serves merely as a simple feed reader. Yet, we get some other benefits. The blog on Facebook can be used to create a community around it by taking advantage of Facebook’s snowball effect, because friends of the blog’s users will see in their activity stream that they have been participating on the blog. Furthermore, it means that Facebook users will see new posts from your blog whenever they sign in to Facebook and can easily follow comments, making your blog more accessible.

To create a Facebook twin of your blog, first you have to set up a new application. To do this, you need a Facebook account and have to register as a developer using the preceding link. All of this can be done in a few minutes.

Create a new Facebook application

Once you have agreed to the terms of use, give your application a name. Then you will receive your API key and a secret, which you will need later.

Settings for the Facebook application. Large view.

Then, you have to submit a so-called “post-authorize callback URL.” This is the address on your server to which Facebook will send a notice whenever a user authorizes access to the application. By the same logic, there is also the “post-remove callback URL,” which receives a notice when a user removes the application. Both of these events are handled by the Wordbook plug-in. You merely need to write the address of the blog’s root directory with a trailing slash.

Facebook application settings: Define callback URLs. Large view.

The third step is to claim your canvas page, which is the page through which a Facebook user accesses your blog, and a canvas callback URL, which is the page from which content is retrieved. Again, include a trailing slash, or else internal links on your blog won’t work with their Facebook twin.

Facebook application settings: Define canvas page. Large view.

Now you have some choices to make, namely, how to set up your canvas page. You have a choice between iFrame and FBML. FBML is a Facebook XML scheme with which you can use specific Facebook tags (such as tags to display user profiles). You can also use it to access certain Facebook procedures. However, the Wordbook plug-in works with iFrames, which allow Javascript and other tags, and which FBML does not support.

To distinguish between them rather crudely, you can say that iFrames give the developer more flexibility but, unlike FBML, restrict access to Facebook procedures. Another advantage of iFrames is that code that Facebook retrieves from the canvas callback URL need not be parsed by the FBML parser, which could yield a performance gain. With iFrames, only internal links on the blog need to be adjusted. And the “resizeable” option allows Facebook’s JavaScript code to adjust the size of the iFrame to Facebook’s layout.

Now the hard work is done. All that’s left is to install the Wordbook plug-in using the standard WordPress method: install and activate. Then you can change the plug-in’s settings on the settings panel, and here you will need your application ID and the secret. You also have to tell the plug-in where the canvas page is located, so that internal links can be adjusted.

Adjusting the settings of the Wordbook plug-in

And that’s it! If you want, you could activate or deactivate some other options, such as the commenting function and whether users can add your application to their profile by displaying the latest posts from your blog in their profile.

Browsing through the blog via Facebook. Large view.

The plug-in allows you to play around a little bit. But as we said, you are somewhat limited in how fully you can integrate your blog into the Facebook canvas. But the next plug-in we’ll look at integrates a bit of Facebook into your blog.

2. Integrating Facebook In A WordPress Blog

To begin, a little history lesson is needed. Many users do not like having to register for each blog where they would like to post comments, especially if they already have accounts on so many other social networks, such as Facebook and MySpace. So a single online ID for several purposes would be ideal, wouldn’t it? That’s the idea behind the OpenID protocol, which started in 2005. It decentralizes the identification of users for various providers and services. In essence, you can create an account on Facebook and connect it to services such as MySpace or even a personal blog. If you want to change your profile for all of these services, that too is decentralized: you simply change the settings on your Facebook account. OpenID is a chance to make the Web and its services more easily accessible. There are reasonable risks and concerns involved, but also many opportunities.

Facebook announced in 2007 that it would implement OpenID, and others followed, which explains why we now find more and more buttons that say “Connect with Facebook” or “Google Friend Connect.” This leads us to our second plug-in, Facebook Connect WordPress plug-in, which almost seamlessly integrates Facebook into your blog.

The plug-in allows users to comment on a blog using their Facebook account; and if they are already signed in or on Facebook, they need not sign in again. Users do not have to register for a unique account on the blog because the plug-in retrieves the user’s information directly from the Facebook API. With access to the user profiles on Facebook, you can display your users’ profile pictures, which adds a personal touch to your blog.

The plug-in integrates a lot of Facebook functions: for example, users can send invitations and share stories and comments on Facebook, which gives your blog the benefit of word-of-mouth marketing. To do this, you need to activate the plug-in option that publishes a user’s activity in their respective activity feed. Last but not least, you can enable a gadget that displays the profile pictures of your blog’s most recent visitors, similar to “Google Friend Connect.”

Facebook Connect implemented on sociable.es (in Spanish)

This plug-in essentially does the opposite of Wordbook (which integrates Facebook functionality into your blog).

Plug-In Installation and Configuration

Again, as in the previous section, you will need to create a new Facebook application.

Creating a new Facebook application. Large view.

You will also have to define the callback URLs, which point to the root of your blog.

Defining callback URLs for the new application. Large view.

Again, most of the work is now done, and you can soon start having fun and being creative. Just a few steps remain. First, download the plug-in from the website (see link above) and upload and enable it. A big part of the plug-in consists of the “Facebook Connect” library, which is provided by Facebook. You might stumble over the two xd_reciever files, one in HTML and one in PHP. They play a key role: enabling the so-called cross-domain communication (hence, the xd) between your blog and Facebook.

So why are these needed? Typically, HTTP requests are sent with the XMLHttpRequest object. However, the typical security settings on browsers allow XMLHttpRequest to send requests only to the domain where the original request was sent to. In our case, requests are send to and from Facebook. This cross-domain communication is achieved with iFrame cross-domain communication. With this, the application opens an iFrame on facebook.com with the relevant requests; for example, to retrieve information on whether a user is logged into Facebook.

These requests are sent to Facebook through the iFrame via the URL, with which the iFrame is opened. The request is checked, and now the Facebook script that was called via the iFrame opens an iFrame on the application page, where the outcome of the request is sent to, again with the query string of the URL. The result of any requests lands in the query string of the xd_receiver.htm file on your own server. This circumvents the problem of being unable to use XMLHttpRequest.

Now back to the plug-in. Once you have installed and activated the plug-in, you can add the plug-in as a widget to your blog’s sidebar. However, you first need to enter your API key and secret.

Settings for Facebook Connect WordPress plug-in. Large view.

As you will see, a whole lot of options are enabled by default, such as automatically publishing comments if they are posted through a Facebook account (the rationale being that you don’t have to moderate them because they come from actual people using Facebook and not spambots).

If you activate the sharing function, the plug-in adds a “Share” button automatically below each post. You can also activate the option that publishes a user’s comments in their activity feed on Facebook, thus making their activity on your blog visible to their friends.

After you have adjusted the settings, you will be notified that you need to define templates for the presentation. These need to be “synchronized” with Facebook. Scroll down a bit to generate and activate these templates. You can change the language manually here as well.

Adjust Facebook Connect’s template settings. Large view.

The first template controls how a user’s activity is posted in their activity feed on Facebook. However, you can also include the activity feed of your users in your gadget, as done on sociable.es (see link above). The last step is to go to the widget set-up page and include the gadget as a widget in your sidebar.

Including the Facebook Connect widget in the sidebar

Here again, you have some choice over the configuration, especially with regard to changing the language, showing a big or small “Connect to Facebook” button, etc. After installing the plug-in, you may want to see what else you can do with it. The implementation on sociable.es is quite a nice one.

Further Resources

These two plug-ins are quite specific in what they do. However, a wide variety of Facebook plug-ins are available for platforms other WordPress. Here is a list, certainly not comprehensive:

Movable Type
A plug-in by Six Apart for adding Facebook Connect to a Movable Type blog, allowing any Facebook user to sign in. It is still in beta.
WordPress-FacebookConnect
This plug-in is quite similar to the one on sociable.es. It has the same features, such as single sign-on, publishing comments to news feeds and displaying profile pictures. However, it has not been updated since the beginning of the year. Still, there is a nice tutorial by the developer Adam Breckler.
WordPress Fotobook
With this WordPress plug-in, you can import all of your photo albums from Facebook onto a WordPress page.
Drupal’s Facebook Connect module
With this Drupal module, you can allow Facebook users to connect to your blog through their account. Similar to the plug-in by sociable.es.
Gigya WordPress plug-in
This plug-in integrates not only Facebook but Twitter, MySpace and other OpenID providers into your blog for community building.
StatusPress
This small plug-in displays your Facebook, Twitter or Last.fm status on your blog.
Quailpress
Integrate Facebook-sharing functionality on your blog with this plug-in. However, it has not been actively developed for some time. And with the sociable.es plug-in, it is practically redundant.

About the Author

Thiemo Fetzer is pursuing a PhD in Economics at the London School of Economics. He has been publishing articles on programming in PHP for more than 8 years in German print and online magazines such as Dr.Web, his own website Devmag and his blog.

(al)

Tags: Photoshop Tutorial

Data Visualization and Infographics Resources

Sep 11

Posted by Cameron Chapman in Developer's Toolbox, resources, visualizations | No Comments

Data visualizations and infographics can make complex datasets easier to understand and comprehend. By creating a graphical represenatation of data and statistics, complicated concepts and information can make more sense in less time.

Many visualizations focus on representing a specific set of data or statistical information. Others focus on less-concrete topics, providing a visual representation of abstract concepts. Generally speaking, the first type appear more like graphs or charts and the latter are often more creative and imaginative.

But visualizations and infographics can be used poorly, too. Putting in too much information (or not enough), using improper formats for the information provided, and other failures are common. Below are more than 25 useful resources for infographics and data visualization. Most are galleries of effective graphics though some also provide how-to information for information designers.

Also consider our previous articles:

Data Visualizations and Infographics which lists examples and types of infographics and data visualizations.
Data Visualization: Modern Approaches showcases modern examples of data visualization and infographics.

1. Data Visualization Sites

Here are some blogs and website that provide great information for information designers, including how-to articles, visualization showcases and galleries, and other resources. Some even include tools for creating your own visualizations.

Strange Maps

Strange Maps features only map-based graphics, both modern and historical. The commentary accompanying the maps is what really makes the site interesting, especially on the historic maps.

Wall Stats

Wall Stats includes original infographics depicting discretionary spending in the United States. The graphics are also available in poster form. They also provide coverage of other infographics about political and economic topics.

Visual Complexity

Visual Complexity – This site showcases infographics and data visualizations from a wide variety of sources and has nearly 700 projects included. Graphics are categorized to make finding specific projects easier and plenty of information is included about each image.

Cool Infographics

Cool Infographics is an awesome blog that chronicles infographics and data visualizations from all over the web. They cover almost every topic you could think of. Posts are tagged to make it easier to find the specific kinds of graphics you’re looking for.

Data Mining

Data Mining is a blog that covers data visualization, social media and data mining. They aggregate tons of infographics from other sites, including National Geographic and The Economist.

Edward Tufte

This site presents a wide variety of infographics from multiple sources interspersed with other images. The commentary about the graphics is what sets it apart, and there are some incredibly interesting images included.

Infographics News

Infographics News is dedicated primarily to news infographics. They also cover news related to data visualization and unusual infographics.

Information Aesthetics

Information Aesthetics is a blog that details beautiful infographics and data visualizations from all over the web. Grahpics featured include political, financial and econimic, and other visualizations, dating as far back as December 2004.

Chart Porn

Chart Porn features charts and graphs from all over the web, all beautifully designed and covering a wide variety of topics. Posts are categorized by topic and source to make it easier to find specific charts.

Behance Network

The Behance Network has tags for Information Architecture and specifically for infographics. They have dozens of graphics in either category from a selection of graphic artists.

Good Magazine

Good Magazine presents some of the most interesting original infographics out there. They’ve created infographics on everything from water issues to the growth of food stamps to Obama’s effect on voter turnout.

Matthew Ericson

The blog of infographic designer Matthew Ericson that includes visualizations created by others as well as himself. Recently featured visualizations include a map of murders in New York City and an industrial production data visualization.

NiXLOG Infographics

NiXLOG has a great infographics section that includes an aggregation of infographics from all over the web. There’s also an original infographic of the evolution of Apple computers and their adoption by consumers.

Virtual Water

Virtual Water is a specialized blog covering the usage of the virtual water content infographic poster and the information it contains. They provide the info from the poster as well as links to publications that have used it (in whole or in part) and other infographic-related content.

History Shots

History Shots is a commercial site that sells infographic and visualization products (posters, notecards, etc.) for a variety of topics. Most of their images focus on historic events, time periods and subjects and you can browse based on political, military, sports, or general graphics. It’s an incredibly interesting site and you can zoom into the graphics shown to read them onscreen.

Flowing Data

Flowing Data offers up some amazing infographics and visualizations, with their own dedicated category. They’ve covered the best beer in the U.S., wine personality profiles, the Kennedy family tree, and the religious geography of the United States, among tons of other awesome graphics.

Many Eyes

Many Eyes is a data visualization site that offers tools for creating your own visualizations as well as for browsing infographics created by others. There are already thousands of visualizations included on the site.

The New York Times

While you’ll have to search around a bit to find the best infographics on The New York Times site, it’s definitely worth the effort. They have some of the best infographics in the business representing and breaking down really complex data sets so their average reader can easily understand what’s actually going on.

Nicolasrapp.com

nicolasrapp.com is an information design blog that covers primarily the infographics and data visualizations the author creates for The Associated Press.

DataViz

DataViz showcases images of beautiful data visualizations from all over the web. No commentary is included, but the images really speak for themselves.

iGraphics Explained

iGraphics Explained – This blog aims to shed some light on the world of infographics and data visualizations by explaining their effectiveness and how they were done. They showcase some beautiful graphics from sources all over the internet, so it’s a great place to go for inspiration and to see what kinds of graphics work and which kinds don’t.

Simple Complexity

Simple Complexity – This site showcases data visualizations that take complex data sets and display them in an easier-to-understand format that can help make sense of their true meaning. They showcase infographics from all over the net, as well as posting some how-to articles on creating better infographics.

Well-formed Data

Well-formed Data – This blog covers interface design, infographics and data visualizations, and statistics in general. The commentary accompanying the graphics is especially interesting, often delving deeper into the topics the visualizations cover.

Information is Beautiful

Information Is Beautiful – This blog celebrates beautiful information design, infographics, and data visualizations. They cover a wide variety of topics, create their own visualizations, and showcase those designed by others.

3. Flickr Pools for Infographics

Flickr pools can be a great source of information and inspiration. The ones featured below are dedicated to infographics and data visualizations, and most include examples from all over the world and a variety of different eras. They’re an excellent place to go to get ideas or see what infographics trends are around the globe.

Infografia | Infographics – A pool with more than 700 infographic images, posted by 120+ members.

Infografistas.com / Infographics News – This pool has nearly 350 items posted, all data visualizations and infographics from a huge variety of sources.

Visual Information – A pool with nearly 650 items posted. There are visualizations for everything from restaurant spending to library maps.

The Info Graphics Pool – This seems to be the largest Flickr pool dedicated to infographics and data visualizations, with more than 700 members and 1800+ items included.

About the author

Tags: Photoshop Tutorial

35 Excellent Wireframing Resources

Sep 1

Posted by Cameron Chapman in Developer's Toolbox, drafts, prototyping, wireframes | No Comments

Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.

Below are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.

1. Wireframing Articles

Here are more than twenty wireframing articles, guides, and tutorials to help you improve your wireframing process. There’s information on everything from paper wireframing techniques to using programs like Adobe Illustrator for the wireframing stage of your designs.

Wireframes Magazine
This site offers tons of resources and articles about wireframing. They include wireframe samples, UI tools, and job listings, as well as a place for designers to share their wireframes and wireframing tips. Popular articles have covered prototyping with the 960.gs grid system, graph paper sketch layouts, and wireframe moodboards.

Wire Frame Your Site
A great introduction to the benefits of wireframing from Sitepoint. It offers a three-step approach to wireframing in addition to expounding on the benefits of using wireframes, including their ability to let you foresee potential problems before you get into the nitty-gritty of designing.

Ajax Wireframing Approaches
A post in a series from Particletree about prototyping Ajax, this covers wireframing techniques. This article covers three excellent methods of wireframing dynamic content: Keyframing, stacking and TOP (Turn On Possibilities), as well as outlining the benefits and drawbacks of each.

The Importance of Wireframes in Web Design and 9 Tools to Create Wireframes
A great overview of why wireframing is a good idea, along with tools for creating your own. This is a really comprehensive article that covers everything from creating wireframes to working with clients during the wireframing process to the benefits of wireframing over visual design in the early stages of a website design.

20 Steps to Better Wireframing
An awesome collection of twenty tips for creating better wireframes. Some of the objectives covered include being clear about your objectives, getting everyone involved and avoiding over-designing your wireframe. Added up, these tips should make anyone’s wireframing process easier and more efficient.

Get Wireframing: The All-In-One Guide
A complete roundup of wireframing guides, techniques, tools, and more. It’s a great resource post with links to other sites, including a section for techniques, tools, examples, paper prototyping, and wireframing articles, among other links.

The Importance of Wireframing
A great article on why you should wireframe, along with resources to get your started. It’s a great rundown of the benefits of wireframing, including its ability to help clients focus and what they can teach you about your clients.

Pwireframing: Paper Wireframing
This is probably one of my favorite wireframing techniques. It’s a paper-based method, but goes way beyond just making some rough sketches. The photos included really help solidify the technique in your mind.

Shades of Gray: Wireframes as Thinking Device
An article detailing tne designer’s reasons for using wireframes and their purpose. It really covers the personal wireframing experience of the author, including what they get from wireframing beyond the obvious results. Examples are included (both the wireframes and final site design).

Wireframing Over the Shoulder
A video showing a full wireframing process from start to finish by From the Couch. This is an actual fast-forwarded video of a designer sketching out a complete wireframe of a real site on paper.

The ‘Boxing Glove’ Wireframing Technique
A guide to a big-picture wireframing technique. This is an incredibly simple and straight-forward technique that emphasizes three elements wireframes should help to clarify: proposition, concept, and context.

Framing the Problem
An article about wireframing from ClickZ. This article focuses on creating wireframes that answer three simple questions: What types of visitors need to be persuaded? What actions do they need to take? What information do they need to take action?

SEO Wireframing
A guide to wireframing for search engine optimization purposes from SEOmoz. It describes the wireframing process strictly from an SEO perspective and reminds designers to keep in mind things like key functions for each page and building navigation with relevant keywords.

HTML Wireframes and Prototypes: All Gain and No Pain
A guide to using HTML for wireframing and prototyping websites from Boxes and Arrows. It touts the benefits of creating HTML wireframes over visual-only types and offers up extensive information about creating your own HTML versions.

The Ancient Art of Wireframing
A look at the history and benefits of wireframing. It also looks at more modern techniques appropriate for dynamic websites and offers up new standards for contemporary wireframes.

“I Need to See It”—Wireframing for a Richer Web
A discussion of some of the issues and solutions for wireframing rich media applications. This article also talks about the benefits of both interactive and “high-fidelity” wireframes, including definitions for each and how to go about creating each.

Better Perspective in Wireframing
A huge list of tips for creating better wireframes. It outlines tips like putting functionality first, focusing on the user experience and working to a deadline.

Wireframing Using InDesign
A downloadable guide to wireframing using Adobe InDesign, along with a sample file you can experiment with. The content comes partially from a workshop that was presented at a Communication and Multimedia Design course at Rotterdam about wireframing.

I <3 Wireframes
This site aggregates wireframe images from Flickr. It’s a great place to check out if you’re not sure what method of wireframing will work best for you, or if you just want to see how other people are approaching wireframing.

Website Wireframes
This is a great overview of wireframing, including brief reviews of a number of wireframing tools. It includes tips for creating wireframes and an overview of the tools available for it.

Wireframing Web Applications
An article focused specifically on wireframing web apps as opposed to less complicated websites. This is an excellent guide to the particular challenges presented when wireframing dynamic applications and includes an overview of tools appropriate for creating dynamic wireframes.

Content Wireframing: Ducks Meet Row.
A great guide to wireframing your content. This article covers the particular challenges and requirements of wireframing a site’s content, as opposed to just it’s structure and functionality.

How to Create Website Wireframes
A complete wireframing how-to from About.com. This article is broken down into four parts: the focus of wireframes, what a wireframe should include, how to create a wireframe and the benefits of wireframing.

How to Wireframe
Here’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward.

Speed Wireframing with Nick Finck
A video outlining Nick Finck’s wireframing process. The wireframe created is done using OmniGraffle and a wireframe stencil kit.

2. Wireframing and Mockup Tools

There are a number of tools available beyond just pen and paper to help you build wireframes for websites and online apps. Below are a few options, as well as some roundup posts to help you choose the right solution for you.

Pencil Project
A Firefox plugin that lets you do GUI prototyping right in your browser. It includes all the standard drawing tools you’d expect, plus it’s cross-platform compatible and can accept user-defined stencils.

Web Design: Top 5 Wireframing Tools
A review of five wireframing tools from CMS Wire. Tools included are OmniGraffle, MockupScreens, iRise, Axure, and MindJet MindManager.

iPlotz
A tool to create clickable and navigable website mockups. There are free and paid plans available, with prices ranging up to $495.

Jumpchart
Another tool for creating clickable website mockups. Jumpstart has free and paid plans, with prices ranging up to $50/month.

Wireframes
A brief article with a huge list of wireframing software, both desktop and web-based.

Hot Gloo
A wireframing app designed for designers and programmers. The beta version is currently free to use.

Building a Website Wireframe in Illustrator
A great guide to using Adobe Illustrator for your wireframes. This is a very complete tutorial, complete with screenshots taken during the process.

Balsamiq Mockups
A web-based wireframing and mockup tool. There are free and paid version available. The paid one is $79.

Wireframing Web Applications
An article comparing three different wireframing tools, both desktop and web-based, including Gliffy Online and Balsamiq Mockups.

Templatr
While Templatr is generally thought of as a template generator, it can work really well as a wireframing program. Just choose the layout you want to use and customize it as much or as little as you want.

About the author

Tags: Photoshop Tutorial

50 Free Resources That Will Improve Your Photography Skills

Aug 30

Posted by Andrew Gibson in Developer's Toolbox, Photography | No Comments

Photography is a wonderful hobby enjoyed by lots of people all over the world. It’s a very enjoyable passtime, but also a very technical one. There’s a bewildering range of cameras, lenses and accessories, and photographers also have to get to grips with computers and image editing software packages. It can get very confusing, especially for newcomers to the hobby, and there always seems to be something to new to learn, even for experienced photographers.

With this in mind we’ve put together a list of over 50 free resources that will be useful to anyone involved in photography. We’ve compiled a list of the best and most comprehensive websites that will help you get the most out of your photography equipment. You’ll find a gold mine of articles on equipment and technique, plus advice from some of the most active and well-known professional photographers practising today.

We’ve divided these websites into categories for easy reference, but please bear in mind that many of these websites deal with more than topic. Many talk about both photography techniques and camera equipment, for example. We’ve categorised them according to how we think you will find them most useful. The resources section at the bottom of the article has links to more articles about photography websites, so check them out.

Beginner’s Zone

These websites are an excellent place to start for beginners. They have content for more advanced users too.

Digital Photography School
Very comprehensive photography resource. Lots of inspirational and informative articles.

Photodoto
Click on the Photography 101 link for an excellent set of articles for beginners.

About.com: Photography
Photography articles and techniques from the team at About.com.

Inspiration

The EOScars
More and more digital SLRs are coming with a movie recording mode. The highest spec models rival the quality of high end movie recording equipment and have been used to shoot music videos and movie trailers. The EOScars compiles the best movies recorded with the Canon EOS 5D Mark II.

Photography Now
Portfolios from past masters and contemporary greats.

World Press Photo
Anyone interested in photojournalism needs to check out this website. You can look at the winning images from the annual World Press Photo Contest and read interviews with professional photojournalists.

National Geographic Photography
Beautiful showcases of inspirational photography plus tips and advice from National Geographic photojournalists.

Exposure Compensation
Focusing on the work of inspirational photographers from around the world.

Technical Stuff

Cambridge in Colour
A series of very technical tutorials about aspects of digital photography such as camera sensors, histograms, colour management and autofocus.

Luminous Landscape
Another website with a comprehensive series of technical articles. One of the oldest and most prestigious photography websites around.

Depth of Field Master
Depth of field is commonly misunderstood. This website explains depth of field very well. You can also print out depth of field tables for your lenses - a must for landscape and architecture photographers.

Ken Rockwell
Straightforward technical advice from a pro photographer.

Canon Professional Network
Lots of technical advice for Canon users and inspiration from Canon’s Ambassadors - pro photographers using Canon equipment.

Canon Digital Learning Centre
More technical advice and tutorials for Canon users.

Nikon Digitutor
Camera specific tutorials for Nikon users.

Pentax User Magazine
The website of Pentax User Magazine, brought to you by the publishes of ePhotozine (another great photography resource), lots of useful info for Pentax camera owners.

Photo Notes
Technical articles. Some excellent summaries of camera specs - click the Lookup link to see them.

Photography Equipment

It’s stating the obvious but photography is impossible without the basic equipment of a camera or camera body and lens. There are hundreds of pieces of equipment and many brands to choose from. These websites will help you make sense of the choices.

Digital Photography Review
Comprehensive reviews on just about every new piece of digital photography equipment released over the last few years. The first stop for anyone interested in purchasing new gear or understanding more about the features of what they already own.

Radiant Lite
Lots of equipment reviews.

Photography and Photoshop Technique

Photo Answers
The official website of UK photography magazines Practical Photography and Digital Photo. Lots of news and technique to complement the magazines.

Strobist
All the information you need to use your camera’s portable flash unit to its full advantage.

Joe NcNally
Joe McNally built his reputation as a commercial photographer specialising in the use of Nikon’s portable flashes. He passes on his knowledge in his blog.

Photoshop Daily
Photoshop tutorials from the publishers of UK magazine Photoshop Creative.

Apogee Photo Magazine
Articles, tips, techniques and portfolios.

Photojojo
Technique and creative ideas.

Photography Blogs

Discussion about the topics and techniques that matter most to contemporary photographers.

The Online Photographer
Lots of articles about equipment, technique and the concepts behind photography.

Epic Edits
Lots of techniques and advice. The recent series about making fine art prints is very useful.

All Day I Dream of Photography
Lots of interesting photography articles.

Toy Cameras

Toy cameras have become very popular over the last few years. Learn all about them at these websites:

Holga Blog
All about holgas.

Toy Camera

Light Leaks
Print magazine featuring the best toy camera photography from around the web.

Square Frog
Life through a plastic lens - techniques and tips.

Four Corners Dark

Professional Photographers

One of the best ways to learn about photography is to study the work and ideas of professional photographers. Luckily, the trend for pros to blog about their work has created some priceless educational resources. Here are some of the best:

Chase Jarvis
Professional commercial photographer Chase Jarvis on the latest developments in the industry.

The Digital Trekker
Travel photographer Matt Brandon talks about his work and the ideas behind his photos.

Pixelated Image
Humanitarian photography David duChemin discusses his career and work.

Pixsylated
Syl Arena’s photography web magazine. Includes the excellent ‘Lessons I didn’t learn in photo school’ series.

Photo Smudger
London based snapper Tom Miles shares his real world experience. Essential reading for any student or photographer aspiring to work in London.

Digital Pro Talk
Social photographer David Ziser blogs about making a living in the competetive world of social photography.

Photocrati
Articles for photographers, by photographers. A wealth of information and insights from some of the world’s best pro photographers.

Interviews by Crash Taylor
Social and wedding photographer Crash Taylor interviews some of the best known names in the business. Essential reading for anyone who wants to break into wedding or social photography.

Other Useful Resources

Photo Compete
Once you’ve polished up your photography skills no doubt you’ll be tempted to enter a few photography competitions. Photo Compete has a listing of current photography competitions.

Photo Competitions
Even more photography competitions including the big name competitions from companies like Sony and National Geographic.

Pro-Imaging Photo Competitions
But make sure you read this before entering a photography competition. There are competitions that take away your copyright - this website lists the competitions that don’t.

Photopreneur
A ton of ideas for making money from your photos.

Photo Netcast
Photography podcasts bought to you by a team of passionate photographers.

Photographers who photograph need models, stylists and make-up artists. You can search for them at Model Mayhem and Purestorm. You can also search by geographical area there.

Purestorm

In light reports of photographers being harassed by security guards and police, it’s a good idea to know your rights. These websites have the information that you need:

Photographers’ legal rights - UK

Photographers’ legal rights - United States

Photographers’ legal rights - Australia

Last Click

JPG Mag
The magazine that publishes your photos and your articles.

Resources

About the author

Andrew Gibson is a photographer and writer. He runs Magical Places Fine Art, an online photography magazine and another great photography resource.

Tags: Photoshop Tutorial

10 Tools For Finding, Registering And Managing Domain Names

Aug 29

Posted by Timo Reitnauer in Developer's Toolbox, domains | No Comments

A domain name is the starting point for our online brands and identities, be it for a company, online application or a personal website. Some of us may own only one domain for a portfolio site or blog, whilst others have to manage domain names for clients or all kinds of projects. But even if you do not yet have a personal domain, as the Web becomes more pervasive in our lives, finding yourself a real home on the web becomes more of a neccessity.

Of course, social web services like Facebook, Twitter, etc. do indeed offer usernames, but only domains give us full ownership and control over branding and ultimately how we express ourselves online.

Many of the traditional sites that offer domain names are poorly organised, hard to navigate and covered in spammy ads. In this article we will have a look at a number of smart and user-centric domain tools which help you to find, register and manage domain names, other than the usual domain registrars or webhosting companies.

You may also be interested in the following articles:

1. Domainr - domain search engine

The popular Domainr service comes as easy and clean as it gets. They call themselves a “domain name search engine” and solely focus on the domain search experience. Searching for a domain name is very intuitive and fast indeed. If you found a name you can choose from a list of registrars where you can register the respective domain.

Apart from the standard .COM, .NET & .ORG domains, Domainr’s strength is surely the ability to find domain hacks with exotic country code top-level domain extensions e.g. burri.to (.TO - Tonga), lifestrea.ms (.MS - Montserrat) or cli.gs (South Georgia & the South Sandwich Islands).

Domainr makes the domain search process fun and is probably the easiest tool to find creative domain names in 2009.

2. Domaintyper - search & generate names

Domaintyper is another simple search tool for checking domain name availability and generating domain hacks but offers some nifty extras on top. One of them is a Web 2.0 Domain Name Generator that generates available names such as sixtor.com, snapsink.com, skafire.com, 6graph.com, threeserv.com or atomslot.com. These names can be registered through links to various registrars. The second highlight is the DomainTyper iPhone application which brings the search and recommendation feature to your iPhone so you can check domain names on the go.

Domaintyper is a well executed little project. Especially the domain name generator can be addictive.

3. Domain Pigeon - find available names

Domain Pigeon’s approach is different to the search tools mentioned before. It automatically generates lists of available domains as well as Twitter names. The names are displayed in different colors, depending on how many people have showed interest in a certain term. The darker the color the more popular the name. You can also order the lists by length, popularity and show only domains or Twitter usernames. Examples of generated domain names are ablebo.com, meliori.com, minecafe.com or shopshost.com.

Domain Pigeon is an ideal source of inspiration for domains and short available Twitter names.

4. Namethis - collaborative naming tool

Namethis cannot only be used for domains but also for names in general. Instead of spending hours and hours in brainstorming sessions you just have to describe a project or product and receive name suggestions by the Namethis community. The service costs a fee of $99 which is distributed to the members that suggested the top three naming ideas.

The Namethis community is a good resource to get ideas for your product or website.

5. Rage Domainer - Mac software

RAGE Software’s Domainer is a well designed Mac application for managing and tracking domain names. You can enter domains that you own along with some additional information or any other site you would like to monitor. It also shows domain-related data such as Page Rank, the amount of incoming Links, bookmarks on Delicious and Digg stories to a particular domain. Other useful features are syncing renewal dates with iCal, Smart Groups for organising and import / export of lists.

Domainer costs $39.95 USD and is the most advanced domain management solution for your Mac.

6. iWantMyName DomainApp - iPhone app

DomainApp is a free application from domain management service iWantMyName that lets you search and register domains directly from your iPhone. Like their website, the application is very clean, user-friendly and intuitive. The domain search covers many international domain extensions and results can be saved as bookmarks for future reference. To register domain names you need an account with iWantMyName and connect the application via a remote key.

The application is a valuable companion for brainstorming sessions, client meetings or the occasional fun domain registration.

7. Tweetname - register domains via Twitter

As the name Tweetname suggests, it is a service that offers domain name registration via Twitter. All you need is an account on their site and send a direct message with the name you want to the @tweetname Twitter account. You will get an instant reply whether the domain registration was successful or the name is already taken.

With Tweetname domain registration has never been more ubiquitous having hundreds of Twitter clients around. Whether you want to rely on Twitter for a domain registration is another question though.

8. Domain Punch - Windows software

Windows users find a domain portfolio software with Domain Punch Professional. Besides the portfolio management options, it also includes website monitoring options such as ping or an HTTP home page check and sends an email when the status of a domain changes. You can also save the login details to different domain registrars and login with a single click. Extensive filtering options, a domain name generator and availability checker are useful functions as well.

Domain Punch Professional is the most feature rich software for domain portfolio management.

9. DNZoom - online portfolio manager

A hosted domain management solution offers the all-in-one tool DNZoom. You can sign up for a free account and manage domains in a secure and automated way through an online interface even if they are registered with multiple domain registrars. Should you not use a domain, you have also the possibility to connect it to a parking company and earn some money. Domains can be organised in folders, categories and the domain detail view gives you additional data such as Alexa Stats, or whois information. An included domain suggestion tool where you can enter keywords and register domains complete the offering of DNZoom.

DNZoom seems to be more targeted at Domainers but its domain management functions are also suited for the general domain administrator.

10. Domain Portfolio Manager - PHP script

The Domain Portfolio Manager is a classic PHP / MySQL application for your own web space or server. It offers basic domain portfolio management functionality which should be enough for most users. Domains can be imported from CSV or text files, put in different categories defined by the user and lists are completely searchable. A showcase feature also allows you to sell domain names.

This web application has all features to keep track of your domains and is very practical for company intranets.

Tool Overview

Find domain names with:

Domainr - domain search engine
Domaintyper - search & generate names
Domain Pigeon - find available names
Namethis - collaborative naming tool

Register domains via:

DomainApp - iPhone application
Tweetname - Twitter domain registration

Manage your portfolio using:

Rage Domainer - Mac software
Domain Punch - Windows software
DNZoom - Hosted portfolio manager
Domain Portfolio Manager - PHP script

About the author

Timo Reitnauer is a domain industry expert and has been working for domain registrars in Germany, Australia and New Zealand since 2002. You should follow Timo on Twitter here.

Tags: Photoshop Tutorial

50 Useful New jQuery Techniques and Tutorials

Aug 24

Posted by Smashing Editorial in Developer's Toolbox, coding, jquery, programming | No Comments

The simplicity, advanced features and strong support are common arguments for developers preferring jQuery against other JavaScript-frameworks. In fact, jQuery is one of the most popular JavaScript frameworks, with powerful tools that can significantly improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

To help you improve your skills, in this article we present 50 useful new jQuery techniques and tutorials that have been created recently and that could make the development of your next website an easier and more interesting experience than the last.

50 Useful jQuery Techniques

Moving Boxes Carousel with jQuery
Many of the concepts presented in classic carousel tutorials are the same, so this tutorial will not throw a lot of source code at you. The big difference here is that there are buttons to change panels and the panels zoom in and out.

Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery
This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Make a Mega Drop-Down Menu with jQuery
So how would we go about implementing Mega drop down menus? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

Creating a Filterable Portfolio with jQuery
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

A fancy Apple.com-style search suggestion
“This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.”

Current Field Highlighting
As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. In this tutorial, we’ll improve our current field highlighting, using jQuery.

Creating a Dynamic Poll with jQuery and PHP
“When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.”

jQuery Infinite Carousel
This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself. For the latter see also Automatic Infinite Carousel.

De-Constructing Accordion and Hover Effects with jQuery
This video tutorial explains how the hover and accordeon effects on Tim Van Damme’s site can be achieved using jQuery.

Better form submission feedback with jQuery
Browsers fail to give users effective feedback when the user submits a form. Users respond by clicking the submit button over and over. The problem compounds when users find out they’ve been charged 5 times or when you receive 5 contact submissions. The solution is to replace the submit button with a friendly message letting the user know the form is working.

How to Make a Threadless Style T-Shirt Gallery
Here’s the gist: There’s a thumbnail which is a full sized image in a container div, which is smaller than the full sized image. The image is centered within it, but doesn’t show entirely because overflow:hidden is turned on. When the mouse hovers over the thumbnail, overflow:hidden gets turned off, and the entire image is displayed.

Create a gallery by using z-index and jQuery
In this tutorial you will learn to combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures. Also check out Enhancing the z-index Gallery with a Preloader.

Add a favicon near external links with jQuery
External links should always be marked distinctly in order to make it easy for readers to see them easily. You cann add a CSS class to all outgoing links using the pseudo-class a[href^=http]. A more dynamic solution is using the favicon.ico of the external site, if it is available of course.

Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.

Automatically generate table of contents using jQuery
“Some time ago, I was debating with my friends on the topic: is there any use of generating table of contents automatically. The conclusion was that it can be useful in cases when the reading material is long enough and table of contents (TOC) has a fixed position on the screen. This tutorial will show you how to create such TOC in just a few lines of code.”

Reddit-style Voting With PHP, MySQL And jQuery
If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.

Making a Content Slider with jQuery UI
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.

BBC Radio 1 Zoom Tabs
This tutorial explains how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP
This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.

Create a Digg-style post sharing tool with jQuery
We are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.

Using jQuery to play Media Files (MP3,WMA,etc,etc)
I’m going to show you the most productive way (I guess you could say that) of playing a MP3 ( You can also use WMA, and you file of choice) on your website.

Easy Retweet Button
Ever since I saw the Bit.ly JavaScript API I’ve been wanting to build a simple script for tracking the number of people visiting a blog post from Twitter. This past weekend I built a little script for doing just that - and in a completely unobtrusive manner. The script itself is completely standalone (no dependencies) and can be included in any page relatively painlessly. Additionally, since it’s just HTML, CSS, and JavaScript, it’s completely themeable and customizable to the style of your site.

Create an amazing music player using mouse gestures & hotkeys in jQuery
We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Creating a Virtual jQuery Keyboard
This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

jQuery Feed Menus

Automated image preloading for a snappy UI
We developed a solution that automates the age-old task of preloading images in web applications. It uses javascript and is packaged as a jQuery plugin, but the concept could easily be ported to other libraries or plain old Javascript as well.

Quick Tip: Resizing Images Based On Browser Window Size
In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor. For those looking for a real life example, Last.fm uses this technique on their artist pages.

Exactly Twitter like Follow and Remove buttons with jQuery and Ajax
This post updated exactly Twitter like follow and remove buttons with fadeOut and fadeIn effect.

Using Form Labels as Input Values with jQuery and CSS
I nice little additive to web forms is to put the input labels inside of the inputs box as the starting value. By using jQuery to bring the label in as the value we can archive the desired effect without impacting accessibility, since the label elements are still there. Then we can take it a step further by dynamically adding a class to the input and use CSS to style the form only if JavaScript is enabled. The search box at the top of this page is an example of this technique.

Pretty checkboxes with jQuery

jQuery and Ajax Best Demos Part-2
A small list of jQuery and Ajax demos.

A jQuery inline form validation, because validation is a mess Të Position Absolute
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

How to create a sliding image/reveal content with jquery
Someone asked me about this effect a while ago and i thought i should make a tutorial about this.

The youlove.us scrolling background effect explained
The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

Creating a Keyboard with CSS and jQuery
Sometimes it’s just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. I’ll show you how to build it today.

Portfolio Layout Idea Using jQuery

Creating the iPhone unlock screen using xHTML, CSS and jQuery
The iPhone: Everybody knows what it is, many people “played around” with the gadget and most people love it. I also own one of these amazing smartphones, and the looks of the software is really, really sleek and innovative (Just like we’re used from Apple). I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for webbrowsers. Today, I’m going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.

jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Create an Amazon Books Widget with jQuery and XML
It makes sense to forgo database tables and server-side code when you need to store a limited amount of non-sensitive data. Accessing this data can be a snap with jQuery because the library was built to traverse XML documents with ease. With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

Creating a table with dynamically highlighted columns like Crazy Egg\’s pricing table
I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

$Creating a table with dynamically highlighted columns like Crazy Egg\'s pricing table$

Make Your Header Responses To Mouse Movements with jParallax
jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Submit multiple forms with jQuery and Ajax.
How to submit multiple forms with jQuery and ajax.

Using jQuery To Manipulate and Filter Data
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, I will go over four techniques: hover effects, zebra rows, filtering, and sorting.

Building a jQuery Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

Horizontal Scroll Menu with jQuery Tutorial
In this tutorial you will learn how to create a scroll menu. In the final result you will be able to scroll up and down according to mouse-y axis and we’ll use jQuery.color to animate the background-color changes.

SpriteMenu
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. Instead of trying to manage huge amounts of images, everything is packed into just one file, which means the browser will only have to download one file instead of making multiple requests, and its just a lot easier to manage. The menu is displayed by manipulating the background-position property to display individual sprites in the image. There are no drop-downs attached to the menu, but it shouldn’t be hard to add them in which I may do in the future.

Slicker Show and Hide

jMar
We’re going to tell the script to loop through all of the comments on the page. If the member link on the current comment matches the member link in the profile, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately.

web2ajax
FaceBook Like - jQuery and autosuggest Search Engine

“Outside the Box” Navigation with jQuery
Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common

Animate Image Filling Up Using jQuery

Sexy Drop Down Menu w/ jQuery & CSS
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key × and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Creating a polaroid photo viewer with CSS3 and jQuery
Placing pictures on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.
Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery.

Super CSS Selector Support with jQuery
CSS provides a wide array of selectors to specify which elements should be subject to a particular style. CSS 2.1 gives web designers even more granularity when targeting specific elements. This is great in theory. But browser support for these selectors has lagged behind, and IE6 support is limited to only the most basic selectors. This has led to most folks working in the real world stashing the more advanced selectors away for rainy-day experimentation, or idle dreams about the eventual time when we can use these tools.

Would you like to see more similar round-ups on SM?

You may want to take a look at the following related posts:

Tags: Photoshop Tutorial

10 Useful WordPress Hook Hacks

Aug 18

Posted by Jean-Baptiste Jung in Developer's Toolbox, WordPress, hacks, hooks, techniques | No Comments

Hooks are very useful in WordPress. They allow you to “hook” a custom function to an existing function, which allows you to modify WordPress’ functionality without editing core files. In this article, we have compiled 10 extremely useful ready-to-use WordPress hooks, along with examples and coding explanations.

Want to learn more about CSS coding and web design? Take a look at our upcoming Smashing Book ($23.90 ~~$29.90~~, available worldwide). Pre-order now with 20% discount!

What Is A Hook?

To achieve a particular effect on a WordPress blog, you have to modify how WordPress works. Some of these modifications are made to what WordPress developers call “core files,” files required by WordPress to work properly.

But modifying core files is always a bad idea. It may create a security loophole. Also, you will have lost the modification when you upgrade your WordPress installation.

Still, developers need to overwrite some of WordPress’ functionality, which is why WordPress provides the Plugin API.

Hooks are one of the main building blocks of WordPress plug-ins. Almost every plug-in uses a hook to overwrite WordPress’ core functionality.

How to Use Hooks on Your WordPress Blog

Unless you’re writing a plug-in, you would write hooks in the functions.php file. This file is located in the wp-content/themes/yourtheme directory.

A hook, as you would expect, “hooks” one function to another. For example, you could write a custom function and attach it to one of WordPress’ core functions:

add_action ( 'publish_post', 'myCustomFunction' );

In this example, we hook our own custom function to WordPress’ publish-post function, which means that every time WordPress executes the publish-post function, it will also execute this hooked function.

Of course, we can also remove hooks using the remove_action() function:

remove_action ( 'publish_post', 'myCustomFunction' );

Hooks resources:

1. Disable WordPress’ Automatic Formatting

Screenshot

The problem.
You have probably noticed that, by default, WordPress converts normal quotes to “curly” quotes, and makes other little formatting changes when a post is displayed.

This is very cool for people who publish normal content, but anyone who uses their blog to discuss code will be annoyed because, when pasted in a text editor, code with curly quotes returns syntax errors.

The solution.
Simply paste the following code in your functions.php file:

function my_formatter($content) {
	$new_content = '';
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

	foreach ($pieces as $piece) {
		if (preg_match($pattern_contents, $piece, $matches)) {
			$new_content .= $matches[1];
		} else {
			$new_content .= wptexturize(wpautop($piece));
		}
	}

	return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'my_formatter', 99);

Once that’s done, you can use the [raw] shortcode in your posts:

[raw]This text will not be automatically formatted.[/raw]

Code explanation.
Our first step here was to create a function that uses a regular expression to find the [raw] shortcode in your posts’ content.

Then we hook our my_formatter() function to WordPress’ the_content() function, which means that my_formatter() will now be automatically called every time the_content() is called.

To remove the automatic formatting, we use the remove_filter() function, which lets you delete a hook on a specific function.

Source:

Disable WordPress automatic formatting on posts using a shortcode

2. Detect The Visitor’s Browser Using A Hook

Screenshot

The problem.
Cross-browser compatibility is probably the most common problem in Web development. You will save yourself a lot of headaches if you are able to detect the browsers that people use to visit your website and then create a custom class wrapped in the body tag. Few people are aware of it, but WordPress can already detect browsers, and a few global variables are available for us to use.

The solution.
Nothing hard here: just paste the code below in your functions.php file, then save the file and you’re done!

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

Once you have saved the file, the function will automatically add a CSS class to the body tag, as shown in the example below:

<body class="home blog logged-in safari">

Code explanation.
WordPress has global variables that return true if a visitor is using a particular browser. If the visitor’s browser is Google Chrome, the $is_chrome variable will return true. This is why we create the browser_body_class() function, which returns the name of the visitor’s browser. Once that’s done, we just hook the function to WordPress’ body_class() function.

Sources:

3. Define Default Text In TinyMCE

Screenshot

The problem.
Many bloggers almost always use the same layout for their blog posts. Posts on my own blog WpRecipes.com are always displayed the same way: some text, some code and then some more text.

What about saving time by forcing tinyMCE (WordPress’ visual editor) to display default text?

The solution.
Once again, hooks are the solution. Just open your functions.php file, paste the code and let the hooks work their magic!

<?php
add_filter('default_content', 'my_editor_content');

function my_editor_content( $content ) {
	$content = "If you enjoyed this post, make sure to subscribe to my rss feed.";
	return $content;
}
?>

Code explanation.
This code is powerful, and yet the method is so simple. Just create a function that returns the desired text (in this example, we have defined some simple text that asks readers to subscribe to the blog’s RSS feed), and hook the function to WordPress’ default_content() function. That’s it.

Sources:

4. Insert Content Automatically After Each Post

Screenshot

The problem.
Most blogs use the single.php template to insert some text, images or ads just after a post. Sure, this can be done by opening single.php and pasting the desired text after the the_content() function. But the text won’t show up in your RSS feed? Hooks and the technique described below solve this problem.

The solution.
One again, simply paste the code below in the functions.php file of your theme. That’s it.

function insertFootNote($content) {
        if(!is_feed() && !is_home()) {
                $content.= "<div class='subscribe'>";
                $content.= "<h4>Enjoyed this article?</h4>";
                $content.= "<p>Subscribe to our  <a href='http://feeds2.feedburner.com/WpRecipes'>RSS feed</a> and never miss a recipe!</p>";
                $content.= "</div>";
        }
        return $content;
}
add_filter ('the_content', 'insertFootNote');

Code explanation.
The purpose of the insertFootNote() function is pretty simple: it simply concatenates text of your choice to the $content variable, which contains your post’s content.

Then, our insertFootNote() function is hooked to the the_content() function, and it is automatically called every time the the_content is called. Using this function is basically the same as typing in the text at the end of each post.

Notice the (!is_feed) condition on line 2, which prevents the text from being inserted in the RSS feed. If you want the text to appear in your RSS feed, replace line 2 with the following:

if (!is_home()) {

Sources:

How to: Automatically insert content after each post

5. Disable The “Please Update Now” Message On WordPress Dashboard

Screenshot

The problem.
Your dashboard automatically lets you know when a new version of WordPress is released by inserting a message at the top of admin pages. This is definitely a good thing, because updating gives your blog the latest functions and security fixes. But if the blog is a client project, letting the client control updates may not be a good idea.

The solution.
Just paste these four lines of code in your functions.php file:

if (!current_user_can('edit_users')) {
  add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
  add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
}

Once you save functions.php, you won’t see the message on the dashboard.

Code explanation.
The first thing we do here is make sure the current user has sufficient administrative rights to update WordPress. Once we do that, we just create two hooks to overwrite the automatic check for updates and message display.

Sources:

How to: Disable the “Please update now” message on WP dashboard

6. Disable WordPress From Auto-Saving Posts

Screenshot
Photo by thatcanadiangirl

The problem.
As you type a post in the dashboard, WordPress periodically saves the content. This is a useful feature, but sometimes you may want to disable it.

The solution.
To disable WordPress’ auto-saving functionality, simply open the functions.php file and paste the following function:

function disableAutoSave(){
    wp_deregister_script('autosave');
}
add_action( 'wp_print_scripts', 'disableAutoSave' );

Code explanation.
Again, nothing hard about this code. We simply create an action (on line 4) and hook the disableAutoSave() function that we created on line 1 to WordPress’ wp_print_scripts().

The result is that our disableAutoSave() function is called every time WordPress executes wp_print_scripts(). This way, we make sure the auto-save functionality is disabled.

Sources:

WordPress hook: Disable posts auto-saving

7. Prevent Duplicate Content On Comment Pages

Screenshot

The problem.
Duplicate content is an SEO problem for many websites. It can also be a problem for your WordPress blog if you don’t apply a few tricks.

Introduced in version 2.7, paged comments is a great addition to WordPress because it lets bloggers split comments into multiple pages. The only problem, again, is the risk of duplicate content.

Let’s use the new rel="canonical" attribute to prevent duplicate content in paged comments.

The solution.
Simply paste the following code in your function.php file:

function canonical_for_comments() {
	global $cpage, $post;
	if ( $cpage > 1 ) :
		echo "\n";
	  	echo "<link rel='canonical' href='";
	  	echo get_permalink( $post->ID );
	  	echo "' />\n";
	 endif;
}

add_action( 'wp_head', 'canonical_for_comments' );

Code explanation.
First, we create a function to add the rel="canonical" attribute to comment pages, except page 1. Then we hook this function to WordPress’ wp_head() function. As simple as that!

Sources:

WordPress hack: Canonical links for comments

8. Get Entire Post Or Page In A PHP Variable

Screenshot

The problem.
Being able to get the entire current post or page as a PHP variable is definitely a good thing. You could, for example, replace parts of the content using the str_replace() PHP function, and much more.

The solution.
Once again, nothing hard. Just paste the following in your function.php file.

function callback($buffer) {
	// modify buffer here, and then return the updated code
	return $buffer;
}

function buffer_start() {
	ob_start("callback");
}

function buffer_end() {
	ob_end_flush();
}

add_action('wp_head', 'buffer_start');
add_action('wp_footer', 'buffer_end');

Code explanation.
To achieve this hack, we need three functions:

callback(): this function returns the whole page as a variable called $buffer. You can modify it before returning it by using regular expressions, for example.
buffer_start(): this function simply starts the buffer. It is hooked to WordPress’ wp_head() function.
buffer_end(): this function clears the buffer. It is hooked to WordPress’ wp_footer() function.

Once we have our function, we just hook it to existing WordPress functions.

Sources:

WordPress Hook for Entire Page Using Output Buffering

9. Use Hooks And Cron To Schedule Events

Screenshot

The problem.
You probably already know that WordPress can schedule events. For example, it can publish posts at preset dates and times. Using hooks and wp-cron, we can easily schedule our own events. In this example, we will get our WordPress blog to send us an email once hourly.

The solution.
Paste the following code block in the functions.php file of your theme.

if (!wp_next_scheduled('my_task_hook')) {
	wp_schedule_event( time(), 'hourly', 'my_task_hook' );
}

add_action( 'my_task_hook', 'my_task_function' ); 

function my_task_function() {
	wp_mail('you@yoursite.com', 'Automatic email', 'Hello, this is an automatically scheduled email from WordPress.');
}

Code explanation.
The first thing we did, of course, was create a function that performs the desired action. In this example, the function is called my_task_function() and it just sends an email to the specified email address.

To schedule an event, we have to use the wp_schedule_event() function. The last argument has to be a hook, which is why we hook our my_task_function() function to my_task_hook.

Sources:

Timing is everything: scheduling in WordPress

10. List All Hooked Functions

Screenshot

The problem.
When things go wrong, listing all hooked functions can be very useful for debugging.

The solution.
As with the others, this code has to be pasted in your functions.php file. When you have finished debugging, don’t forget to remove the code from functions.php, or else the debugging message will continue to appear.

function list_hooked_functions($tag=false){
 global $wp_filter;
 if ($tag) {
  $hook[$tag]=$wp_filter[$tag];
  if (!is_array($hook[$tag])) {
  trigger_error("Nothing found for '$tag' hook", E_USER_WARNING);
  return;
  }
 }
 else {
  $hook=$wp_filter;
  ksort($hook);
 }
 echo '<pre>';
 foreach($hook as $tag => $priority){
  echo "<br />&gt;&gt;&gt;&gt;&gt;\t<strong>$tag</strong><br />";
  ksort($priority);
  foreach($priority as $priority => $function){
  echo $priority;
  foreach($function as $name => $properties) echo "\t$name<br />";
  }
 }
 echo '</pre>';
 return;
}

Once that’s done, simply call the list_hooked_functions() function, as shown below, to print all hooked WordPress functions on your screen.

list_hooked_functions();

Code explanation.
If no hook name is provided to the function as an argument, then hooks are printed to the screen using the global variable $wp_filter. Alternatively, you can list one particular hook by passing its name as an attribute:

list_hooked_functions('wp_head');

Sources:

Rarst.net

You may be interested in the following related posts:

About the Author

This guest post was written by Jean-Baptiste Jung, a 27-year-old WordPress expert from Belgium. He blogs about WordPress at WpRecipes, about practical Web development tips at Cats Who Code and about Photoshop and Web design at PsdVibe. You can stay in touch with Jean by following him on Twitter.

Want to learn more about CSS coding and web design? Take a look at our upcoming Smashing Book ($23.90 ~~$29.90~~, available worldwide). Pre-order now with 20% discount!

(al)

Tags: Photoshop Tutorial

You are currently browsing the archives for the Developer's Toolbox category.
- 2009-
- 3D Effect
- about
- Abstract Effect
- adobe
- Ads
- adsense
- Advertising
- AJAX
- analytics
- android
- Animation
- anti-aliasing
- apple iphones
- applications
- apps
- Art
- Art And Entertainment
- articles
- Artworks
- Autos
- Backgrounds
- bauhaus
- behavioral
- black and white
- blogging
- blogs
- books
- branding
- brief
- Brushes
- Business
- buttons
- calendar
- calendars
- call to action
- cartoons
- cg
- charging
- cheat sheet
- checklists
- christmas
- clients
- CMS
- cmyk
- code generated art
- coding
- collage
- Colors
- Comedy
- coming soon
- comments
- communication
- computer generated
- Computers
- conferences
- contact
- content
- contests
- conversion
- conversions
- copyright
- copywriting
- corporate
- Crafts
- criticism
- CSS
- css 3
- css3
- culture
- deployment
- design
- design process
- Design Showcase
- Design Trends
- designers
- designs
- Desktop
- Developer's Toolbox
- developers-
- development
- Digital Photography
- domains
- downloads
- drafts
- Drawing Effect
- drawing–
- E Learning
- e-commerce
- e-mail
- ecommerce
- Education
- effective
- Effects
- email
- Entertainment
- event
- Events
- Facebook
- Featured
- festivals
- fibonacci
- Film
- filters
- findings
- fireworks
- fish
- flash
- float
- Fonts
- Free
- Free Photoshop
- freebies
- freelance
- freelancing
- future
- gadgets
- Games
- General Stuffs
- germany
- golden-ratio
- Google
- Graphic Design
- graphics
- gtd
- gui
- hacks
- history
- hooks
- How-To
- Howto
- html 5
- html5
- Icons
- ideas
- ie
- ie6
- illustrations
- illustrator
- Image
- inspiration
- interfaces
- Internet
- internet-explorer
- intrerviews
- invoice
- iphone
- iphones
- ireland
- israel
- Javascript
- jpeg
- jquery
- js
- kids
- launch
- launch page
- layouts
- library
- linux
- lists
- logo
- logo-design
- London
- mac
- macro
- magento
- maintenance
- management
- margins
- marketing
- Masks
- mathematics
- maya
- medical
- menus
- mobile
- module
- mootools
- motion graphics
- Motivational
- music
- navigation
- negative
- network
- networking
- new year
- newsletters
- Object
- offline-
- Online Education
- Online Promotion
- optimization
- Painting
- paintings
- papervision3d
- paths
- pdf
- People
- performance
- Photo Effect
- Photo Effects
- Photography
- Photos
- Photos for sale
- Photoshop
- Photoshop Article
- Photoshop News
- Photoshop Tutorial
- Photoshop Tutorials
- php
- plugins
- Png
- podcasting
- pop
- portable
- portfolio
- portfolios
- pricing
- print
- print design
- productivity
- programming
- progress
- project
- prototyping
- PSC News
- Psd
- publishing
- radar
- read more
- redesign
- research
- resources
- retro
- review
- rgb
- ruby
- scope
- sea life
- search
- security
- selectors
- Seo
- shopping
- shops
- Showcases
- shows
- sIFR
- signage
- signatures
- smashing
- snippets
- social
- Software
- space
- Stock
- stolen
- studies
- study
- svn
- swiss
- t-shirts
- tabs
- Tech
- techniques
- templates
- Text Effect
- Text Effects
- text replacement
- Texture & Patterns
- textures-
- theme
- themes
- time-management
- tips
- Tools
- toy camera
- trends
- tricks
- tutorial
- Tutorials
- tv
- twitter
- typography
- ui
- UI Design
- Uncategorized
- underwater
- underwater images
- Underwater Photos
- underwater pictures
- updates
- usability
- useful
- User Experience
- user-interface
- ux
- validation
- vectors
- vexel
- video
- vintage-
- Visual Art
- visualizations
- wallpapers
- watercolor
- web
- Web Design
- web forms
- Web Hosting
- web-development
- web-graphics
- webdesign
- Website Design
- widgets
- wireframes
- wireframing
- WordPress
- work
- workflow
- writing
- z-index
Recent Posts

Romantic Couple Painting

Canvas Texture Imitation

Flashmint

Tips for Using Perspective in Photography

Draw a Glowing, Vector Pocket Watch – Front and Back

How To Make an Olympic Gold Medal In Adobe Illustrator CS4

Create an Abstract, Textured Artwork in Illustrator

Create Textured European Goldfinch Characters

All About Transformation in Adobe Illustrator

Create Character Driven Book Cover Art Using Illustrator and Photoshop

Create a Stylized First Aid Icon in Illustrator

Modeling the Human Face in Illustrator

How to Design a Cheeky Koala Mascot Head

How to Create Dotted Surface Effects in Illustrator

Create a Colorful, Vector Carnival Mask
March 2010

M T W T F S S

« Feb

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31
Blogroll

Development Blog

Documentation

Plugins

Suggest Ideas

Support Forum

Themes

WordPress Planet
Contributors

Free Photoshop Tutorials | PhotoshopStar

Good-Tutorials: Newest Tutorials

News on Photoshopcontest.com

Photoshop Essentials.com Latest Tutorials

Photoshop Lady

Smashing Magazine Feed

The Photoshop Blog

The Photoshop Roadmap News

Tutorialized.com – Latest Tutorial Listings For Photoshop

Web Designer Wall – Design Trends and Tutorials
Tags
Adobe Photoshop Adobe Photoshop Cs3 Adobe Photoshop Tutorials Adobe Tutorial Adobe Tutorials Ae Aljazeera Curves Free Photoshop Free Photoshop Tutorials Free Tutorials Free Video Gradient Tool Haifa Image Insight Jag Learn Photoshop Mit Palette Particle Beam Photography Tutorials Photos Photoshop Photoshop 4 Photoshop Adobe Photoshop Basics Photoshop Effects Tutorials Photoshop Free Photoshop Software Photoshop Text Photoshop Tools Photoshop Tutorial Photoshop Tutorials Professional Lighting Professional Photographer Projo Serise Signature Stock Text Photoshop Tutorial Photoshop Tutorials Photoshop Video Tutorial Video Tutorials

March 2010
M	T	W	T	F	S	S
« Feb
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

the place where you learn photoshop

Archive for category Developer's Toolbox

Free High-Quality WordPress Themes

Would you like to see more similar lists on SM?

General Web Design Conferences

UI, UX, & IA Conferences

JavaScript & Ajax Conferences

Graphic Design Conferences

Mobile Web Conferences

Back-End Programming Conferences

Ruby on Rails Conferences

Flash & ActionScript Conferences

SEO & SEM Conferences

Marketing & Social Media Conferences

Technology Conferences

Is Your Event or Conference Missing?

About the Author

Coding

Notepad++ Portable Edition

Nvu Portable

Oiko CSS Editor

Graphics and Multimedia

Blender Portable

GIMP Portable

Lightscreen Portable

Portable Audacity OS X

Portable Inkscape OS X

FastStone Capture

Fotografix

Artweaver

VLC Media Player Portable

Winamp Lite

File Management

FileZilla Portable

WinSCP Portable

7-Zip Portable

Toucan

Testing

XAMPP

Portable Firefox

Instant Rails

Server2Go

Portable Chrome

Opera@USB

MoWeS Portable

Planning and Productivity

Dia Portable

Mozilla Sunbird, Portable Edition

ToDoList

Task Coach Portable

Business

GnuCash Portable

OpenOffice.org Portable

AbiWord Portable

Other Useful Apps

Sumatra PDF

Eraser Portable

OperaTor

Portable Windows Live Messenger 2009

Foxit Reader v3.0

KeePass

TrueCrypt

Pidgin Portable 2.1.0

WinPT Portable

Trillian Anywhere

Further Resources

About the author

1. Integrating A WordPress Blog Into Facebook

Plug-In Installation and Configuration

2. Integrating Facebook In A WordPress Blog

Plug-In Installation and Configuration

Further Resources

About the Author

1. Data Visualization Sites

Strange Maps

Wall Stats

Visual Complexity

Cool Infographics

Data Mining

Edward Tufte