Archive

Archive for the ‘Webmasters Resources’ Category

Build Applications with The Guardian Open Platform

March 22nd, 2009 No comments

The Guardian Open Platform is the suite of services that make it possible for us to build applications with the Guardian. They have opened up their platform so that everyone can benefit from the journalism, the brand, and the technologies that power guardian.co.uk. The Open Platform currently includes two products, the Content API and the Data Store.

1. The Content API is a mechanism for getting Guardian content. You can query their content database for articles and get them back in formats that are geared toward integration with other internet applications. The Content API is a free service including commercial applications. However, there are some limits and restrictions.

2. The Data Store is a collection of important and high quality data sets curated by Guardian journalists. You can find useful data there, download it, and integrate it with other internet applications. The Data Store has a range of different uses for different types of partners. They will include relevant terms and conditions along with each service.

The Guardian Open Platform is a useful environment for anyone who creates for the internet. They will offer more services in the future such as an ad network and an application platform.

 

open-platform

Multiple File Upload Plugin with jQuery and Flash

March 22nd, 2009 No comments

 

Uploadify is a jQuery multiple file upload plugin which allows you to change any element with an ID on your page into a single or multiple file upload tool. The plugin uses a mix of JQuery, Flash, and a backend upload script of your choice to send files from your local computer to your website server. It has been tested on IE7, FireFox 3, Safari 3 and Opera 9.

 

flash-upload

Best Text Editor for Developers? 10 Prizes to Give Away.

March 21st, 2009 No comments

When building a website/web application or editing your source code, sometimes all you really need is a trusty text editor.

best_text_editor

We’d like to know what you think the best text editor is.

To make things interesting, the people over at SSLmatic, a SSL service offering RapidSSL, Geotrust and Verisign SSL certificates for up to 70% discounted prices, are offering 10 RapidSSL certificates, each worth $19.99 a year, to 10 participants.

How to participate

Simply state your vote for the best text editor in the following format:

vote: name of text editor

The details
  • Leave a valid email address in the comment form so that we can reach you.
  • You can only vote once.
  • Contest ends on March 23, 2009 after which commenting will be disabled.
  • Winners will be randomly selected via a MySQL database query similar to previous giveways.
  • Only one vote will be counted per person. If you mention more than one text editor, only the first text editor that you mention will be counted.
About SSLmatic

SSLmatic is a provider of cheap ssl certificates. They currently offer SSL certificates of 3 major SSL brands for discounted prices, and you can find out more about them in their Certificates / Prices page. Want to learn more about SSL and SSLmatic? Check out their FAQ page.

Top 6 Internet Explorer Extensions for Web Developers

March 21st, 2009 No comments

For Web developers wanting to use Micosoft’s Internet Explorer as their primary browser, there’s some terrific IE extensions/add-ons that can aid you analyze, troubleshoot, debug, and speed up development of web pages.

Here, you’ll find the top 6 free IE extensions for web developers.

Where appropriate (and available), you’ll also find related resources, their download page, and documentation.

1. Internet Explorer Developer Toolbar

internet_explorer

The

Internet Explorer Developer Toolbar, developed by Microsoft, offers several features and options to aid web development and design.

It shares many features that we love from Chris Pederick’s Firefox Web Developer extension such as: outline div elements, mark-up validation tools, ruler and measuring tools, resizing the browser window precisely (i.e. to 800×600), and all that good stuff.

It’s an essential tool for analyzing and troubleshooting web pages.

Some features:
  • A Document Object Model inspector pane
  • Multiple validation – automatically opens validation services in multiple browser tabs at the same time
  • Syntax coloring of source code
Related Resources:

    "Using Microsoft IE Developer Toolbar" by Arkady Lesniara
    "15 Seconds: An Introduction to the Internet Explorer Developer Toolbar"

  • by John Peterson

Download:

  • IE Developer Toolbar on Microsoft Developer Center
2. Web Accessibility Toolbar

web_accessibility

The Web Accessibility Toolbar, developed by Vision Australia, was designed specifically to assess and analyze the accessibility of a web page, but it’s very useful regardless of whether you’re testing for accessibility or not.

Some features:
  • Greyscale function – renders pages into grayscale so that you can test color contrast.
  • Color Contrast Analyzer – a more detailed test for color blindness accessibility, which provides an analysis of the foreground and background color for "color visibility" as suggested by the W3C consortium.
  • Test Styles – which opens up a dialog box where you can edit existing CSS styles on a web page.
Related resources:
  • "Using the Web Accessibility Toolbar" on webcredible: user research & design
  • "Using the AIS Web Accessibility Toolbar" on WebAim: Web Accessibility in Mind

Download:

  • Web Accessibility Toolbar from Vision Australia

Documentation:

  • Toolbar Functions
3. HttpWatch (Basic Edition)

httpwatch

HttpWatch is an HTTP data viewer and debugger extension by Simtech Limited. HttpWatch comes in two editions: Basic and Professional.

The Basic edition displays plenty of information regarding HTTP data and web page performance such as status codes, total elapsed time it takes a web page to load, amount of downloaded data, and HTTP compression savings (if you use data compression).

Some features:
  • Page Level Time Chart – gives you a visual representation of the web page’s performance
  • Errors Log Summary – notifies you of any HTTP errors encountered.

Download:

  • HttpWatch from HttpWatch official website

Documentation:

  • HttpWatch Features Summary
4. WebCollect

web_collect

WebCollect is a simple web content capture tool. It allows you to take and save screenshots easily (great tool for design mock-ups and presentation). It also has an eyedropper tool which allows you to sample colors from a web page to extract their color values (in RGB, Dec, and Hex).

Some features:
  • Copy full screen – enabling you to copy a web page without having to crop or resize the image
  • Capture Rectangle Area – which allows you to copy just parts of a web page.
  • Support for most digital image file types such as JPG, PNG, and GIF.

Download:

  • WebCollect Toolbar 3.2 from CNET Download.com
5. Fiddler2

fiddler2

Fiddler2 is a web debugging proxy add-on whichs logs HTTP(S) traffic data. It’s very robust in features and is customizable to your needs.

Some features:
  • Session Inspector – which also provides you with headers and web forms data.
  • Set break-points – so that you can experiment with inbound/outbound data.
  • Performance Statistics – including world-wide estimated download times
Related resources:

"Performance Tuning with Fiddler" on MSDN.
FiddlerScript Editor – allows you to edit script rules on fiddler.

Downloads:

Fiddler2 from offical website
Microsoft .NET framework

 

6. Web Development Helper

webdevelopment

The Web Developer Helper is an IE extension targeted towards ASP.NET and JavaScript/Ajax Developers. It has a special set of tools for ASP.NET development.

11 Inspiring Lessons from Web Design Experts

March 20th, 2009 No comments

A large part of being a capable web designer/developer is learning from people who’ve been acknowledged for their expertise and authority.

leadimg_web

Finding and reading information about effective web design is part of being a web professional.

With this in mind, here’s just a few compellingly-sound advice and viewpoints from recognized personalities in the field of creating kick-ass websites.

1. Design with the users in mind

"Although there are lots of elements to consider when designing compelling Web experiences (writing style, look and feel, information organization -to name just a few), there is one "knowable" element that can be used to appraise the rest: audience. A detailed understanding of your target audience provides you with an effective metric by which to evaluate all your design decisions: structure (content and organization), visual presentation (personality and tone), and interaction (functionality and behavior). From cultural dimensions to computer expertise, the more you know about your audience the easier it becomes to design for (and communicate to) them."

Luke Wroblewski, Interface Designer, from LukeW: "Understanding Your Web Audience"

2. Apply the right technology at the right time

"Sometimes people hit an idea right on the nose. My wife brought home this comic strip and it’s so pertinent to what we do.

Sister – ‘Mom says you’re designing a web page for school.’

Little brother – ‘Yup.’

‘And not just any web page, but the ultimate web page.’

‘I’m using every tool in the box. HTML… XHTML… CSS… XML… SOAP… AJAX… Flash… Perl… JavaScript… you name it.’

Sister – ‘What’s the page going to look like?’

Little brother – ‘I’ll figure that out when I’m done.’

Fox Trot

It’s funny because it’s true. We often put the technology horse in front of the cart. It’s not about building the solution before there’s a problem. It’s about having a problem and using the right technology to solve that problem."

Jonathan Snook, Web Developer/Designer and Author, from Snook.ca:"The Ultimate Web Page"

3. Why web usability is important

"On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave. If a website’s information is hard to read or doesn’t answer users’ key questions, they leave. Note a pattern here? There’s no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty."

Jakob Nielsen, Usability Expert and Author, from Alertbox: "Usability 101: Introduction to Usability"

4. Why web designers should write

"It’s time we designers stop thinking of ourselves as merely pixel people, and start thinking of ourselves as the creators of experiences. And when it comes to experience on the web, there’s no better way to create it than to write, and write well."

Derek Powazek, award-winning Web Designer, from A List Apart: "Calling All Designers: Learn to Write!"

5. Accessibility is oftentimes in simplicity

I’m going to start my technical advice with something that seems to have been buried in the teachings of accessibility—simplicity. If you want to reach the greatest number of users possible, it’s best to write clearly and simply and design your interfaces to be consistent from page to page. For some people, simple usability advice like this is an absolute accessibility need. Many people with cognitive disabilities can fail a task simply because it hasn’t been laid out well enough for them. And anyway, people of all abilities fail tasks that are confusing. Why should we all suffer an interface that proves itself to be unusable?

Matt May, Web Accessibility Specialist, from Digital Web Magazine: "Accessibility From The Ground Up"

6. Consider how people look for information

"Observe how your users approach information, consider what it means, and design to allow them to achieve what they need."

Donna Maurer, Information Architect/Interaction Designer, from Boxes and Arrows: "Four Modes of Seeking Information and How to Design for Them"

7. Educate clients/employers about good web design

"Some who don’t understand web design nevertheless have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.

If we want better sites, better work, and better-informed clients, the need to educate begins with us."

Jeffrey Zeldman, Editor in Chief of A List Apart, Author, and Web Designer. from A List Apart: "Understanding Web Design"

8. Find inspiration from places beyond the web

"It’s always helpful to look outside of the web for your inspiration, to places where you might not at first expect to find a solution. The world is a collage of inspiration, from newspapers, magazine publishing, and advertising to product design, architecture and the fine arts."

Andy Clarke, Web Designer and Author, from Peachpit: "Creating Inspired Design Part 1: I Am The Walrus"

9. Design for an international audience

"Despite the fact that the Web has been international in scope from its inception, the predominant mass of Web sites are written in English or another left-to-right language. Sites are typically designed visually for Western culture, and rely on an enormous body of practices for usability, information architecture and interaction design that are by and large centric to the Western world.

There are certainly many reasons this is true, but as more and more Web sites realize the benefits of bringing their products and services to diverse, global markets, the more demand there will be on Web designers and developers to understand how to put the World into World Wide Web."

Molly E. Holzschlag, Web Designer and Author, from 24 Ways: "Putting the World into ‘World Wide Web’"

10. Focus your client’s feedback

"A clients natural inclination will be to give you his personal opinion on the design. This is reinforced because you ask them what they think of the design. Instead ask them what their users will think of the design. Encourage them to think from the users perspective."

Paul Boag, User Experience Consultant, from 24 Ways: "10 Ways To Get Design Approval"

11. On the topic of the "designer" vs. "developer" label

"On the about page of this site I used to call myself a "developer/designer/occasional writer". It’s a bit confusing, and I still find it hard to know what to answer when someone asks me what I do for a living. Am I a Web designer? A Web developer? A Web programmer? All of them? Neither? It really is a difficult question to give a simple answer to.

My answer depends on who is asking, when, why, and under what circumstances. Sometimes I’ll say that "I work with the Web" or "I build websites", both of which are true but don’t really say what I do. It would be easier to be able to give a short, simple, reasonably precise answer.

[…]

As an alternative, I’ve been using "Web developer" for some time. The problem with that is that many people assume that a Web developer does mostly back-end programming, which I don’t do a whole lot of. It does sound more professional than Web designer though."

20 Websites That Made Me A Better Web Developer

March 19th, 2009 No comments

As a web developer, if you’re to be successful, you have to have a constant yearning for learning new things. In an industry that evolves rapidly, you’ve got to keep up or you risk being obsolete and outdated. Keeping up with trends, weeding out the fads, and adopting new techniques to your web-building arsenal is an essential part of being a web developer.

I spend (literally) most of the day in front of the computer and even in my spare time, I choose to read, learn, and keep up with web technology news. This leads to a massive collection of bookmarked links, but through the years, there are only a handful of websites that I frequent.

I’d like to share 20 websites that have broadened my knowledge, expanded my skill set, and improved the quality and efficiency of my web development projects. Most of these (hopefully) you’ve already encountered, but if you come out with just one or two links you’ve never heard of or you end up bookmarking a link or two, I would’ve accomplished my goal.

1) Alertbox: Current Issues in Web Usability

Alertbox is Jakob Nielsen’s bi-weekly column that discusses web usability. I’ve been a fan of his for almost as long as I’ve been professionally developing websites. Most of his recommendations makes sense and is backed by real-world studies and carefully-constructed surveys.

His columns cover topics such as the merits of breadcrumb navigation to Top-10 Application-Design Mistakes. A great link to provide people when you’re asked about optimal web page design is the column on Screen Resolution and Page Layout.

2) TheBestDesigns.com

On days when your creative juices don’t seem to be flowing as it should, it often helps to look at other people’s work to help inspire you. TheBestDesigns.com is a gallery site to visit on such days. TBD has a few things that distinguish them from other web design galleries — among them are: choosing quality over quantity, showcasing flash-based as well as CSS-based layouts, and tagging each design with relevant keywords so that users can conveniently find similar designs.

They showcase truly innovative and skillfully-crafted designs and they abstain from showcasing the “yet another recycled web 2.0 look” websites. It might not be updated with hundreds of websites everyday, but having a strict guideline on what gets displayed on TBD ensures that you don’t have to filter out the noise to get to the signal.

3) A List Apart

A List Apart inspired me to become a proponent of web-standards and semantic code. Starting out, most of us probably didn’t care about capitalized, unclosed html tags (… that won’t validate with a strict doctype) or understood the real value of accessibility in web pages.

One of the major influences in my views on web-standards, best practices, accessibility, and usability can be attributed to a significant part… to A List Apart. ALA articles are high-quality and they only come out with two articles a month, but they are worth the wait. Articles are written by some of the leading experts in the industry, and their staff include well-renowned pro’s such as Eric Meyer and Jeffrey Zeldman.

4) Getting Real by 37 Signals

Getting Real” is a book that’s available online, written by 37 Signals. It’s about creating web-based applications in a productive and successful way. The book covers topics ranging from philosophies that help push out quality products to views on hiring the right people to do the job.

Favorite topics covered in the book are:asking users what they don’t want and dealing with problems only when there is one.

5) Digg / Technology

Digg is a site where people submit links and vote which content is worthy to be read by its users and which articles don’t deserve the light of day. A large part of my ability to keep up with emerging technologies, techniques, and new standards is because of frequenting Digg’s Technology section. The community is picky of what is good news and bad news, so it allows you to skip the junk and get to the good stuff right away.

Other social-bookmarking sites that will help you stay sharp and current, and that should be mentioned here are: StumbleUpon , del.iciou.us, reddit, and popurls.

6) Web Design from Scratch

Web Design from Scratch is a website run by Ben Hunt, that’s about (straight from the front page) “A complete guide to designing web sites that work“. It caters primarily to web builders just starting out, but it’s always good to “go back to the basics” and get a refresher on things that you’ve taken for granted.

The section on Copy Writing taught me that web developers shouldn’t be limited to the coding part or the design part of the project; writing effective copy comes naturally with the experience we’ve had with developing websites that succeed and fail.

7) mootools

mootools is a lightweight framework that simplifies the way you write JavaScript and provides you with powerful AJAX classes, effects, and fuctions. It’s helped with the development of complex web pages in a rapid and elegant way.

There are other JavaScript frameworks similar to mootools, and you can’t go wrong with any of the popular ones, but a developer’s got to choose his or her favorite — and for me, mootools is the one I’ve come to love and use.

8) ReadWriteWeb

ReadWriteWeb is a long-standing (five years and counting) weblog about web technology news. It caters to web professionals that have a need for knowing what’s up right now. It was founded by Richard MacManus, who also co-founded the Web 2.0 Workgroup – a network of blogs that cover the Web 2.0 generation.

It’s a website that allows you to keep your knowledge up-to-date, and is a source I consistently cite when talking about current web technologies with colleagues and fellow developers.

9) Zend Developer Zone

This is a website written by some of the PHP core developers and they provide news, articles, tutorials and other stuff related to PHP. If you’re looking for a reliable source of information about PHP, there’s no other place to look than the Zend Developer Zone.

Worth taking a look at is the five-part article series about the xdebug extension (here’s the link to Part One: Introducing xdebug), which is, as author Cal Evans puts it, “a free and open source swiss army knife tool for PHP developers”.

10) css Zen Garden

css Zen Garden is an eye-opener for newer CSS developers. css Zen Garden explores the power of external style sheets by showcasing a variety of designs contributed by developers throughout the industry.

If you haven’t seen the website before, the concept is: using the same html mark-up, CSS developers submit external stylesheets and images to style the web page into beautifully-looking designs.

It’s a great place to inspire you to push your limits and knowledge regarding CSS.

11) CSSplay: Experiments with Cascading Style Sheets

Another wonderful website about CSS. It features demos of CSS-based solutions such as image galleries, drop shadows, image maps, etc.

The website is authored by a married couple, Stuart (Stu) and Fran Nicholls, who have been in the computer industry since the 1980’s. Most of the demos are (or were) cutting edge; the examples are practical and easy to follow and the website’s easy to navigate.

It’s a commendable resource to check out when you want to gather information about CSS-based solutions.

12) W3Schools Online Web Tutorials

his is an amazing center of knowledge for all things web development, covering topics such as JavaScript, HTML, PHP, SQL, and more. At the bottom of their logo, they quote, “The best things in life are free” – this is indeed true in their case.

The website is a great starting point towards learning about web development and design topics and an effective online reference for those who know about the subject but need a quick refresher.

13) Books24×7.com – ITPro Collection

The ITPro Collection at Books24×7.com features digitalized versions of the top IT books. It’s a fee-based website, but if you’re able to afford it (or can convince the boss to get you a subscription), it’s the best way to access quality literature through the convenience of your computer.

It will also allow you to select the books worthy of buying and adding to your collection.

14) Drupal

Drupal restored my faith in open-source applications. Prior to Drupal, I worked on Oscommerce, Zen Cart and Moodle. All projects had bloated PHP and CSS, poor HTML mark-up (default layouts used tables, little care for semantic mark-up, amongst a few things) and were designed with little usability/accessibility in mind.

Drupal’s code — in contrast — was clean, modular (but not excessively so), had a robust API so that you don’t have to tinker with the core files, and most importantly, the community’s willingness to help out, share information, contribute, and commitment to quality is my vision of the “Utopian” open-source community. Since then, projects likeWordpress, Magento, and Joomla! re-assures us that effective quality solutions don’t come from shelling out the cash, but rather promoting and contributing as much as you can to these remarkable communities.

15) Webmonkey: The Web Developer’s Resource

Here’s a throw-back to the past! This is here as a reminder to the (slightly) older/more experienced developers that the site is still up and running. It was, during their time, a place to visit and learn about web development, covering topics such as web programming, E-business, and page design. It also has a “Quick Reference” section on the sidebar.

I remember being amazed at how their “folder navigation” on the sidebar worked — ever since then, the functionality can now be achieved quite easily using the DOM and/or a JavaScript framework like mootools.

16) Meyerweb.com: Eric’s Writing

This is a collection of Eric Meyer’s writings, an accomplished author on the topic of CSS. Not only is he a CSS expert, but also an advocate of semantic code. His work was, and is, truly revolutionary. I attribute my appreciation and understanding of “resetting CSS” to him.

Eric Meyer is one of the key influential people that I truly find to be talented and knowledgeable in the field of web building. His current and previous works are worth the time to read.

17) 456 Berea Street

456 Berea Street is the creation of Roger Johansson, a web professional from Sweden. His writing is a primary inspiration for starting up of Six Revisions. Topics include book reviews, written work about CSS and XHTML, and web development news and events.

Some pages worth bookmarking are Efficient CSS with shorthand properties (which can be used as a reference to writing “shorthand” CSS – reducing file size and page length) The CSS and XHTML Lab (which features some demonstrations as well as a list of works translated into other languages) and Accessibility myths and misconceptions (a helpful resource to link to when asked about the value of accessibility in web pages).

18) The Web Standards Project

The Web Standards Project “fights for

standards

that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web”.

Whether it’s suggesting correct mark-up or rallying web browser developers to render styles/html a certain way, The Web Standards Project aims to help web developers reduce the amount of time committed to troubleshooting browser-display issues. The website features articles, tutorials, and the Acid3 Browser Test (visual rendering tests of your browser).

19) Fiftyfoureleven.com

A marvelous website for the modern web developer. The website “is intended to be a resource for web developers: people who design, code and program websites and applications for the web“. The website is part of the 9rules network and is written primarily by Mike Papageorge who chooses to blog about topics such as “Marketing on the Internet” and more specific subjects such as “Olympic Logos“.

Aside from the Web Development Resources sidebar, there’s also a list of the author’s most recent Web Development resources that’s worth a bookmark.

20) SitePoint

SitePoint is one of the older websites that has survived the constantly-changing tastes of web developers and designers. A co-founder of the website, Matt Mickiewicz, first had a website called Webmaster-Resources.com Community Forums launched in 1999.

SitePoint had a bit of a lull for a period of time in terms of popularity; the site’s prominence was replaced by newer, more “forward-thinking” web development sites.

The site has found its “second wind” with it’s young and modern web developer audience with an updated design/user interface, frequent updates, and a new and notable”CSS Reference”  section.

A Simple Guide on How to Effectively Talk to Clients

March 19th, 2009 No comments

Everyone needs a website made, but not everyone can talk “tech” like we can. From the farm owner in Indiana to the brain surgeon in Malaysia, we quickly see that employers can come from all walks of life. Learning how to carry on a compelling conversation about web development is a paramount skill that all web developers should possess if you want to keep the checks coming in. Maintaining your audience’s interest and gaining an accurate picture of what they truly need to get done can prove to be a challenging part of any web development project, but here’s a few tips that might help a bit.

Get an estimate of their computing/technological expertise.

So that you know how in-depth you have to explain certain concepts or ideas, you should first try to determine the individual’s computing/technology knowledge. This can be accomplished indirectly with, what I’d like to call, fishing questions (similar to “fishing for compliments“).

For example, you can ask in passing, “Hey, what operating system do you have on your home computer?” or “What’s your preferred web browser?”. What you’re really trying to learn is: (1) if they know the basic terminologies like operating systems and web browsers, (2) if they have any experience with computers and the internet, (3) their tech savvy-ness, (4) how and why they use IT. A person using Linux probably knows a thing or two about computers and Mac’s are generally appealing to artists, designers, and musicians.

Other fishing questions are:

    * What do you already know about search engine optimization?
    * Do you use Adobe Photoshop (or a similar digital-image editing software)?
    * What are some websites you frequent on your spare time?
    * Do you subscribe to any RSS feeds?

Don’t underestimate a person’s knowledge.

You know that colleague who insists on explaining to you the difference between HTML and (X)HTML when you’ve just finished a strict-doctype XHTML website? Don’t be that guy. People don’t like to be treated like they’re stupid, and not being able to understand a person’s knowledge is a sure-fire way of landing yourself on his or her bad side. If you’re unsure of their grasp on a particular subject, don’t assume they don’t know anything, ask fishing questions and judge by their reactions whether or not you’ve explained enough.
Use actual examples.

When talking about a web project, it helps to have a computer with an internet connection nearby so that you can both communicate look at stuff that’s on the internet. For instance, if you’re trying to determine what look-and-feel a client wants for their website (i.e. “web 2.0?, dark, clean, etc.) you’d get a more precise answer if you were to show examples of websites that may have a similar theme that they described.
Keep an emphasis on the bottom-line.

People may not understand what SEO is, or how it’s accomplished, or why valid mark-up matters when trying to achieve a search engine optimized site, but if you talk in terms of results, they’ll be inclined to keep listening. For example, trying to describe the importance of standards-compliant XHTML, you can say: “standards-compliant XHTML ensures that the website’s mark-up is valid and supported by most modern web browsers which in the end means less maintenance and fewer customer support due to browser-rendering issues“.
Keep it simple.

Sometimes we have a tendency to overwhelm employers with technical jargon and over-explanation because we want to show them our knowledge and expertise. There’s no need to explain how you’re going to mock-up the web design in Photoshop (layer by layer, in excruciating detail). Most probably, they don’t care and you’ll only risk complicating things and adding to the client’s anxieties about a topic they’re not well-versed in.
Encourage questions.

It’s always good to figure out any questions or needs for clarification as early as you can to avoid dissatisfaction at the end. Give off the attitude that you’re always willing to answer questions and that no question is too simple or silly. If you have the luxury to meet with a client in person, you can do this by judging their facial reactions to the things you say. If they seem confused, ask: “should I explain further?”. If you’re meeting remotely (emails or phone calls), regularly say things like: “I’d be more than happy to answer any questions you may have”.
Talk using familiar analogies.

A great way to relate information to employers is by using scenarios and situations that are pertinent with their background. Be creative, make analogies funny, and most of all, use it to relay complex concepts. To illustrate with a satirical example: if you were talking to a basketball fan, you could say “using tables instead of div’s for page layout is as bad of a decision as picking Michael Olowokandi over Michael Jordan on your fantasy basketball roster because…“.
Be yourself.

Don’t pretend like you’ve worked on hundreds of websites and that you’ve been doing this for 15+ years… if you really haven’t. If you look uncomfortable or unsure of yourself, it gives off the impression that your trying too hard to impress or appear knowledgeable in the subject. A lot of web designers and developers nowadays don’t hide the fact that they are small, young, and playful. When working in an industry that’s complex and intimidating to outsiders, it’s a welcoming relief to find people that are normal. It can prove to be a plus when you don’t obfuscate the fact that you’re just starting out in the business. It’s easier to talk to a person who’s honest, sincere, and up-front then someone who appears to be B.S.’ing you all the time.

Categories: Webmasters Resources Tags:

9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension

March 19th, 2009 No comments

Whether you’re a front-end graphics designer or a back-end web programmer, if you’ve worked long enough in the field of creating web-based solutions, you’ve no doubt heard about an extension for the Mozilla Firefox web browser called (simply enough) the Web Developer extension. If you have no clue what I’m talking about, here’s a brief overview from Webs Tips to get you familiarized with this wonderful tool.

leadin_9ways

This article lists some practical, everyday uses of the Web Developer extension to help improve your web-building methods. I’ve tried to stay away from the more common and basic uses of the Web Developer extension like troubleshooting layout issues with the Information > Display Div Order option because I feel these have been discussed quite enough in other places. New users, don’t run away quite yet, I think this guide will help you get a rapid jump start into applying this tool into your daily development routine.

So without further ado, here’s nine highly pragmatic uses of the Web Developer extension for Firefox.

1) Change XHTML on-the-fly without changing your web files.

Unfortunately for many developers, we don’t all have the luxury of testing servers and sandbox environments. I for one, confess to developing on live websites even during peak web traffic times.

If you’d like to lessen customer support requests due to an inadvertent display:none; property assignment on the log-in box — use the Web Developer extension to effortlessly check your XHTML modifications before you commit them to the server.

Here’s an (extreme) example of how I was able to change a few of reddit’s XHTML marku

And here’s the modified version:

 

postimg_firefoxwbd

As you can see in the above picture, I changed the top three stories (to something else I’d much read about) and modified the background color to pink (I have an odd affection towards hot pink for some reason).

You can achieve the same results by using the Miscellaneous > Edit HTML Markup option which will open up the Edit HTML tab panel displaying the XHTML of the web page. Unfortunately, the window isn’t color-coded and the Search HTML function doesn’t quite work properly (yet).

Tip: You can change the position of the Edit HTML panel by clicking on the Position icon (right next to the Edit HTML tab on the above screenshot).

To change the CSS styles of the page, use the CSS > Edit CSS option, which will allow you to edit the styles used on the web page.

2) Measure things quickly with the Ruler Tool.

Raise your hand if you’ve ever print-screen’ed, and then copy-&-paste’d the screenshot onto Photoshop just to determine dimensions of certain page objects (like the width of an image) with the selection tool. *Raises hand in shame*

With the Ruler Tool (enable it via Miscellaneous > Display Ruler Tool), you can speedily size-up objects inside the web browser. It’s a great tool in conjunction with outline options such as Information > Display Div Order option or Information > Display Block Size option, allowing you to detect the amount of padding and margin between elements.

postimg_firefoxwbd_03

3) See how web pages look on a non-traditional web browser.

Nowadays, tons of people have mobile devices that lets them view web pages in non-traditional ways. Determine whether your pages render correctly (or close enough) on portable device screens by using the Miscellaneous > Small Screen Rendering option. This saves you from going out and purchasing a Blackberry or a Trio with an internet dataplan just for cross-browser checking.

What it will look like on a Small Screen Rendering device…

 

postimg_firefoxwbd_05

4) Find out how optimized your page is.

Use the Tools > View Speed Report option to automatically send your page to WebSiteOptimization.com, a site that provides a plethora of information about your web page load times like how quickly your page loads and how many HTTP connections are being used among a ton of other things.

There are built-in tools in Adobe Dreamweaver and Flash (if you even have access to them) that simulates download speeds, but nothing beats a free, comprehensive and actual live speed report.

postimg_firefoxwbd_06

5) Populate web form fields instantly.

Don’t you hate it when you have to fill in your custom-built web form for the nth time because you’re testing it? You can quit tabbing and entering junk information on your form fields and switch to using the Form > Populate Form Fields option in the Web Developer extension.

In the example below, you can see that it populates most web forms somewhat intelligently – It was able to guess the email field — but missed the phone number field.

postimg_firefoxwbd_07

6) Find all the CSS styles that affect an element.

For most fairly-proficient CSS developers, it’s quite easy to find the exact selectors that style an element’s properties – fyi: #selector { property: value; }. This is especially true when you’re the original author and/or the styles are contained in one stylesheet.

But what if you were working on someone else’s project… and the project in question has 1,000+ lines of pure CSS goodness, split into several external stylesheets (because Bob a.k.a. “Mr. Modularity” likes to keep things “simple“)? Another scenario you might encounter is being tasked to theme a content management system like Drupal or WordPress and you’re not quite sure where all the external stylesheets are.

For example, the Yahoo! home page has over 2,400 lines of CSS, spread over several external stylesheets and inline styles (Bob, you built this page didn’t you?).

postimg_firefoxwbd_08

If you’re tasked with revising this page, you have two choices: (1) look through, understand, and hunt down the styles you need or (2) decide that you’re smarter (and lazier) than that and so you use the CSS > View Style Information option of the Web Developer extension. With this option enabled, clicking on a page element opens up the Style Information panel which displays all the styles that affect the element.

7) View JavaScript and CSS source code in a jiffy.

One of the ways I troubleshoot rendering issues is by looking at how other web pages do it. JavaScript and CSS are often divided into several files — who wants to look through all of them?

Using the Information > View JavaScript and the CSS > View CSS options instantly displays all the JavaScript and CSS in a new browser tab. This has the side benefit of being able to aggregate all the CSS styles or JavaScript in one web page allowing you to use the Find tool of the Mozilla Firefox browser (keyboard shortcut: ctrl + f for PC users).

8) See how web pages are layered.

It’s often very helpful to determine which page div’s and objects are on a higher plane. Using the Information > View Topographic information gives you a visual representation of the depths of the page elements — darker shades are lower than lighter shades of gray.

 

9) See if your web page looks OK in different screen sizes.

I use a monitor size between 19 – 22 inches (wide screen). This can be problematic because many of our visitors use smaller monitors. Short of switching to a smaller LCD screen to simulate the user experience, I just use the Resize > Resize window option. It helps test whether my fluid layout works well in smaller windows (sometimes you forget to set min-widths for div elements and it jacks up the layout in smaller screen sizes), or if your fixed-width layout displays important content without user’s having to scroll.

Be sure to enable the Resize > Display Window Size in Title option to help you determine the exact dimensions, and also for documentation purposes when you’re taking screenshots of your webpages.

postimg_firefoxwbd_11

So there we are, nine ways you can employ the Mozilla Firefox Web Developer extension to better your web development experience. I don’t claim to be an expert, but I certainly know enough about the Web Developer extension to improve my web-building speed.

I’m LiveBlogging This RIGHT NOW

March 18th, 2009 No comments

Liveblogging may very well be the future of traditional news media and blogging. Now you can stream information live on the internet and Twitter while an event is happening using nothing more than your laptop and free LiveBlogging software.

People have been doing it on a widespread basis for the past year, thanks to a plethora of free LiveBlogging tools that have sprung up almost overnight.

Whether you are a business striving to build a name and reputation in your industry or you are a web designer or web dev pro building a reputation, you need to be aware of Liveblogging and the tools used to conduct it.

We have moved from the “I’m blogging this” world to the “I’m Liveblogging this” world very quickly. People are no longer satisfied with hearing news after it has happened – they want access to news while it is happening.

If you don’t want to commit to sitting at a conference or a lecture typing out what the speaker is saying verbatim, you can opt instead to do Twitter updates that you can send out to any Twitter users that you care to enter into your LiveBlog software package. This gives you the opportunity to get your feet wet with Liveblogging.

Do I Have to Liveblog?

Liveblogging is a great way to build up a following and to network. Invite fellow professionals who you will be attending a conference with to Liveblog with you, thus forging an immediate network and possibly making some good friends along the way as well. We don’t recommend Liveblogging a day at the office, but a day that your company spends at a trade show or a Liveblog of an industry conference are great ways to show people you are immersed and interested in your industry. By the time you’ve checked out any LiveBlogging software you’ll probably want to go to a trade show or event just so you can liveblog it.

How Will LiveBlogging Change Blogging?

A Liveblog of an event will get more hits the day of the event than any other time. Let’s face it, we are a society of instant media gratification junkies and this provides an instant fix. Liveblogging won’t replace traditional blogging, but it may encourage it to become lengthier and meatier than it has been in the past.  Instead of offering just the quick breakdown that the Liveblog offers, bloggers will have to inject more qualified statistics and observations in their post-event content to make people want to read their posts in addition to the Liveblog coverage.

My first exposure to LiveBlogging came from Stephen Del Percio, an environmental real estate lawyer who runs his own blog at greenbuildingsnyc.com. Stephen LiveBlogged GreenBuild, an environmentally friendly building conference. What I found interesting about his LiveBlog is that I kept receiving his updates real time through my Twitter feed, which was both interesting and exciting. It made me feel like I was at an event that I would have loved to have gone to.  I asked him how he was doing it and he responded with a url: www.coveritlive.com.

Cover It Live

While there are a number of Liveblogging platforms out there, Cover It Live is one of the best known and most widely used. It is also completely free. Their rationale is that they are live testing the platform before they start charging for the service. Cover It Live is far from a beta, although those at 2008’s MacWorld conference would probably beg to differ. Despite this somewhat epic fail, the Cover It Live service has worked reliably for other news outlets and bloggers quite well. Readers can post comments and questions in real time on your LiveBlog, making it a truly interactive experience.

Signing up for Cover It Live is just like signing up for any online service. Once you’ve entered your details, you’ll get a box like below giving you the code to cut and paste to put in your site. You can see that we’ve checked the WordPress code, which simply gives you a link instead of an iframe. Note the huge warning at the top of the screen that you can only use Firefox 2.0 plus or Internet Explorer 6.0 plus to use Cover It Live; any browser may be used to view your Liveblog but Safari users must sadly switch.

The Additional Options box below the code gives you some interesting things to do. You can add Twitter users, although this is a tedious process of going in and adding a bunch of Twitter user names. Here’s hoping in the next version you can just put in your user name and it will automatically just import all of your followers. This will mean that all of your liveblogging will go out to your Twitter users as tweets, something to keep in mind when you are actually liveblogging – try to make sure some of your transmissions are under 140 characters to keep it interesting for them – if not don’t worry about it, as they can just go to your live blog to read it if they want more.

You can also e-mail your readers, enter the address of the Liveblog, and get the code for a “Coming Soon” reminder to add to your site. All very cool stuff.

options

Launch Your Live Blog

The interface is extremely fluid and easy to use. It has the feel of a more advanced instant messaging client.  You can go from inserting emoticons to streaming video and audio alongside your liveblog. This is how it looks to you:

blogentry

This is how it looks to the world:

 

If you want to customize the Live Blog window, you can do so in the “Custom Templates” menu that you access from your Account area. You simply sign in, go to “My Account” and then click on “My Viewer Window”. This will then give you a few options, including uploading a background image (which must be 380 pixels by 150 pixels).

If you are embedding the code in WordPress, it simply gives you a link to a popup window rather than a window that embeds the Liveblog on your site.

If I were using Cover It Live on a WordPress site, I would take a screenshot of the Live Blog and include a thumbnail image in the link in order to make it more attractive. If you are installing it in a website, use of an Iframe makes it more accessible and readable within the site itself without needing to click on a link as you have to in a WordPress blog. If you are planning on making extensive use of Liveblogging, you may want to consider the addition of a static page specifically for your Live blogs in order to incorporate the iframe.

Panelists

One of the more exciting features of Cover It Live is the ability to have multiple citizen journalists, or Panelists in the Cover It Live world.  ou can all contribute to the same LiveBlog without risk of anything crashing. This allows you to function as a team, with some people hopefully adding content that others may miss.  For any events that are happening live, such as the US election, this is an excellent tool to have a live conversation about an event among people in different geographic locations.

Tools & Settings

The Tools menu covers some basic items, such as getting embed code in order to embed your LiveBlog in a website or blog. It also features the important Live Edit, which lets you go back and edit items live that you feel that you made mistakes on. You can also view reader statistics in real time, which can be encouraging or discouraging depending on who shows up. You can also invite more readers via e-mail, although you probably want to do this in advance of the event.

 

The Settings menu allows you to show and edit both your Panelists and Twitter users. In both cases, you are best advised to set these up before you start, but the options are there for you to add them on the fly if you need to. You can also disable reader comments, something to consider if you want the entire LiveBlog to be about what you are writing instead of having attention drawn away to the comments of readers.

Media Library & Video

The Media Library is a very powerful tool that allows you to add multimedia to your live blog. You can insert ads on the fly, links to other sites, and create polls. You can also insert text that you have prewritten and post video and audio within your live blog. ShowPrep is a feature within the media library that allows you to create a playlist for your media prior to your Live blog and it functions much like iTunes. While the media library allows you to organize your multimedia, ShowPrep allows you to further organize it by allowing you to organize your media in advance of your presentation. Keep in mind when uploading images that you are limited to a size of 25 mb per image.

You can post both live video and video that you find on YouTube. In order to incorporate live video, you need to use one of three services; USstreamTV, Mogulus, or Qik. This will allow you to live stream an event that you are attending, if you have received the proper permissions from the people holding the event to do so. When you drop the video link into your live blog, your users will see a small window that they can move around and resize however they wish.

 

How to Liveblog Effectively

Now that you understand how to use everything and have booked yourself in at a conference or event, lets go over the ins and outs of Liveblogging:

Ensure Internet access
If you are working a trade show or attending a presentation in a cavernous building, you may actually not have wireless internet access. Contact the event staff in advance to arrange for proper internet access in order to stave off disaster – it really isn’t a Live blog if you’re not, well, blogging live. If disaster strikes, call a friend and have them put up a notice that you are experiencing difficulties on your Live blog.

Scheduling most popular events
Arrange your time at the event so that you are blogging presentations that you know will be popular. At a Search Engine Marketing event, more people are going to want to hear Matt Cutts from Google speak than Joe Schmoe from Klamath, Oregon no matter what the subject is. Treat the event like it is a collection of websites and go to the presentations that you have mentally assigned the highest Pagerank to. Then publicize the events that you will be Liveblogging on your company website or blog.

Promote it
Notify the event organizers and see if they will put up a link to your Liveblog from their website, unless you are attending something like MacWorld where LiveBloggers are a dime a dozen. If there are a number of you, spread out and try to cover all of the events and presentations – don’t all blog one event or speaker. Use your numbers to cover more, not jaw about the same presentation together online.

Use images
Pictures are a great adjunct to your Liveblog. Clear the use of digital cameras and recording devices with event staff beforehand. If you can record live video or audio, that would be ideal. Don’t use live video or audio as a substitute, but post it alongside your Liveblog. You can go back afterwards and cut out the more interesting bits to post on your website later. This will also cement you as a professional in the eyes of anyone viewing your Liveblog.

Follow up
Don’t forget to go back over your Liveblog later and use it as research material to put together more cohesive blog posts for your website. It can be argued that a Liveblog may at the very least have a place as a research tool if you aren’t comfortable in broadcasting the results online quite yet. As with everything, there’s no time like the present to try it out.

The most important thing is to not be afraid to make a mistake. Most platforms feature a live edit feature, including Cover it Live. If you misspell something or get something a speaker said wrong, don’t sweat it – just edit it and move on. Once you step into the world of liveblogging, you probably wont’ be able to go back.

Written exclusively for WDD by Angela West and edited by WDD.

Categories: Webmasters Resources Tags: , ,

Quick and Easy WordPress Development on a Mac with MAMP

March 18th, 2009 No comments

Ready for some WordPress development on your Mac? First, you need to be running Apache, MySQL, and PHP.

Although Mac OS X comes with Apache and PHP, you don’t want Apple’s automatic software update to break your development environment by changing your working versions of PHP and Apache. Plus, do you really want to spend time tweaking MySQL?

In this guide, I will show you how to quickly install and configure a working WordPress environment including Apache, PHP, and MySql.

1. Turn off Web Sharing

First, you need to make sure the Mac OS X installation of Apache is not running. Navigate into your System Settings and check the “Sharing” settings. You want to turn off “Web Sharing” if it is currently enabled.

system-settings-sharing

2. Use MAMP

MAMP is a free and ready-to-go install of Apache, MySQL, and PHP for Mac OS X. It is developed by Living-e. They also have a “Pro” version at additional expense. One of the great things about MAMP is that it includes almost every PHP option pre-installed and enabled. As a bonus, it comes with phpMyAdmin to help you work with databases quickly. To get MAMP, open up your web browser and go to http://www.mamp.info/en/download.html. Download MAMP, mount it, and then drag the MAMP folder into your Applications folder. You can safely ignore the “MAMP Pro” folder.

mamp-website

3. Configure MAMP

Go into the MAMP folder and then open the MAMP icon.

The status lights will tell you if Apache and MySQL are running. If the lights are red, click “Start Servers”. Next, modify the ports for Apache and MySQL by selecting “Preferences” and select “Set to default Apache and MySQL ports.” You should end up with port 80 for Apache and port 3306 for MySQL. Next, click on the Apache section and change the Document Root to a location that you can quickly access. All your websites will reside in this location, so you want to pick something that you can navigate into easily. I like to use a root folder called “webspace” that I created in the Finder.

 

4. Make a Database for WordPress

WordPress requires a MySQL database to store posts and settings. You already have MySQL running, but you need to create a separate database for each WordPress website that you develop on your Mac. From the main MAMP menu, click on “Open start page.” Your web browser should pop open up to a “Welcome to MAMP” page.

 

Next, click on “phpMyAdmin” to launch the phpMyAdmin web application. Look for the section entitled “Create new database” and name your database. As an example, enter “wp-superblog” and click “Create” to make a database.

 

5. Make a folder for your website

Within your “webspace” folder, make a new folder with the name of the website that you will be developing. As an example, make a folder called “super-blog” to correspond to the database you made.

webspace

6. Install WordPress

The easiest way to download WordPress is to point your web browser to http://www.wordpress.org/latest.zip Unzip the WordPress package and copy everything in the WordPress folder into your “super-blog” folder.

7. Configure WordPress

Navigate into your “super-blog” folder and locate a file called “wp-config-sample.php”. Open that file and change both the database username and password to “root” on lines 4 and 5. Next, make sure the name of your database (“wp-superblog” in our example) is shown on line 3. Save the changes you made to this file and then rename the file “wp-config.php”.

picture-3

8. Take a Test Drive

Open up a web browser and navigate to “localhost”. You should see a folder for each website you are developing. In our example, you should see a folder named “super-blog”. If you click on it, you should instantly get to your new WordPress website.

picture-2

9. Turning MAMP on and off

When you are not developing and testing a website, you may want to turn off Apache, PHP and MySQL. MAMP comes with a dashboard widget that will turn your environment on and off instantly. You can find the widget in the MAMP folder.