http://www.magentocommerce.com/wiki/how-to_implement_paypal_payments_pro_into_magento_-_sandbox
http://www.google.com/search?source=ig&q=paypal+site%3Amagentocommerce.com
Just another weblog
Archive for category Work
18 Beautiful Brochure Design Samples
from: http://www.youthedesigner.com/2009/01/30/18-beautiful-brochure-design-samples/
Creating an effective Brochure Design for a direct mail campaign is no easy task. Most businesses usually have a limited budget and you need to make sure the design will be as effective as possible. When designing a brochure its tempting to cram it full of as much information as possible, but the real goal is to get the reader to take action, not overload them with information. Taking action could be anything from visiting a website to calling a phone number and will vary from business to business.
A brochure is supposed to provide additional information on a topic the potential client or consumer is interested in. It should highlight important benefits, features, build confidence and have the proper call to actions. The design should be eye-catching and consistent with your branding. Clients often give designers a large amount of information to fit into a brochure and fitting in all this information is often the hardest part. Try to beak up the information using white space, sub titles, images and so on. If there is just way to much information, ask the client if its possible to cut down the amount of text.
Check out the Brochures below to see what solutions other designers have come up with. If you need a reliable and affordable Brochure Printing company to print your design check out UPrinitng.com
Brochure Design Samples
15 Delightful Brochure Designs
from: http://www.youthedesigner.com/2009/03/25/15-delightful-brochure-designs/
I’ve always been a big fan of brochure design because I think its one of the hardest mediums to design for. Brochures are often relatively small in size and packed with lots of information. This makes it very hard for a designer because you need to make the brochure eye-catching and easy to read, but still work in all the important information. Hopefully this brochure design inspiration post will help you when you are stuck on a challenging brochure project.
Delightful Brochure Designs
30 Exceptional CSS Techniques and Examples
from: http://sixrevisions.com/css/30_css_techniques_examples/
In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML.
Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.
1. Hoverbox Image Gallery
A pure css-based gallery; hovering over an image enlarges it.
2. Advanced CSS Menu
A creative and complex navigation scheme.
3. Sliding Photograph Galleries
An accordion effect; hovering over an image expands it.
4. Lightbox Slides
Part of an article entitled “Supercharge your image borders” showcasing how you can use CSS styles to make images look more interesting.
5. Drop shadow on an image
Aan image effect demo and discussion based on a A List Apart article entitled, “CSS Drop shadows“.
6. Cross Browser Multi-Page Photograph Gallery
Hovering over the tabs changes the category, while hovering over an image enlarges it.
7. CSS Photo Zoom
Uses a single image and adjustment of the background-position attribute.
8. CSS gallery layout—smells like a table
Mimics a table layout, but uses lists. The gallery is also fluid width.
9. Sticky Footer
A static footer with very little XHTML required.
10. whatever: hover
A navigation menu that mimics Window’s Start menu.
11. CSS-Only Accordion Effect
An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.
12. Scalable CSS Buttons Using PNG and Background Colors
A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.
13. Pushbutton Links
links that are styled to look like buttons without using images.
14. Scrollable Table with Fixed Header
The table’s captions stay put which is excellent for long tables.
15. Content Overlay with CSS
When you hover over the image, the container div is shown with more text.
16. A CSS styled table version 2
A beautifully styled, table with semantic mark-up – uses a background image.
17. PNG Overlay
Another way to add flare to images (rounds the corners and adds a border and drop shadow).
18. Showing Hyperlink Cues with CSS
Simple tutorial on adding icons to different types of links.
19. Simple Rounded Corner CSS Boxes
Uses only one image and very few lines of code and mark-up.
20. Sitemap Celebration
Tree-like navigation using nested lists, great for sitemap pages.
21. Easy cross-browser transparency
Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).
22. Curved corners 2
Fluid width and height divs with rounded corners.
23. Creating a graph using percentage background images
List items <li> styled into bar graphs.
24. CSS Bar Graphs: Examples
3 bar graph examples – “Basic CSS Bar Graph”, “Complex CSS Bar Graph”, and “Vertical CSS Bar Graph” using div’s and definition list tags.
25. Animated Rollover Arrow
The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.
26. A CSS-based Form Template
Showcases an accessible web form.
27. CSS Image Text Wrap
Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.
28. Before your very eyes – a fade-in image
A demo using opacity and a single image that gradually fades in to cover the text.
29. Pure CSS Pop-ups
A pop-up technique that works even in IE 5 Mac.
30. CSS Gradient Text Effect
Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.
Cheat Sheets for Front-end Web Developers
from: http://sixrevisions.com/resources/cheat_sheets_web_developer/
Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office.
In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery).
So go ahead – print out your favorites and pepper your workspace with these wonderful references.
HTML/XHTML
1. HTML Help Sheet
2. HTML Cheat Sheet
3. HTML Character Entities Cheat Sheet
4. XHTML Cheat Sheet v. 1.03 – PDF
CSS
5. CSS Cheat Sheet (V2)
6. CSS Cheat Sheet
7. CSS Shorthand Cheat Sheet
8. CSS Level 1 Quick Reference – PDF
9. CSS Level 2 Quick Reference – PDF
10. CSS2.1 Quick Reference Card – PDF
11. CSS2 Reference Guide – PDF
JavaScript
12. JavaScript Cheat Sheet
13. Addison-Wesley’s JavaScript Reference Card – PDF
14. JavaScript and Browser Objects Quick Reference
15. The most common DOM methods at a glance – PDF
16. JavaScript Quick Reference Card/Cheatsheet
17. mootools 1.2 cheat sheet
18. jQuery Cheatsheet
19. jQuery 1.2 Cheat Sheet
20. jQuery Visual Map – PNG
Miscellaneous
21. RGB Hex Colour Chart
22. The Web Developer’s SEO Cheat Sheet
23. The WordPress Help Sheet
Hope you picked up a cool cheat sheet or two. If your favorites aren’t on the list, don’t forget to share it with us in the comments.
Useful Cheat Sheets for Web Designers
from: http://sixrevisions.com/resources/cheat_sheets_for_web_designers/
Cheat sheets (also known as reference cards, reference sheets, etc.) not only helps you remember things quickly, but can also serve as wall decoration for your workspace.
In this post, you’ll find 28 excellent, useful cheat sheets in various file formats for Photoshop, Dreamweaver, colors, typography, and other web-design related topics all in one page with pictures of each cheat sheet.
If you’re looking for front-end web developer cheat sheets (more CSS, HTML, and JavaScript) check out Cheat Sheets for Front-end Web Developers.
Photoshop
Photoshop CS3 Keyboard Shortcuts Cheat Sheet
Downloads: PDF (Windows), PDF (Mac)
Keys for using the Layers palette (HTML)
Photoshop Toolbox Reference (HTML)
Photoshop Lasso Tool Cheatsheet
Download: PDF
Photoshop Brush Tool Cheatsheet
Download: PDF
Color
RGB Hex Colour Chart
Color Reference Guide (PDF)
Web Designer Color Reference Hexagon Mouse Pad
Download: GIF
Web Safe Color Chart (HTML)
Hexidecimal Color Chart (HTML)
The Browser Safe Colors (HTML)
Typography
VisiBone Font Card
Download: GIF
Common fonts to all versions of Windows & Mac equivalents (HTML)
Mixing Typefaces (PDF)
Units/Dimension
Approximate Conversion from Points to Pixels (HTML)
Megapixels Chart
Download: GIF
CSS/CSS Frameworks
Blueprint CSS Cheat Sheet
Download: PDF
YUI Library: CSS Reset, Base, Fonts, and Grids (PDF)
CSS Shorthand Cheat Sheet (PDF)
Apple’s CSS Cheat Sheet Widget (Mac Dashboard Widget)
HTML/XHTML
HTML & XHTML Tag Quick Reference (PDF)
HTML/XHTML Character Entities
XHTML Character Entity Reference (HTML)
Dreamweaver
Dreamweaver Quick Reference Guide (PDF)
Dreamweaver CS3 for Mac Quick Reference Card (PDF)
Illustrator
Adobe Illustrator CS2 Keyboard Shortcuts – MAC
Download: PDF
Browsers
Will the browser apply the rule(s)? (HTML)
W3C DOM Compatibility Tables (HTML)
(Possibly) Related Posts
15 helpful WordPress plugins for the savvy user
from: http://sixrevisions.com/resources/helpful_wordpress_plugins_advanced_users/
This article presents 15 WordPress plugins to help enhance and simplify the blogging experience of advanced users, especially web developers and designers. Most of the plugins were tested on a default installation of WordPress version 2.3.1 for basic functionality; relevant screenshots of the plugins in action are included.
What’s a savvy user?
- A blogger with basic to expert knowledge of HTML/CSS, and for a lot of the plugins featured here, PHP and MySQL experience is highly recommended.
- A blogger who needs to display complex content in posts and pages like displaying and colorizing code snipplets, running custom scripts only on certain posts or pages, incorporating custom web forms, etc.
- A blogger who knows what they’re doing - The default configuration of WordPress is too “fool-proof“. For example, with the visual editor turned on, it will add unexpected indents and line breaks even inside
<pre>tags. Additionally, it blocks you from adding<div>tags, automatically “sanitizing” them into<p>tags.
If you match any of the above criteria, read on and maybe you’ll find a plugin or two that will make your blogging experience more convenient.
1) Google Syntax Highlighter for WordPress
Google Syntax Highligher for WordPress colorizes your code on-the-fly. It supports most programming/scripting languages such as C++, PHP, Perl, Ruby, and much more. The syntax is simple — just put your code inside <pre> tags and assign them the attributes name="code" and class="thelanguage".
The following code was tested:
<pre name="code">
var myString = "nSync";
if (myString == "Justin Timberlake") {
document.write("You're a winner");
} else {
document.write("There's always celebreality shows");
}
</pre>
This is how it colorizes my code:
You can learn more more ways to customize your highlighted code in the Google code wiki entry on Usage – syntaxhighlighter. Also check out the full list of supported languages on Google Code.
Other code highlighters available are:
WP-Syntax – A plain and simple code highlighter.
WP-CodeBox – also check out the basic usage and demo page
This plugin gives you two awesome <pre> tag attributes: download – which automatically creates a download link for your code snipplet, and colla – which gives you the option to collapse and expand the code block.
CodeHighlighter - It’s almost identical to WP-Syntax.
2) Exec-PHP
Exec-PHP gives you the capability of running PHP code inside certain posts and pages. You can insert PHP code directly into your posts without having to modify your theme files. You can find a more detailed documentation of Exec-PHP on Bluesome.
You have to turn off the visual editor whenever you use Exec-PHP in your posts or pages, It won’t work even in code view.
As a test, I used a WordPress conditional tag to see if it supports them, turns out it does — the conditional tag is is_single()
And this is what it looks like:
3) Save My <pre>
If you use the visual editor, then you’ve probably experienced the frustration of trying to figure out why it messes up your <pre> tags. Code in between
the <pre> tag should preserve the indents, spaces, and linebreaks, but the default visual editor doesn’t uphold this rule.
This is what I wanted my code snipplet to look like (minus the <pre> tags):
This is how WordPress renders it after I save my work from the visual editor.
Using Save my <pre> will prevent the WordPress editor from processing and “cleaning” up the stuff inside <pre> tags.
4) Maintenance Mode
Maintenance Mode just notifies your readers that your blog is undergoing maintenance and is currently unavailable. The message won’t appear if you’re logged in as an administrator, so you can see what your updates look like during maintenance mode.
Here’s the options page for Maintenance Mode:
This is how it looks for users that aren’t logged in or don’t have the proper credentials:
5) WP-DBManager
WP-DBManager gives you an administrative interface to manage, backup, and optimize your WordPress database. It has countless of options for making database management quite effortless. Installing this plugin gives you a new tab in the admin panel, called “Database“.
6) Deactivate Visual Editor
If you need to write intricate posts that have code snipplets and/or custom scripts, it’s highly advisable that you turn off the visual editor. But if you find value in the visual editor of WordPress, then you just may want to exclude certain posts and pages from using it. Installing the Deactivate Visual Editor WordPress plugin ensures that nothing gets accidentally screwed up when you edit a post that shouldn’t be edited using the visual editor. To deactivate the visual editor on a post or page, you’ll need to create a custom field called deactivate_visual_editor and set the value to true.
7) Search and Replace
Ever wanted to change a user’s name, email, website URL on old posts? How about correcting references to an old post that no longer exists or whose name has been editted? Search and Replace allows you to do all of this inside of WordPress, through an intuitive admin interface.
Here’s how the admin interface looks like:
For this test, I created a few comments throughout the test installation using the name “myOldName“. I then replaced it with “myNewName“.
After pressing the “Go” button, search and replace simplifies this database update by not requiring you to run a custom MySQL query (alternatively, use WordPress’ $wpdb database class and PHP-Exec if you prefer to run your own update).
WP-DB-Backup
WP-DB-Backup offers a straightforward interface for backing up your WordPress database. It’s an excellent alternative to WP-DBManager if you’re only looking to create a backup. You can save the backup on the server, on your computer, or have it sent to you via email.
9) Tidy Up
Tidy Up cleans your HTML source code and attempts to correct invalid XHTML code. It utilizes WC3’s HTML Tidy conversion tool. If you’re concerned about XHTML validation this plugin can help.
Running the Tidy Up report gives the following output:
10) FormBuilder
FormBuilder is a simple plugin that allows you to create custom forms inside posts and pages.
Setting up a form is a walk in the park:
Here’s how the form looks (unstyled):
Other Notable Plug-ins
11) WP Super Edit
WP Super Edit is an alternative to the default visual WYIWYG editor (TinyMCE). It improves on the default editor by providing advanced users with additional options such as a button for inserting <div> tags in your posts.
12) WP-Debug
WP-Debug lets you see what’s going on when your WordPress web page is rendered. This plugin is vital for efficiently troubleshooting your WordPress installation.
13) Theme Preview
Theme Preview permits you to see how your new WordPress theme looks without having to switch it out. Use it on a demo WordPress site to showcase your theme designs.
14) post2pdf
post2pdf converts your blog posts into PDF format. This is terrific specifically for tutorial writers who want to provide a PDF download option.
15) X-Valid
X-Valid is another popular plugin to help you achieve XHTML validation by cleaning up HTML code.
Got any cool experiences with these plugins? Got a particularly awesome idea on how to use them? Please share it with us by leaving a comment!
WordPress Plugins For Increasing Traffic
from: http://www.myinkblog.com/2009/03/04/wordpress-plugins-for-increasing-traffic/
Introduction
A blog/website is driven by the number of people you can reach. In this article you’ll learn more about some WordPress plugins that can help increase the number of visitors to your site. Let’s take a look at some plugins that do automatic search engine optimization tasks, learn more about your visitors, and allow your visitors to submit your article to social bookmarking sites.
Search Engine Optimization
It’s very important that you make your blog search engine friendly. The average person looking for content via a search engine like Google or Yahoo won’t dig past the first or second page. This plugin helps you considerably improve SEO (search engine optimization) by dynamically optimizing your titles for search engines and generating meta tags. You can easily override any title and set any meta description and meta keywords that you’d like. This plugin should result in better page rankings, and people finding your blog easier.
Download the All In One SEO Pack
Social Media
There are quite a few social media plugins available for WordPress, but they all do about the same thing. All of these plugins give your visitors the ability to submit your post to social bookmarking sites like: StumbleUpon, Reddit, Digg, Delicious, etc. Sometimes, these social bookmarking sites can generate a huge amount of traffic to your blog.
Download one of these: Share This | Sociable | Gregarious
Post Ratings
This plugin adds an AJAX rating system to your posts or pages. You’re probably wondering how this plugin will help your site gain more visitors? Well, your visitors will give you feedback about the posts/pages they like the most. By learning more about your visitors likes and dislikes you can target your posts more; this will help you get more loyal readers and overall higher traffic numbers.
Download PostRatings
Customized Referrer Messages
This plugin displays a greeting message to visitors that come from different urls (known as referrers). For example, you may want to welcome Diggers with a message that reminds them to digg your story, or you may want to ask Delicious users to bookmark your post, and so on. You can also customize the message that is displayed. This plugin really helps you interact with your visitors.
Download the Referrer Detector
Visitor Information
When you know what your visitors like and how they act, you can use this information to attract more of them. That’s why the information about your visitors is so important. There are various way to keep track of your readers, some people use Google Analytics, but I prefer the StatPress-plugin. This plugin collects information about visitors, spiders, search keywords, feeds, browsers etc. You can check preferred pages, posts and categories. Another useful feature is that you can see the keywords that visitors used to reach your blog via a search engine. You can use this information to write more posts about a certain keyword.
Download StatPress
Final Thoughts
I hope you enjoyed this post and found it useful. I’d love to get your feedback on the WordPress plugins you use to help drive extra traffic to your WordPress blog
Logo Inspiration With Clever Typography
from: http://www.myinkblog.com/2009/06/12/logo-inspiration-with-clever-typography/
written by: Andrew Houle / stashed in: Inspiration / 06.12.09
I love logos! They encompass so much branding identity into one tiny graphic. They are incredibly difficult to create, but when done correctly, they stand the test of time. Well-created logos often look seamless and effortless, but you can be sure that a ton of time went into the planning, research and development.
I also rather enjoy beautiful typography. I find clever typography within a logo design to be awe inspiring. This post was created to showcase many such clever typographic logos. I hope you enjoy and are inspired as much as I was!
Where to Find Inspirational Logos
These logos were grabbed from these helpful logo gallery sites.
Logo Inspiration with a Clever Mark
from: http://www.myinkblog.com/2009/06/17/logo-inspiration-with-a-clever-mark/
written by: Andrew Houle / stashed in: Inspiration / 06.17.09
Last week I showcased a plethora of logos with clever typography. Of course a logo isn’t only about great typography, many of the most iconic ones feature a clever mark or symbol, so I decided to extend this series. I hope you enjoy the clever logos that follow!
Final Thoughts
It was really a lot of fun searching out these logos. Which is your fave?