meaddesign.net

Form Validation Part 3

Bill — Tue, 06 Sep 2011 03:56:38 +0000

Part 3 of our form validation series gets into using AJAX to submit form data without having to refresh the web page. This is really nice for web applications where you want to have more control over the user’s experience. This lesson involves a little bit more PHP. If you completed part 2, you don’t really need to download the start files, as they are the same thing as the completed files from part 2.

Note: The server side validation is still in place for this lesson, so we will still need to use the local server so that the PHP can run. Check out MAMP for the Mac, or XAMPP for Mac, Windows or Linux. All of them are free.

The next lesson will look at how to use the jQuery validator plugin to make validating form data even easier. We will also look at more complex forms and additional form input types. Since we were eventually going to end up using the validator plugin anyway, I have left the form simple up until that lesson.

Difficulty: easy
Skills: Light HTML, Light JavaScript (jQuery), Light PHP
Time Required: 1 hour
Start Files: MeadDesign Forms Part 3 Start.zip
Completed Example Files: MeadDesign Forms Part 3 Complete.zip
Presentation: Forms Part 3

Form Validation Part 2

Bill — Tue, 06 Sep 2011 03:00:13 +0000

Part 2 of our series on form validation brings us into jQuery. The starter files basically include a very slightly modified version of the form that was created in part 1. This version is interesting to compare with the straight JavaScript version because you can see a few of the advantages you have going for you when you use jQuery. Of course it gets even better when you use the validator plugin. That will be coming up in a later lesson. For now, we are just working with a simple form just to see how validation works with straight jQuery.

In the next lesson, we will look at submitting a form with jQuery using AJAX so that the page does not have to refresh. If you did not check out part one, please do that so you can see the whole progression.

Difficulty: easy
Skills: Light HTML, Light JavaScript (jQuery)
Time Required: 1 hour
Start Files: MeadDesign Forms Part 2 Start.zip
Completed Example Files: MeadDesign Forms Part 2 Complete.zip
Presentation: Forms Part 2

Form Validation Part 1

Bill — Mon, 05 Sep 2011 22:51:02 +0000

Ok, there is nothing more boring than forms. But it is really important for us as web designers and developers to know how to capture information put into forms, validate it on both the server side for the person who is collecting the information and on the client side for the person filling out the form. This lesson shows basic validation on both the server and client sides using PHP (server) and JavaScript (client).

Note: In order to do this lesson, you will need to have a local server installed so that the PHP can run. Check out MAMP for the Mac, or XAMPP for Mac, Windows or Linux. All of them are free.

Parts two and three will look at using jQuery to make validation a little easier. Part four looks at using the awesome jQuery validator plugin. Part 5 gets into HTML5 and the awesome stuff we will be able to do with forms, once those features are supported by browsers. I strongly recommend working through all the parts to get the full scoop on html forms and validation.

Difficulty: easy-moderate
Skills: Moderate HTML, Light PHP, Light JavaScript
Time Required: 1 hour
Start Files: none
Completed Example Files: MeadDesign Forms Part 1.zip
Presentation: Forms Part 1

Art Institute Portfolio Show

Bill — Sun, 04 Sep 2011 19:22:13 +0000

Art Institute of California in Sacramento will be celebrating it’s graduates at the upcoming portfolio show on September 22nd, 2011. I am really excited about this particular group of graduates. Some of my best students and many from my first group at AI are graduating. Also, we are planning to put on something special at the show. In the past students have made boards and printed out work. This time we are trying out projectors and live displays of their work. I think it is going to be very exciting and cool.

Be sure to come and check it out. It is open to professionals from 3pm to 5pm and open to general public, family and friends from 5pm to 7pm.

Web Professionals Speaker Series

Bill — Sun, 04 Sep 2011 18:43:47 +0000

Summer 2011 has brought some exciting speakers to Art Institute in Sacramento. Each week, for four weeks, I have scheduled great speakers to come in and talk about topics of interest to anyone who is using the web professionally. Web designers/developers, graphic designers, filmmakers, and artists all benefit from these talks. Here is a full list of the speakers. Also, here is a PDF Flier for the series. Special thanks to Sean Ireton for designing the logo.

Augustine Ideas
Wednesday, August 17th
Learn what it’s like to work at a Global Marketing and Communications Agency. We’ll profile one client and how we integrated branding, graphic design, web design, video production and social media into a harmonized effort which led to measurable results.

Bourn Creative
Wednesday, August 24th
Jennifer Bourn will show you how to transform your business into an extraordinary and lucrative brand that keeps your phone ringing and your bank accounts full.

Rosebud Designs
Wednesday, August 31st
Freelance from A to Z. Jenn de la Fuente will walk you through her workflow and her favorite tools to use for everything from planning to design, to coding and bookkeeping.

Webvanta
Wednesday, September 7th
Explore some of the challenges designers and developers face when building products that work for both desktop and mobile devices. Christopher Haupt, CTO and co-founder at Webvanta Inc., presents a case study from a recent client of Webvanta’s hosted Content Management System.

Presented by the Web Design & Interactive Media Department and Career Services for the Art Institute of California – Sacramento

Intermediate Web Design

Bill — Thu, 04 Aug 2011 17:34:23 +0000

Another one of my favorite courses to teach. This is where students delve into some of the deeper topics of web design and techniques used all across the web today. We get into CSS3, progressive enhancement as well as testing across browsers to make sure our sites work in old crappy browsers, such as Internet Explorer 6. Students build some great projects and acquire a lot of experience along the way.

Senior Project Development

Bill — Thu, 04 Aug 2011 17:24:11 +0000

This is a course where students develop and deploy a project for a real client. The training wheels come off and they get to put into practice all the bits and pieces that have been accumulating over the course of all the other classes. I love seeing what students come up with and the various problems that they have to troubleshoot and solve along the way.

Portfolio 2

Bill — Thu, 04 Aug 2011 17:21:00 +0000

Portfolio 2 is the capstone course for students graduating from the Bachelors Degree program at Art Institute. This is where everything comes together and culminates with a show for professionals in the industry as well as for family and friends. Students put a polish and shine on their work as well as present with consistent and clear branding. It is their opportunity to put their best foot forward as they enter the industry.

Portfolio 1

Bill — Thu, 04 Aug 2011 17:18:44 +0000

In this course students at Art Institute begin developing their personal portfolio sites. The focus is on developing the branding and related materials such as business cards, resumes and the site itself that will hold their portfolio work. Students graduating from the Associates degree program also have to get their best quality work into the portfolio as well.

Web Designer’s Toolbox

Bill — Thu, 28 Jul 2011 21:34:03 +0000

I gave this presentation at the Sacramento Web Standards group in July of 2011. I can’t say it is the best presentation I have ever given, but it is kind of fun to look at different tools that web designers can use from planning to development to billing at the end of a project. Mark Aplet, who is leading the group suggested that we have a few people present their entire workflow. I actually think that is a great idea and I am look forward to seeing that kind of presentation.

You can view the slides here (shared google presentation, opens in a new window.)

We had a great group and others shared additional tools as well. Feel free to leave comments with some of your favorites as well.

Additional Tools

Zengobi Curio – Mind Mapping
http://www.zengobi.com/products/curio/

Scadaplan – Project Management
http://www.scadaplan.com/

So1o – Project Management
http://www.thrivesolo.com/

Notable – Project Management
http://www.notableapp.com/

Evernote – Cross Platform Notebook
http://www.evernote.com/

Xmarks – Bookmark Syncing
http://www.xmarks.com/

Espresso – Coding Environment
http://macrabbit.com/espresso/

Textastic – Code Editor for iPad
http://www.textasticapp.com/

Codasaurus – Code Editor for iPad
http://grilledbacon.com/

Lorizzle – Goofy Gangsta Content Generator
http://www.lorizzle.nl/

Blinksale – Billing / Invoicing
http://blinksale.com/

QuoteRobot – Generating Proposals
http://www.quoterobot.com/

Getklock – Time Tracking
http://www.getklok.com/

CashBoard – Time Tracking and Billing
https://www.cashboardapp.com/