The mind of a Web Developer

I admit that all of this true.  And yes, regular expressions are best started from scratch instead of editing an existing one.

webdev_mind

Web Design and Development Assignment

Project Details

This is a 2-part project comprising both Web Design and Development. You are free to begin working on PART 2 of the project at any time provided you are able to submit PART 1 at the designated deadline of Jan 18.

PART 1 is where you will design a site for the preselected client, while PART 2 would be the final HTML/CSS conversion of those designs. It would be unwise to submit a highly complex design if you are unable to develop it in HTML/CSS.

All submissions need to be emailed to me at the address given in class no later than 12 midnight (Ateneo time) of the assigned date. Late submissions will not be accepted.

Part 1 (Jan 18)

DEADLINE: January 18, 2010 (12 midnight). Late submissions will not be entertained.

PROJECT DESCRIPTION: Design a site mock-up based on the attached client specifications (see download link below).  The submitted design must conform to the requirements of the client and exhibit the objectives of the project.

  • Target resolution: 1024 x 768
  • Save each design for a new page as a separate JPG file
  • Designs need to be placed inside a mock-up “browser” of your choice. This makes it easier for the client to visualize how the site would look. No PDF submissions.

GRADING

  • Grading will depend on your creative approach to the requirements and how accurate does it answer the needs of the client.
  • You are allowed to use only images which are considered “royalty-free,” are owned by you, or those of which you have the consent of the owner to use.
  • Trademarks or other copyrighted material of any third-party is off limits (unless owned by client).
  • Bonus points will be given to properly commented HTML/CSS code.

Design 5 pages at minimum. These 5 pages need to be linked to each other when you start developing it.

Remember, an out of this world design is useless if your client can’t visualize it. Also, when it comes to web design, less is ALWAYS more.

OUTPUT: One (1) ZIP file containing all the JPEG files of the site mock-up.  JPEG files must be placed inside a single folder so as not to spill all over the place when unzipped. Folder will be named using your student ID no.

DOWNLOAD: AGI Web Design Brief

Part 2 (Jan 22)

DEADLINE: January 22, 2010 (12 midnight). Late submissions will not be entertained.

PROJECT DESCRIPTION: Develop the previously submitted JPEG files in HTML. All pages will be tested against Firefox 3.5 in Windows 7 for compatibility. All websites will be checked against the initially submitted JPEG files for accuracy.

OUTPUT: One (1) ZIP file containing all the files needed for the site to function (HTML/CSS, etc.). Files must be placed inside its own folder so as not to spill all over the place when unzipped. Folder will be named using your student ID no.

Things to remember

  1. Web is not print. Before you place that fancy watermark, ask if it’s really necessary to even have it there.
  2. Don’t forget to add your unit of measurement in CSS (px/em/%).
  3. Use the right image format for the right image (GIF/JPG/PNG).
  4. Alternatively, only use an image if there is no other way to prove your point
  5. Before you center an element in CSS using margin, it must first have a designated width or else it won’t work.
  6. Add negative space. It makes the content more readable and the site more easy on the eyes
  7. Always include a link back to the Home Page
  8. Typographical errors are the #1 source of headaches for code which doesn’t work. Before you start banging your head on the table, see if you typed everything correctly.
  9. Design a neat and clear navigation.
  10. Sites aren’t Rubic’s Cubes, where your visitors have stop everything and think before knowing what link to click.

If you have any questions, just leave  a comment below.

Classes tom

My trip’s been postponed. That being said, our class tomorrow will continue as usual.

Understanding CSS Floats

A simple introduction into the proper use of CSS floats for aspiring web designers. Web Designers all around are masters of CSS in themselves, and their mastery of floats is what makes them the ebst at what they do.

Understanding CSS Floats »

CSS Differences in Internet Explorer 6, 7 and 8

ie

One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share.

Read the full article »

9 Most Common IE Bugs and How to Fix Them [netTuts]

Internet Explorer – the bane of most web developers’ existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn’t really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? Let’s get started.

Read the full article »

An Early Look At IE9 for Developers

We’re just about a month after the Windows 7 launch, and wanted to show an early look at some of the work underway on Internet Explorer 9.

Read the full article here »

Web Designer’s Toolbox

New to Web Design? Join the club. Here are a few programs you might need along the way.

1. Choose a Good Web Development IDE

It’s important to select an IDE which works best for you. There are several IDEs to choose from (some more functional than others), so be sure to decide on which one works best with your workflow.

  1. Adobe Dreamweaver. The Web Development IDE of choice for both basic and advanced web designers. If you’re not sure which one to get, DW would be a good place to start.
  2. Aptana Studio. Dubbed the  Dreamweaver Killer, Aptana Studio is a great alternative  to DW because it’s free (as in “free beer”). Now in version 2, a lot of professional web designers are looking to switch to Aptana within the next 2 or 3 version upgrades (myself included).
  3. Notepad++. Windows notepad on steroids.
  4. Notepad/TextEdit. Your last resort.

2. Utilities

Web Development is all about testing your site in as many browsers as you can. Be sure to install as many browsers as your system allows to keep your site in shape.

  1. Firefox Browser. The browser of choice for the new web user. No other browser comes close to its speed and compatibility.
  2. Chrome Browser. A good alternative to Firefox.
  3. IE6 Standalone. Runs IE6 without overwriting your existing IE browser.
  4. IE7 Standalone. Runs IE7 without overwriting your existing IE browser.
  5. Spoon Browser Sandbox. Run almost any browser on any system. Works really well but you might notice a slight efficiency drop on slower computers.
  6. Consolas Font Family. Looking at code all day can be quite dizzying. Consolas is a sweet alternative to Courier New.

Optional items (for more advanced users)

  1. XAMPP. Runs a localized server on your computer allowing you to test server-specific files such as PHP and .htaccess files.
  2. IE Collection. A huge collection of IE browsers all they way from version 3.1 to IE8.

Never use these (ever!)

  1. MS Frontpage. Don’t kid yourself, this one isn’t even worth explaining.
  2. Adobe GoLive. Back when Dreamweaver still belonged to Macromedia, Adobe launched its own web IDE called GoLive to combat DW. GoLive was so bad Adobe became the laughing stock in Web IDEs. Instead of fixing it, they bought Maromedia instead.

Class grades

Below are your grades. I’m extending the deadline for the optional project to Monday next week (Oct 19) instead of this friday (16th).
Section A
Section B-revised
Section C

Good luck to all!

Seniors: Updates on the Presentation

thesis-paper-1

Presentation will be moved to October 7. Show everything you’ve done so far and make it good. Attire will be formal like before.

For those who are wondering, the first version of the Documentation and Design Work will be due the week after that. That paper will comprise 20% of your final grade for the first semester. All finished works and research need to be compiled and ready for submission by October 14. The FINAL thesis  paper won’t be due until the end of the 2nd sem.

The next update will include the venue for the presentation.

Good luck!