Just another WordPress.com site

Web Class

PHP: pChart

Image

I am finishing up the beginning course for PHP and was asked to write a blog on a related topic.  I came across an article from Smashing Magazine about 50 useful tools for PHP developers. You can find the article here.  (the article is from 2009, but many of the technologies are still being updated/supported today)

There were tools for everything.. Debugging, Testing/Optimization, Documentation, Security, Code Compression, Version-Control, etc.  While many of these would probably be far more useful, far more often for any PHP developer, the creative/designer side of me was drawn to the Graphical tools mentioned in the article.

The first one I read about was pChart. It is a “class oriented framework designed to create aliased charts.”  This tool allows you to pull data from SQL queries to populate and construct a graphical chart.  Some of the core features of pChart are:

  • Native anti-aliasing (for all basic objects)
  • Shadow support (drawn using the internal anti-alias algorithm)
  • Alpha-transparency (directly computed by GD binaries for performance)
  • Spline, cubic curves

pChart has created classes that allow you to “fully configure your series and axis” so the raw data is stored with clean and efficient code. The site provides documentation for these classes on their website. There are custom classes for:

  • Building your data series (addPoints)
  • Defining the name of X/Y Axis (setAxisUnit)
  • Define the way to show values (setAxisDisplay)
  • Bind a series to one axis (setSerieOnAxis)
  • Name axis (setAxisName)
  • Set position of axis (setAxisPosition)
  • and many more..

There are mutiple chart formats you can create with pChart. You can create a standard chart such as plot, line or curve charts.  You can also create bar and stacked bar charts, radar and polar charts, 2D and 3D pie charts, linear bubble charts and more!  Sample documentation is given for these individual chart types on the website as well.

Some of the extended functionalities of the pChart library are pSpring that allows you to create a visual rendition of a network, sandbox engine that allows you to design a chart and generate the code, and pCache that allows you to store a cached version of previously created charts (from SQL queries already generated by other users) and output it directly for better performance on frequently viewed data sets.

For more information or help on setting up pChart on your server and generating charts for use on your sites, visit pChart’s forum support section at wiki.pchart.net/forum/.

Sources: http://www.SmashingMagazine.com, http://www.pChart.net

Advertisements

Say What?

COMMUNICATION is a key factor in the success of a web designer or developer.  Communication in web design doesn’t just entail verbal communication, in fact, visual communication is extremely important too.  A breakdown in communication can lead to unhappy clients, long hours spent redesigning something you thought was on track and websites with poor usability.

What are the three main areas of communication designers and developers need to focus on?

  1. Communicating your services to others
  2. Communicating with your clients
  3. Communicating with your website’s end users

Let’s focus on the first one: Communicating your services to others

If you’ve ever owned a business, you know clients do not come to you without knowing you exist, what you offer (products/services) and why you are the best option for them.  In this field, you absolutely must have a web presence and develop a campaign to promote your website.  Your website needs to communicate to potential clients all of the services you offer, demonstrate knowledge and experience in the technologies behind those services and key points and examples of why your business is the best option compared to your competitors.

Next, you need to focus on: Communicating with your clients

After a client has hired you to create a website for them, you need to sit down with the client and communicate effectively to make sure you understand exactly what the client is looking for.  You need to ask the right questions and lay the framework for what can be expected during the design process.  Communicating with the client about what is expected from them (i.e. custom artwork, blog post content, logos, etc.) and the timeframe within which they need to submit those items is crucial to the success of the project.  You also need to communicate up front any deposits that need to be made, contracts signed and a projected completion date.  Make sure to explain to the client that any delays with content submission on their part will result in an extension of the project deadline.  Throughout the project you need to communicate with your client about where you are in the process and let them know if you have run into any problems that may affect the deadline.  Keeping your client informed and making them feel like they are part of the process will lead to a more positive experience for them.

Lastly (but just as important) you need to focus on: Communicating with your website’s end users

Our business is to create websites for clients that will be attract users, not scare them away.  Just as you’ve invested a lot of time, effort and money into getting an individual or company to hire you, your client has invested those same things into attracting clients, members, users, etc. of their own.  Creating a site that will engage their users and make them want to return to the site should be a high priority.  After talking to the client and understanding the purpose of the project, the target audience and the functionality needed, you need to focus on how to incorporate all of those things into a website that is easy to navigate, visually appealling and organizes content in a way that is easy to understand.  Even small things, such as adding alt tags to images and creating navigation that doesn’t require scrolling will go a long way to ensure your site it accessible across multiple devices and to users of varying abilities.  Always ask yourself, does this site communicate to me in 5 seconds or less What It Is For – What I Can Do Here – Where I Should Go Next.  As designers and developers this becomes increasingly challenging the more experienced we are.  Having outside users test your design and functionality is a great way to make sure you are communicating everything you need to on the website.  As George Bernard Shaw once wrote: The single biggest problem in communication is the illusion that it has taken place.

Focusing on these three areas of Communication and using outside sources if necessary to make sure you’re on track, will lead to a better overall experience for both you and your client!


Smarty templates

As part of my database development and Drupal class assignments, I was asked to research something related to the course. I have been learning about Drupal and how content is added to a site, but I knew there were other ways of adding content other than just typing it directly into the CMS. For instance, if you have an e-commerce site with regular customers who have signed up for an account, they may have unique content that should be pulled into certain nodes within your site based on their specific login credentials.  I decided to look into Smarty templates and what they are, how they work, and why they are used.
Smarty is a template engine for PHP. It allows you to use the more simplified Smarty syntax to create templates which are compiled and transformed into PHP scripts and are cached for quick retrieval. The entire concept behind Smarty templates is to separate application logic from presentation logic. When you are trying to create a semantic HTML site and then attempt to add in PHP it gets messy and creates workflow issues when you have designers and developers working on a site simultaneously. When you have a large amount of content (especially dynamic content) and multiple pages within a site,you can use Smarty templates to separate the server-side logic from the display logic to keep coding cleaner and easier to manage on large sites.
To begin using Smarty you should visit the website at http://www.smarty.net and look around, view the link Crash Course and look through some of the sources to templates created by others in the FAQ(wiki) section of the website. After you have familiarized yourself with Smarty and how it works you can follow these steps:

  1. Download the Smarty library files from this link: http://www.smarty.net/download
  2. Unzip the files/open the Smarty folder/ copy the ‘libs’ folder into the root folder of your website
  3. Create the following folders in your libs folder: ‘templates’, ‘templates_c’, ‘configs’, ‘cache’
  4. Create an ‘index.tpl’ file in your templates folder
  5. Create an ‘index.php’ file in your htdocs folder (located in your site files)

(Note: this is only a brief overview of the steps for setup – for full documentation, see the Smarty website)

Now that your files are in place, you can open your index.php file in Notepad++ and add the following:

<?php
require_once( ‘smarty.class.php’);                  (this calls for the Smarty library/code)
$smarty = new Smarty();                  (this creates a new object – know as a smarty)
?>

This is the file where you will create objects from arrays and display them in your index.tpl file.

Here is an example of a couple simple/static smarty objects created to populate a welcome section on your homepage (refer to the Smarty website for info on using arrays):

<?php
require_once (‘smarty.class.php’);
$smarty = new Smarty();
$smarty->assign(‘name’, joe smith’);       (creates a Smarty object called $name,value = ‘joe smith’)
$smarty->assign(‘username’,’jsmith2345′);      (creates Smarty object called $username,value = ‘jsmith2345’)

$smarty->display(‘index.tpl’);  (states where these Smarty objects will be used/displayed)
?>

Now that you’ve created your Smarty objects you can write the template markup in your index.tpl file (example):

<html>
<head>
<title>Welcome Page</title>
</head>
<body>
{$smarty.now|date_format:%D}<p>
Hello, {$name|capitalize}<br>
username: {$username}<br>
</body>
</html>

The resulting output would be:

09/08/11

Hello, Joe Smith

username: jsmith2345

This is just a very basic example of using Smarty.  While using Smarty you can create an array (and arrays within an array and so on..), loop over an array, cycle through values, call functions, control caching and do many more things to make your Smarty objects and templates do what you need them to for your sites.  For more information, and to access the Smarty files visit http://www.smarty.net/.


Choices

Every minute of every day we are given opportunities to make choices. Some choices are easy, some are hard, some are small, some are big, some are insignificant, and some are life-changing. We make choices about when to get out of bed, what to eat for breakfast, what to do for the day. In web design and development there are lots of choices to be made everyday too!

For example, designers might choose what color scheme, fonts, images to use on a site. Developers might choose what programming languages work best for them, how to approach the functionality requirements of a site, what queries to write, which shopping cart to use for the latest ecommerce site project, etc. Designers and developers aren’t the only ones making choices though! In the beginning, the client is making the choice about what they want out of their website and which person or company they want to hire to build that site for them. They may decide to approach one person/company or a few to compare – then they make other choices based on those decisions. Once a site is completed and live, users access those sites by entering search terms and choosing which website(s) are the best fit for what they’re looking for. Users also make choices about whether or not to stay on a site they visit or move on to another.

All these choices are important ones to consider when you are designing and developing a website. You need to think about what choices a client might make before they approach you, so you’ll know how to market your services and ‘sell’ the client on your experience and talents. Then you need to ask the right questions, so you can get a feel for what the client is looking for when making their choice for a designer/developer. Whether you’re a designer, developer or both – you’ll need to at least be familiar with the choices that are made for both aspects of a website project so that you can see the ‘big picture’ and understand your role in that project. You also need to familiarize yourself with research and statistics on how users make choices about what website(s) to open and how functionality and design have a direct affect on the time a user spends on a website.

“Let the views of others educate and inform you, but let your decisions be a product of your own conclusions.” (Jim Rohn)

For more information on the importance of choices in web design read the article: Design Choices Can Cripple a Website by Nick Usborne at A List Apart


“In a Perfect World…”

I had the privilege of job shadowing at ONEsite for a day this week – what a great experience!  This was the first time I had the opportunity to observe the workflow that goes on behind the scenes with web design and development  (and the first time I’ve ever seen the ‘stand-up’ desk!.)  One of the phrases I heard repeated throughout the day was “In a perfect world..” because in the world of web design and development you have browser-compatibility issues, constantly changing technology and new challenges with every project.  In a perfect world, everything would work right the first time, you could design without limitations and ‘bugs’ and ‘glitches’ wouldn’t exist.  Instead you have an evolving world where you commit to a lifetime of learning and perfecting your craft – but that’s what keeps things interesting! – and at the end of the day (or 3-month project…) you can sit back and be proud of what you’ve accomplished.

I started out the day with Derrick, one of their developers and he walked me through some of the PHP, SQL and JavaScript he was using as he worked on creating an elastic search function for a website and pulling content into the site from a database.  This particular site was for a video game company and will be available in multiple languages.  He explained how they designed the site, knowing that the content would have to be available in multiple languages and the content would change based on what gaming console choice the end-user selected.  The results of just these features alone, meant that each product had upwards of 9 or more different content sets just for the product info pages.  He also showed me where employees are assigned ‘tickets’ for bugs or other issues that need to be addressed on client sites.  While I was observing, he fixed a bug in a site that has a reward points feature.  Users are rewarded points that they can redeem for prizes – the problem was that the coding behind the feature would allow them to select a prize and the feature would ask for all the shipping information before actually letting the user know if they had enough points for the prize.  He changed the coding to correct the order of those functions and then submitted it for approval, after which point, it would be reviewed, tested and then added to the live site.

Next I met with James, a designer at ONEsite.  He showed me around the ONEsite control panel and the drag and drop feature that allows the designers to quickly add modules to a page with custom html content or Smarty-templates and Wonders.  He was working on creating a web page based on a mockup from the client in .jpeg format.  He showed me how he sliced images from the mockup in Photoshop and added them to the page.  They used original artwork with the typography included for links to pages on the website.  He demonstrated how they could drag and drop sections into a web page they were designing and then choose from an extensive list of template options or add custom html content to the section.  We talked a little about HTML5 and CSS3 and I asked if they used web fonts on many of their sites.  He said they normally didn’t because of the processing time and multiple server requests required to implement those font kits on a website.

Afterwards, I met with Whitney, a project manager who was trouble-shooting, trying to determine why a particular section of a web page wasn’t showing up.  She referred to this section/feature as a “Wonder” – I had never heard of a Wonder before and tried researching to figure out exactly what it was, but could only find references to it on the ONEsite website.  From what I observed, and read on the website it’s a custom module created by ONEsite that provides an interface for clients to go in and update content (i.e. text, pictures, etc.) on their own after the site is live.  After trying different options on this particular project and getting nowhere, the creative director sent an IM over with a suggestion and she added it to the code and it worked!  Once the Wonder appeared on the page, I watched her work through the styling of it.  It required more custom Photoshop work to create an original background gradient with decorative lines and a separate image for the hover state of tab links that looked like an arrow pointing to a slideshow feature that was also included within the same Wonder.  This feature was included on the website to resemble a similar flash feature the client had seen on another site, but without requiring the use of flash.

It was really interesting to see what a typical day for an actual designer or developer is like.  Everyone was very welcoming and took the time to explain what they were doing.  It was a great experience and I gained a better understanding of how I’ll be using my skills after I’m done with the program.  Thank you to everyone at ONEsite for this great opportunity!


Excellence

“Excellence is doing ordinary things extraordinarily well” ~John W. Gardner

Every day we have opportunities to strive for excellence.  Whether it be at home, at work, at school etc.  Before you begin a task, you’re faced with a choice.. Do I do this to the best of my ability, or do I do just what I need to get it done?  This is a choice I face with each new project or assignment I’m given in the Web Developer program.  I know that I can just rush through an assignment and get it done faster, but I’m not going to school just to get a certification – I’m here to learn!  I know that if I take the time to really give something my best effort I will not only produce work with a higher quality, but the benefit of experience from the extra time and effort will help me absorb the information I’m learning and be able to draw from it as needed in the future.

You have to commit to a lifetime of learning in web development and that can be very difficult if excellence isn’t a priority for you.  It’s not just about exhibiting excellence in the presence of your peers, it’s about knowing that you put forth your best efforts and can be proud of your accomplishments.


Workplace Ethics


There are too many people who think that the only thing that’s right is to get by, and the only thing that’s wrong is to get caught. ~J.C. Watts

It has been said that having ethics is doing the right or moral thing when no one is looking.

So what does that mean?

  • It means that you do your job to the best of your ability every day.
  • It means not using your cell phone or playing on the internet when nobody’s around.
  • It means going outside your job description to help someone or do something that benefits the company.
  • It means always being professional.

Every employer strives to determine whether or not a potential employee has a good work ethic. This is crucial for companies who invest time and money into hiring and training new employees.  Employees with a bad work ethic can easily ruin a company and it’s reputation.

Over the years I’ve noticed different businesses that are notorious for employees that are rude and never helpful.  I have also noticed businesses that have happy, helpful employees that go ‘above and beyond.’  (Which one do you think you would patronize?)   There are many occasions where an employer hired someone who they believed was a good candidate, only to find out from complaining customers that they were wrong.  However, I think some of the responsibility falls on the employer as well. In an age where companies expect employees to perform more and more duties without an increase in pay and instances of loyal employees spending their entire careers dedicated to one company, only to suddenly find themselves without a job, has led to a decline in the morale of many employees.  With a little research, you will discover there is a new trend emerging among companies that recognize that happy employees = productive employees!
Here is an interesting article on the effect of employee morale on production: Happy Staff

Having a good work ethic makes you a valuable resource to your employer and can open the door to great opportunities in the future.

For more information on how to improve your own work ethics, check out this article: How to Improve Your Work Ethic in 3 Easy Steps


Playing around with HTML5 & CSS3

I LOVE all the new features in HTML5 and CSS3! I created a page using some of the features that are easy to implement now and still allow a website to function in various browsers. (with a few vendor prefixes and IE workarounds)
**I’ve included links to the website at the end of this article.

There are many websites that offer information on browser compatibility for HTML5 and CSS3 so you can begin experimenting with both and have an idea about what features are best to try now and which have little or no support.

A few sites I recommend:

CSS3 Checklist
A browser support checklist providing an overview of the different browsers and their compatibility with CSS3 features.
html5Test.com
Determines what browser you’re using and ‘scores’ it based on how many HTML5 features are supported. It gives you a breakdown of each feature and your browser’s level of support. It has a tab for viewing how other browsers rank as well.
CanIUse.com
Covers both HTML5 and CSS3 and provides a customizable filter to target compatibility info on specific features in specific browsers – you can even specify previous/current/future versions of each browser!


HTML5

I’m excited to experiment with the new features offered in the current HTML5 spec. Especially those related to forms and adding functionality without the need for additional lines of JavaScript. Once implemented with more cross-browser compatibility – you can use these features to make your forms more user-friendly! I did discover that the incredibly simple DOCTYPE declaration for HTML5 didn’t affect my site’s functionality in Firefox, but when I replaced XHTML elements with some of the new HTML5 elements (i.e. header, section, article, footer) I started seeing some crazy things in the browser because I was in version 3.6 – it is supported in Firefox’s recently released 4.0 version.
*While it’s very important to learn how to use these new features – it’s equally important to remember that most of them are still in the experimental stage and you should be cautious about using them on client sites until there is more cross-browser support.


CSS3

So what about CSS3? My favorite features of CSS3 are the ability to use web fonts, gradients and those wonderful rounded corners you get with border-radius. Yay for CSS3!! I also added drop-shadows and played around with the opacity settings on some of my images.

*Something else I discovered along the way!:  You can change the opacity of images embedded within the HTML document with the CSS3 “opacity” property but if you insert an image in your CSS file with the “background-image” property and then try to change its opacity, you will end up changing the opacity of the entire section within which the image was inserted.

A couple of ways around this:

You can create a psuedo-element within the HTML document and then reference it in CSS to insert the background-image. This will allow you to apply opacity to the image, but then provides some positioning challenges within the page.
(not semantically correct, but an option)

Another option is using relative and absolute positioning within CSS to create pseudo-parent/child elements that prevent the entire element from applying the opacity setting. See: ImpressiveWebs.com for more info on this workaround. (thanks @wddatft)


While HTML5 still lacks basic compatibility – CSS3 is fairly easy to implement into your sites now, if you use the new features sparingly and as an enhancement, rather than an integral part of your design. I can see myself using the CSS3 features I mentioned earlier in a lot of my future projects and look forward to playing around with the other features I haven’t used yet.

Here are a few websites I found helpful on HTML5 & CSS3:

CSS3Please.com
A generator where you can see real-time application of CSS3 features.

FontSquirrel.com
Love their @font-face kits!

5StepstoHTML5.com
An overview of HTML5 in a site created with HTML5 & CSS3!


**My Assignment: Create a one-page website using HTML5 & CSS3 – Theme: Seasons


Link to ‘Seasons’ Website:

For browsers that support new HTML5 elements Click here
For browsers that don’t Click here
For Internet Explorer users Click here 😛


Respect in Web Design

There is new talent joining the world of web design and development every day, so how do you stand out from the crowd and keep clients coming back to you vs. someone else?

RESPECT!

You gain respect with both clients and others in your field by keeping on top of the latest technology and standards and producing work that you can stand behind.  But – it’s not all about gaining respect by impressing others with tech talk and fancy websites… It’s also about showing respect for others.  You need to establish yourself as the expert in the field, but not at the expense of discounting what your client or a colleague has to offer.  Not respecting the experience and input of a fellow designer can prevent you from learning invaluable information or tools of the trade that might help you land that next big project.  Not respecting the opinions, desires or input from a client can cost you lots of money in lost contracts!

There’s another aspect to the topic of respect that deserves mentioning:

As web designers and developers, we represent our field through our interactions with others, our portfolios, blog posts, etc.  Always be mindful of whether or not your actions will gain respect for the field or hurt it’s reputation.  Individuals and companies are always looking for ways to save money and many think one option for doing so is creating their own websites, or finding someone who will do it for a nominal fee.  I’m a member of a local and state photography organization that emphasizes the importance of gaining respect for your knowledge and skills and showing clients why investing in your talents is a smart choice.  By believing in what you do and taking pride in your work, you gain the respect of your existing and potential clients and add worth to your product.  If every web designer and developer applied this to their work imagine the effect it would have on our industry!

More on this topic: You Are Not a Robot by Jonathan Kahn is a great article from A List Apart about the perception many have of web designers and how we can improve respect for our field.


Professionalism in an Inter-Connected World!

In today’s age of social networking and open forums, professionalism now encompasses much more than just how you conduct yourself at the office.  We are all inter-connected through social networking websites, blogs, chatrooms, online forums and other forms of media.  Anything you post on the internet can potentially be seen by anyone, including current or future employers, so use caution and common sense when using the internet and always conduct yourself in a professional manner. Here is a great article on how your online conduct can impact your professional career: How social media can cost you your job!

So what does ‘professionalism’ mean exactly?  Here are a few examples on how to conduct yourself online and offline:

  1. Be respectful of all individuals and communities with which you interact online.
  2. Be polite and respectful of other opinions, even in times of heated discussion and debate.
  3. A professional looks, speaks and dresses like a professional. An amateur is sloppy in appearance and speech.
  4. Respect copyright, privacy, financial disclosure and other applicable laws when publishing on social media platforms.
  5. A professional learns every aspect of the job. An amateur skips the learning process whenever possible.
  6. A professional jumps into difficult assignments. An amateur tries to get out of difficult work.
  7. A professional produces more than expected. An amateur produces just enough to get by.

source: Tips for Success.org and article:Acceptable Use of Social Networking Sites

Today’s job market is much more competitive than previous years. Many employers are using social networking sites to narrow down a list of candidates for a position.  They look for examples of character and professionalism in determining who they will hire.  Some of the examples listed above, may be exactly what your next employer is looking for in their ideal candidate – so be mindful of what you post and ask yourself this question: Will you make the grade?