Web Development
Here I will discuss web development from beginning to professional level.
Nov 16, 2009 by Nor Sanavongsay
with 0 Comments
I finally had some time to update the look of my website this weekend. I went with the painterly background and texture; it sort of gives a feel of my traditional background with a technology edge in the foreground.
There are a couple of acrylic paint strokes that was converted into a Photoshop® brush. I can do a write-up on how that is done later. Feel free to look around, if you’ve been here before, there’s nothing new content wise. I will start adding more work soon. Thanks for visiting!
Nov 13, 2009 by Nor Sanavongsay
with 0 Comments
Web designers, please learn to code. It will help both yourself as well as the web developers and web developers, learn about design. As one of the few people who can design as well as program, I see this all too often working with designers and developers. The developers get frustrated with designers and vice versa.... “designer: I want rounded corners and drop shadows! developer: That’s too much code to do that.” First of all, HTML/CSS is not code, they’re markup languages and it’s not rocket science either. Learn it.
http://www.webdesignerdepot.com/2009/11/coding-a-web-design-for-speed-and-quality/
Jun 14, 2008 by Nor Sanavongsay
with 1 Comments
ChordC - Connecting People With Chords, formerly a Flash Desktop Application, Chord Conquering, is now a live interactive website. This initial release brings with it a slew of exciting features not found on the CD. For one, members can interact with other members and share songs or tips on guitar playing. If you have a band and looking for members, this would be a great place to start. Or if you are the greatest guitar player and want to join a band, sign up for a free ChordC profile. This site is definitely not for people who know absolutely nothing about a guitar. The basic knowledge of chords and tabs are required.
Future release of the site will include all of the features found on the CD. The people who’ve bought the CD will find that this free web based upgrade is a wonderful addition to their guitar playing reference library. There will be sound attached to each chord, so that you will know what the chords sound like when you’re strumming along with it. Another nice feature of ChordC is the ability to find chords that you don’t know the name of. For instance, lets say you are strumming freely and found a sound that you like; you can go to the site and put in the fingering and find the matching chord. Widgets run the web, that is why we are working on a few of our own. Expect to see an iPhone version as well as a facebook application for ChordC.
If you would like to find out more about the site, come on in, we’re now open. Sign up for a free profile and rock on. So what are you waiting for… go conquer those chords!
Nov 30, 2007 by Nor Sanavongsay
with 0 Comments
Chord Conquering (ChordC), the most comprehensive guitar chord reference program available anywhere, is getting a makeover. ChordC was founded by a great friend of mine, Judd Younce, to be the tool that you can use when you are at a lost for a guitar chord. Easily look up a chord in an instant with this program.
We are currently going through the design and architecture phase at the moment. The first wave release will be just the chords. There are 2,820 chords that we have to input into the database, so that will take some time. I’ve been working on the look and feel for the site and getting inspirations from other social networking and guitar chords sites and making ChordC the best available for finding chords and connecting with friends to share the chords. I can’t go into too much details as most of the developmental phases have not yet been ironed out. We are planning to release the chords by Christmas this year. Look out for ChordC.com’s refresh.
Oct 12, 2007 by Nor Sanavongsay
with 0 Comments
Have you ever walked down the streets of a big city that has performers doing acts or making something? And, if you are like me, you would give them some money for their performance or just watch and walk on by. Well, this same concept is how I think about webapps and internet services.
Why do I feel that way? Well, think of it this way: people do not want to pay for crappy products or services — they want free stuff. Most people, though, I believe will pay or donate money to the service providers if they think their product is of use to them. So, if you are planning to start an online service or build a web application, remember, people want free stuff! And they like to share what they found. So, make the service free for the users and you will end up with some big rewards (get paid by advertisers when you have millions of visitors at your site or use your products).
This is also true for Open Source Development.
Feb 12, 2007 by Nor Sanavongsay
with 1 Comments
The Invisible Art of Coding
Why do I call it the invisible art? Well, mainly because it’s an art form that hides behind the facade of the web browser. What you see is not always what you get. When I write my codes, I think of it as writing a story. There’s a beginning, a middle, and an end. Let’s start at the beginning.
The Declaration
At the beginning of the HTML file we need to declare what type of document we are writing. We want to use the most current version possible. This is of course the web, and it is the most flexible form writing you will ever use. There are many different types of DOCTYPES to use. A List Apart does a great job of explaining what a doctype is. You can read their article here. “A doctype is short for ‘document type declaration’ which informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.”
The Head
The second thing will insert into the HTML document is the <html> tag. All the code on the page lives inside this tag. As we try to breathe life into our web sites, let’s not forget that all living thing must have a head. The head (encased in the <head> ... </head> tag) of an HTML file is where we put the brain of the document. The head holds the controls for the web site. The title for indicating which page we are viewing, the meta tags for search engines and such, the links to css for the look of the site, and javascript for more interactivity. Figure 1 shows the markup up to the head.
Figure 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My Awesome Web Site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="Describe what your website is about here." />
<meta name="keywords" content="List all keywords that pertain to your site" />
<!-- This style makes the page look nice on screen -->
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
<!-- This style makes the page look nice on paper -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
<script type="text/javascript" src="/js/global.js"></script>
</head>
The Body
The body of the page is what the world sees. This is where we would put our content. Let’s say that we are going to layout the page as I have drawn up crudely in part one. We have a header, left navigation, content, and footer. All these core will be in the body of the document. Figure 2 shows how I would set up these boxes with DIVs and ID. Finally, close up your document with a closing </html> tag.
Figure 2
<body>
<div id="header-wrap">
<h1>My Awesome Web Site</h1>
<ul id="main-nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div id="body-wrap">
<div id="sub-wrap">
<ul id="sub-nav">
<li>sub nav 1</li>
<li>sub nav 2</li>
<li>sub nav 3</li>
</ul>
</div>
<div id="content-wrap">
<h1>Hello World</h1>
<p>
Welcome to my awesome site.
There is so much to learn blah blah blah.
</p>
</div>
</div>
<div id="footer-wrap">
<p>© 2007 nawDsign, LLC. All rights reserved</p>
</div>
</body>
</html>
The End
That’s it for the markup. Next time, we will style it with CSS.
Feb 08, 2007 by Nor Sanavongsay
with 0 Comments
People have often ask me how I go about designing a web site. I’m going to try and walk through my process. This is by no means the way you should do it, but just want to show you my way of approaching it.
Get Inspired
First, when I get a job request from a client, I often write down what they want. I listen to their requests and come back to them with a concept or theme that ties into their brand identity if they have one. Otherwise, I end up doing that as well; That will be a different topic.
After I get my concepts and theme down, I surf for inspiration. My first stop is always CSSbeauty. It is a showcase site that features a lot of great web designers out there. Here is a page with all the resources you’ll ever need for web development, Web Developer’s Handbook.
Wireframe
Before I even start designing the web site, I would do some preliminary layouts with shapes just to get an idea of how the page will flow and also figure out placements. It does not have to be too detailed. This step is like sketching. You figure out the main components roughly. I like using Illustrator for this part.
Design
Open up any graphics software package you are most comfortable with. I like using Photoshop. In this step, I start to flesh out the wireframes and put color schemes and finalize placements of contents. This step is where you start to get the ”look and feel” of the site.
It is most often better to start designing the inner pages before you start designing the homepage. At work, we refer to these pages as the core browse pages. When you design the core browse pages first, you will get a better idea of the functionality of the site and also the main components of the site. The homepage or the landing page is where people tend to spend the least amount of time on. You want to get them in through the site to the important information first. For example, if you are designing a portfolio site, you would want the users to go directly to the portfolio by giving them clues on what is important in the homepage. Usually this layout will become your template for the entire site. I sometimes end up using this layout as the homepage itself if I’m doing small brochure sites like these: River East Chiropractic Health Center, Central Dupage Chiropractic, or Franklin Park Chiropractic.
Cameron Moll also suggests to not begin with the homepage design, but he is referring to web apps. He says it is ok to begin with the homepage if you are designing “brochureware” sites. I don’t disagree, but i think it will make life a lot easier to design the core browse first and then come back to the homepage.
Next time I will share my thoughts on converting the beautiful layout into the invisible art of coding.
Page 1 of 1 pages
Categories
