WebConcept

by Daniel Honrade

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?"

Read More ...

 

WebDesign

by Daniel Honrade

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.

Read More ...

 

Web
Development

by Daniel Honrade

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.

Read More ...

 

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.

Basic Types
Mistake in Concept

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.

General Types
Responsive Design

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.
Browsers
HTML5

Media - Images

Contact

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:

Wikipedia (Browser Wars)