WebConcept

Someone just finished his award winning, high performance site. This site, driven by high energy-generating contents, explosive animations, flashy images, electrifying videos, plus an outstanding design, is ready to spread like airborne virus around the globe. How do you create such a site? Or, rather, the question I should be asking is, "How do you hold those things or elements together, without detonating the site anytime soon?"

 

WebDesign

How should my site be designed? With millions of websites, each designed in a different way, somehow you will really have second thoughts on the first design you have choosen for your site. Right now, you have a list of some of the amazing websites you've found in the internet, but you just can't combine them to create your own. You like them individually and combining them won't work. So all that's left to you is a decision on which design you should follow.

 

Web
Development

Great Ideas, great design... next, how will you put this website online and make it functional to your heart's content? You may be stuck with it forever, a quick solution is to just pay or befriend a web developer to materialize your great website, whichever comes first... but, there's nothing like doing it yourself, ...works for me - site development is as fun as like watching movies of all types, it has some action, drama, comedy, mystery, horror... sometimes it's a personal thing, like putting a part of yourself into it.

 

Concept

Nowadays, anybody can create any kind of website, such as blog, ecommerce, forum, etc.... just by having an account in a web hosting company, without having to know much about the complexity of site development... I guess templating sites makes the whole process easy. At present, any imaginable type of site is being developed, published every second, that's how fast everying is happening in the web. It means that at least 5 million new sites are published, updated and billions of web pages are viewed daily... don't take my word for it, I am just speculating.

So now, the question is... how can your site fight with other similar sites on the web? (that is if visitors matter to you) SEO?... Search Engine Optimization or the Search Engine Black Arts (SEBA). Obviously yes, but that is just the beginning.

The real answer is the (good old fashioned) quality of content you have. It's really obvious, people may visit your site because of your superb, right out of the science lab SEO management BUT they will quickly get out and never return if your content is unoriginal, old and not really what they are looking for.

So, what's the big idea?

The central idea, the focus of the site. The reason for the site's existence. It's easier for your site to be remembered and understood for what it is, and not how much in it. It's like the glue concept that will hold things from falling apart.

Design

After you wonder on some mystical, lovable, creative web designs in the internet, you might want to just review the basics of visual design. Start with the principles of design, they do also apply to web design, such as, Balance, Proportion, Rhythm, Emphasis, Unity. I guess these terms do speak for themselves, but if you still can't get it, you don't have to look far, just look at your face.

Normally, we have sets of eyes, ears, nosetrils... the left mirrors the right. In short, there's the Balance. Now depending on the sizes of these parts can make you beautiful or ugly, we call that Proportion. When a beautiful face, or any face just smiled at you, notice how the lips, eyes, cheeks, eyebrows,... just start to move in harmony, yes... you bet, that's Rhythm. There's always the one thing that's noticeable about one's face, whether his/her set of eyes, nose, lips... probably big or nice to look at... we call that Emphasis in design. Eyes, nose, lips, ears, cheeks, etc. are all placed on one's head, somewhat grouped by purpose... Unity, united to form a head.

So, I should say that a very principled head can be very attractive.

When designing a website, you have other reasons to place a mirror beside your computer aside from vanity, better yet, place a portrait of someone you admire for beauty, that's if she/he ain't you.

What kind of design?

Design should follow the concept. It should help to clarify the ideas or make the messages felt by the viewers... it's like setting the mood.

You don't need to put lots of images, colors just because others are doing it. If it doesn't help clarifying or these elements are unrelated to the concept, better not add them.

You don't need to put lots of visual effects, animation just because you know how to or just to impress your visitors. If it doesn't simplify navigation of the site, it's an awful way of wasting your visitors' time, and computer processing time.

Development

It's a process or a set of steps to create a website. It can be simple or complex depending on the site's purpose and required functionalities.

You need get familiarized with some coding terms. It's like Breakfast, Lunch and Dinner of web development. We can easily remember these by dividing them into 2, and limiting your options to some popular open source projects (used for web building) and not trying to understand their differences with other available and similar projects. Let's learn some acronyms.

Front End Development

It is simply about the things that are happening in and needed for your local web browser.

  • HTML – hypertext markup language, you can actually create a website simply by using HTML but that would be boring. This provides the structure of your content, such as header, table, list, etc. Previous versions also provided some styling but that changed when CSS was introduced.
  • CSS – cascading stylesheets, you can literally have different designs for your site simply using different stylesheets and without touching your HTML. This is some kind of a dictionary of your site's design, it simply tells the web browser how your site should look like by reading its design property definitions.
  • Javascript – client (browser) scripting language, when structure and styling are not enough and you need some action. This now expands what you can do with your site, it can create HTML tags and CSS for you, interacts with your mouse, site content, browser type, and God knows what else.

The above 3 items are the basic things to understand for front end web development.

What's the back end?

This is knowing where your site is coming from when you type the url address or click search. Like in a restaurant, it has a waiter/waitress or someone who takes your orders... someone who serves you... a server. In the computer world, this server is very efficient in getting your orders, it even gets what you want from other restaurants in seconds, that's cool. Let's visualize this for a moment:

We have the main server which acts like a global telephone directory, it keeps track of everybody's number, it updates records, that way when you call your local friend's number, you won't be ringing your other friends around the world. There's a special feature on the directory number (or internet protocol adress or simply ip) which is the domain name system/service/server (DNS)... yes, you can substitute the unique name of your friend instead of his/her number, like www.danielhonrade.com instead of 76.191.97.75.

The next server in line is the webhosting server, or servers which contain the website files. These servers can be anywhere. And like your computer, it has softwares but faster hardware.

As a web developer, you should know these 3 backend sofware types:

  • Web Servers, like Apache – these manage the delivery of the web pages, it's like a file manager
  • Server Languages, like PHP – these create dynamic web pages, connect to databases, organize your html, javascripts, css, files, check security, process transaction with other sites, etc.
  • Databases, like MySQL – this is another way of storing large amount of content in an organized way, adding address to every piece of content and it can even relate contents in different ways.

Media - Images

Contact

HTML5

When you just starting to feel comfortable with HTML4 with strict XHTML specifications, others are starting to make their websites HTML5 ready... like a never ending learning. Is this really a big deal?

No, don't worry... it won't be your problem. HTML5 or HTML4 or XHTML, your site will still be read by modern browsers. In other words, browsers are becoming more and more intelligent, and they do understand what you're doing with you're markups even if you don't post the W3 Doc specifications. As I see it, these W3 doc specifications are just for backward compatibility of browsers reading old codes. Well, why not just update those sites? It will save browsers, developers time and energy from maintaining these backward compatibility features.

We are in the age where dynamic content and markups are possible to live independently from each other (content is stored separately from markups). Millions of web pages are being published and updated daily using this method of separation. It's not anymore realistic and practical to maintain old standards for sites which have not been updated its system. We should not baby-sit these old sites, if they can't join us, let them die a natural death, otherwise these old standards will hold us back... it's like the IE6 curse.

HTML5 holds a promise of easier and user/developer friendly ways of dealing with media types such as audio, video, image, graphics, etc., which all have subtypes, and features that will simplify form creation, validation, and submission, and much more...

To know more about what you can actually do in using HTML5, visit this site:

Responsive Design

Web design is mostly about your website looking great. You probably heard of “Responsive Design”, which is the new thing in web since “Ajax”. To make the story short, it is NOT enough that your design looks great on desktop. Web design adapting the screen sizes and device's functionalities, like IPHONE and IPAD, is now the major trend. It's NOT enough to shrink your design to a 320px-width screen, you have to relayout the whole thing, hide some things, change the navigation, etc., or in other words make your web design respond to different devices.

Welcome to responsive design movement, it's not anymore an advocacy, it's a requirement by your highly demanding "would be" clients in the years to come.

To know more and become expert on this topic, read this lengthy article below:

Mistake in Concept

The general mistake that anybody has in mind when starting to create a website is not the site's concept itself but the concept of making money out of it... what?

A delusion that you have this unique idea of a website... all you need to do is pay a developer to create your prophesized site, have it SEOed or make it viral, after that, millions of people will visit your site to give you the endles flow of money. I know... I was also guilty and I met 4 more others thinking the same way.

All sites may or may not make money but it should not be the primary concept you should take.

The truth may be hard to accept but it's obvious...

It's not true, or the odds are high, that you will have a unique concept of a website that is not yet published. Maybe. But if you have, yours is at least 1 in a billion, that's amazingly unique.

It's not true that just by people visiting your site, you'll get your millions. No. You need active members with login accounts and not just visitors.

It's not true that creating a dynamic site, you just need to pay a developer. No. You need a team of designer/s, writers, developers... and endless development.

Don't think of money first, think of what you like to do and share. At least you'll enjoy what you're doing without getting frustrated when you're not getting any money along the way.

The thing is...

that when you enjoy something, you are more focused, great ideas can come naturally, your content will have quality, as a result, your site can be better than the others. And it's possible that more and more people will bookmark your site as a reference, then your site won't stop getting visitiors. There are no better visitors than comeback visitors, because they can multiply.

Browsers

To be a web developer, you have to see your website on different web browsers, luckily there are only 4 major browsers:

  • Firefox (23.6%*)
  • Chrome (20.6%*)
  • Safari (11.2%*)
  • Internet Explorer (34.2%*)

These browsers have some differences especially in interpreting cascading stylesheets or CSS (used to style your website). This problem has been going on ever since different software companies compete on web browsing dominance. As a result, web developers are burdened with spending lots of time trying to tweak codes to make websites look the same in all browsers.

*Browser Usage as of October 2011, source:

General Types

For whatever purpose your site has, the look and feel of your site may fall under these categories:

  • Fancy
  • Corporate
  • Creative
  • Personal
  • Artistic
  • Hardworking
  • Simple
  • Flashy
  • Childish
  • Authoritative

About

This site is not all about me... but about what I like doing, which is creating websites. Web Concept (why do it)... Web Design (what you see)... Web Development (how you do it) are the key ingredients in doing your sites right, I think. There may be some grey areas where all these 3 do mean the same thing, I guess that's unavoidable.

Mere university education won't guarantee your job in this business, at least in the Philippines. Information is being updated every second, literally in the internet, which your college diploma can't cope up with.

Knowing is just the beginning. It's really the result that counts all the time if you like to pursue a job on web development. And developing skills takes time, so, all your unrelated subjects in college even if you have taken up computer science, have just stalled you from becoming a skilled web developer. No wonder, big names in the computer industry have not really finished college, just a thought. It all starts with interest, something that captures you, more like an attraction to an opposite sex (or same sex, if you prefer). Then this enthusiam comes whenever you're with him/her. Later on, this develops into passion, the energy needed to surpass any obstables even danger... next... addiction?

But it's never too late to start now, start knowing the basics of web development, and telling you where to start is the primary aim of this site. After that, you're on your own, good luck.

Me?

Currently, I consider myself as a web developer/artist. My formal education is more on the arts than code writing, analyzing systems and memorizing some computer jargons. I tried print graphics for a decade but I think web is more exciting. I see arts in codes and I enjoy doing it... I am a natural so to speak.

Years back, I would say, like anybody you would normally see walking on the streets of Manila, I heard the word internet but didn't really understand how it works. Back then, all I needed was a good introduction to web development for me to create my very own website, which, unfortunately, I wasn't able to get. And in the process, I got confused with the amount of information available in the internet. Well, I guess, I didn't get the connection with the right people and the right sites for understanding the basics of web.

So, to really understand the spectrum of web development, I became a full-time gatherer with enthusiam of enlightened knowledge (GEEK) of web... buying books, magazines, and yes the internet (...almost forgot). Trying to master the web tech jargons and practice coding, slowly but surely I passed the stage of just knowing. Yeow, I got skills.

Back to Web Development

Websites, internet, and the like are complex interactions of hardware and software, built and still being improved by thousands, if not millions of experts around the globe. Its applications are fast creeping into anything we do (public and private?). And definitely, the world wide web will change the world as we know it, sounds familiar huh?

Now, with my site, hopefully, I can make a newbie, who is at least interested in creating a website, understand the basics of web development. If you're NOT into it, just enjoy the auto scrolling.

Basic Types

Before wondering about the concept of your site, you may want to ponder on what type or types your site would fall under. There's no marriage contract that says, you should only stick to one type or else that's an adulterated website, as long as it serves your purposes, I think, it's fine to have as many as you need.

  • Blog
  • News
  • eCommerce
  • Wikki
  • Company
  • Social
  • Community
  • Government
  • NGO
  • School
  • and other specialized form of websites such as celebrity, porn, gambling sites