Category: Programming Page 22 of 27

Programming

Create an image map without flash

On January 28, 2013

An image map is an image with specific clickable areas. You may create a map where you can click on city names or even states that goes to specific pages or displays additional information. The simplest way to create an image map is to use HTML. You can use a tool like Dreamweaver to define the coordinates of each clickable area.

An image map with special effects requires more than HTML. In the past, you could achieve certain effects with flash. Now, you can use jQuery to build what you needed to use Flash for. The jQuery plugin called ImageMapster helps you to make HTML images without Flash. It works on modern web browsers and mobile devices. With ImageMapster, you can highlight and select areas on your map, create special effects, show floating tool tips and more.

Using Imagemapster

To use Imagemapster, you need to do the following:

Download the jQuery plugin and include it in your page.
Create an image map and add to your page.
Apply the Imagemapster code.
Add the special effects that you want to include.
Write additional code to include additional functionality.
Test your image map.

Imagemapster has demos and documentation that provides more details on how to use this plugin.

5 Design Articles to Start The New Year With

By djbrensinger

On January 20, 2013

In Design, Programming, Web Development

Computer with code As you start 2013, you can begin by making the perfect portfolio, charging for your expertise, plan out your next huge web project and learning new design tips and patterns.

Web Designers and Developers need a portfolio that shows what you can do. You can focus on niche projects or display the range of your abilities. If you need a portfolio or looking to freshen yours up, look at Make the Perfect Portfolio.
So You’re Going to Start a New Huge Web Project helps you to think about including mobile in your design and using version control. Every web project is different but you’ll need to look at things like design, code, content and your CMS.
Developers can learn how make their projects look better by learning about these 5 design tips. By using these 5 tips, you can take your design from ugly to better looking. A better looking design can encourage more people to use your web site or app.
When you start your next development project, you can use these Design Patterns For The Web to help you build a better user experience. Not every Design Pattern works for every project. These Design Patterns give you tools to make better decisions for your next project.
You meet a new client and they ask for a Request For Proposal. You work very hard on it. Then, they tell you that they like your proposal but going to have someone else do it. In How To Reframe the RFP and Charge For Your Creative Expertise, you’ll learn how to get clients to pay for your expertise.

UX Experience at Web414 Meetup

By djbrensinger

On November 5, 2012

In Design, Programming, Web Development

Notes from the UX Experience meetup:

“Think strategic about UX before designing.”

Perception, Interaction, Emotion/Habit

UI is a tool for influencing all 3 (listed above).
Perception is the reality of how people perceive you.
Things fail when you force people to change their behaviors.
UX is business goals, brand strategy and user research
It is the design of user emotion, interaction and perception.
Through the strategic understanding of what happens before, during and after each interaction.
You create. Created about you. Created around you.
To be really good at it, there’s a lot to learn. And learning happens in real time.
Ask: “if this, then what” or “if this, then why”

Before building

What do we need to learn?
What does it really mean?
How do we deliver?
What does it look like?

Questions to ask when designing

Who?
What? [Customers’ needs, Business Goals]
Where? [Location]
When? [Time, Frequency]

Content, Customization, and Context
Why? Is this going to be useful to the customer?

Solving the Why

Personas are important *you’re not designing for you.
content is relevant
focus on behaviors
drives the content/messaging/information architecture
models the experience
keeps the team focused
You might make something useful for your customers

Inspiration

collect different items for inspiration
reverse engineer how a design or brand was created.

What do UXer’s do?

expand the realm of what you are designing.
Get a client involved by asking questions about what they need not what they want.

UX has niches that you concentrate on: UI, Interaction and UX Strategist

Check out: Adaptive Path, Ideo, onwardsearch.com, UX Magazine

5 Development Tips for You

By djbrensinger

On July 31, 2012

In Programming, Web Development

As a developer, I look for tips that can help with problem-solving to picking a language for my next project. Here are 5 development tips to help you be a better developer:

The “Just look at it” hack to problem solving When you have difficult problems, sometime you want to just sleep on it. Dave Lee suggests that you “Just look at it”. Don’t try to solve it. Stare at it for a while and see what ideas you come up with. He lists the steps that you can use to try this type of problem-solving.
Productive Procrastination When you just can’t focus and need a break, you can either force yourself to finish a demanding task or take a break. Productive Procrastination shows you how to switch to less demanding tasks like checking out what people are saying about your company on Twitter or reading a blog related to your industry.
10 things web developers must know to become truly amazing To be a great developer, you need to know more than code. Here’s Dan Frost’s list of things you need to know.
How to pick the right programming language A programming language is like a tool. Not every tool is suited to complete the project or problem that you want to solve. Mashable lists which languages are better suited to a particular industry.
Don’t be afraid of imperfection Perfection can be stifling. It can cause you to procrastinate or never complete a project. When you create an app, users don’t care if the code is perfect. They just want it to work. Amber shares why you shouldn’t be afraid of weird looking code in your next project.

4 jQuery techniques to add to your toolbox

By djbrensinger

On June 26, 2012

In Programming, Web Development

Need to add a lightbox, slideshow, Google Maps or Twitter to your website? Use the following 4 jQuery techniques to add these features to your next web project.

Simple and Quick Lightbox with CSS and jQuery A super simple lightbox feature that is easy and quick to add to your website.
jQuery and Google Maps This tutorial walks you through adding and modifying Google Maps with jQuery to your website.
SlideShow with jQuery Slideshows let you display a series of images without using Flash. This tutorial helps you to add a simple slideshow to your site.
jQuery and a Responsive Footer How to combine responsive design with jQuery. This tutorial shows how to create a responsive footer and use jQuery to add additional functionality to your footer.