September 2, 2008

Page Layout – Take 102

Last week I posted up a link of a very basic web page layout that very much resembled a wire frame. For me, it was a very helpful exercise in visualizing and getting my head around the “box model”. In this exercise I learnt about:

  • Floats
  • Relative position
  • The affects of margins and paddings
  • Fluid (or Liquid) layout

This week I took a step further and transformed the “wireframe” page layout into a potential final working progress page design. Maybe. Anyways, it’s slightly less boring than last weeks.

Here’s the link: http://dmtsar.0fees.net/acm/index.html

In this exercise, I learned about:

  • Absolute positioning

The difference I found between Absolute and Relative positioning is that an Absolute positioned element sits on top of other elements without disturbing their position. A Relative positioned element, however can disturb the position of the elements around it.

For example, the navigational menu I have sits on top of the header element, which I can then move up or down as I please without affecting the position of the header. The syntax looks something like:

#nav_menu
  {
  position: absolute;
  left: -20px;
  top: 110px;
  }

Which will position #nav_menu -10 pixels from the the left and 110 pixels from the top from it’s parent container (which could be the window browser).

So far I would have to rate it in my Top 10 Favourite CCS commands. Although I must admit, I just started this list, and so far this is the only one in it. The reason I like it so much is that I think it can be a pretty powerful layout tool in terms of having control in exactly where you want to place a particular element. However, having said that, all things are best in moderation.

August 26, 2008

It’s alive!

So I did my wire frame sketches, and I made a decision on one that I liked best. I’ve created the basic style sheet and added place holders (div) in html for when I start adding in the content. The color coding helps me visualise and ensure I have each section lined up with each other.

Here’s a link: http://dmtsar.0fees.net/pagelayout.html

Reference:

Budd, A, 2006, CSS Mastery, Advanced Web Standards Solution

http://www.alistapart.com/articles/holygrail, viewed 15/08/2008

August 26, 2008

And here’s one I prepared earlier….

I have a confession…. I started reading up and playing around with PHP during semester break, coz you know, I didn’t have anything better to do at work (just kidding). But what I manage to do was build the PHP component for a booking enquiry form that captures the data inputs from the customer, validate it and send it off to do something else.

Here’s a link – dmtsar.0fees.net/process.php, don’t expect too much though. It’s still a bit rough and not very exciting but the basic functionality is there. What I would just need to work on further is the tidy up, formatting ( I was still using tables for layout, OMG – see previous blog )and adding the functions to send Emails and SMS’s. (Test it out, and try leaving out the “mandatory fields” and see what it does). There’s no database connection there yet either.

I want to share are some of my lessons learnt. Firstly, what was I actually trying to achieve here?

1. Ask users some questions – form
2. Capture their answers – submit form
3. Check their answers and make sure they answered correctly and didn’t leave anything out – validate form
4. Tell them what questions were not answered correctly and what information they left out, and give them another chance to answer it – feedback
5. Repeat 1-4 until all questions adequeatly answered.
6. Proceed to the next step – eg, send an email (php, but it would really depend what the next step is)

That sounds pretty obvious. However, I think it’s good programming practise to break down the solution into smaller steps like so. If nothing else, it would help you identify early on what are the common and repeatable functions. I didn’t do this by the way. I just went in there and started hacking away and as a result, I had to completely rewrite my code at least three times!!

Lesson learnt No 1. Make some effort and time to break down the problem at hand and step through your proposed solution. Back in the old days, this use to be called “Pseudocode” [1], but with a little bit less structure and algorithm like. The concept is pretty much the same though.

In my example, if I had actually thought about what I was doing the first time round, I would have realised that some of my code would need to be “repeatable” in certain situations. Put in other words, you know when you’re filling in a form on the web to sign up for something and it’s a long and laborious form and finally you get to click on the OK or SUBMIT button but then it brings you back and its says “Whoopsy, you forgot something”, but it makes you fill everything in ALL OVER AGAIN. That annoys me. Don’t do that.

Lesson learnt No 2. Validation – don’t make the users fill things out more than once.

To solve this dilemma I needed some functions.

Lesson learnt No 3. Functions.

“A function is a block of code that can be executed whenever we need it” [2]. You can also think of functions as a block of code that is common, or that is repeatable, in different parts of your code. Going back to my example, I could create steps 1-4 as functions and my main code would call the function appropriate depending on the situation, or event, that has occurred. In pseudocode it would look something like:

if submit button has been pressed
go to validate_form function
otherwise
go to new_form function

In validate_form function, you could do all sorts of fun, like checking if a “phone number” fields contains “letters”. Etc, anyways, I think you can see the picture here.

Congratulations, you’ve made it to the end !! That was a long rant.

Reference:

[1] http://en.wikipedia.org/wiki/Pseudocode

[2] http://w3schools.com/php/php_functions.asp

August 20, 2008

Master of CSS

Well not quite… I bought a book the other day called “CSS Mastery, Advanced Web Standards Solution”, Andy Budd, (2006). Although I’m a beginner I don’t believe in buying in beginner books. Couple of reasons, you can get all the basic stuff free of the internet, and after building/playing with a website or two, you quickly progress into intermediate/advanced, and then the beginners books becomes “too basic” and gets sold on Ebay. So I decided to take a leap and throw myself straight into the deep end. I have to say that I think this book is a great buy. The first chapter covered exactly what I needed. Which is a conceptual description of the basic structure and hierarchy of CSS.

What have I learned? Here’s a summary:

  • (X)HTML consists of a number of Elements (eg, h1, h2, p, ul, ol, etc)
    • Elements can be styled directly
    • Elements can be provided with more meaning by giving it a Class name or an ID name:
      • Classes can be applied to any number of elements on a page
      • IDs can only be applied to one element on a page- ie, it must be a unique name
  • To style a particular element, you need to have some way of targeting that element. The part of the style rule that does this is called the selector.
    • Type selectors are use to target a particular type of element. Eg, p {color:blue}.
    • Descendant selectors allows you to target the descendants of a particular element or group of elements. Eg, li a {text-decoration: none}, will target anchors within a list only
    • ID selectors targets elements with the corresponding ID name and is identified with hash “#”
    • Class selectors targets elements with the corresponding Class name and is identified with a fullstop “.”
    • Universal selectors, probably the most powerful of them all but seldomed used, is more like a wildcard and will match all available elements. Eg, * { padding: 0 } will set the padding of all elements to 0. You can then use IDs or Classes to override for specific elements
    • Child selectors (advanced) only targets the element’s immediate descendant or “children”. Eg, #nav > li { background : yellow }, any nested list item will remain unaffected
    • Adjacent selectors (advanced) allows you to target an element that is preceded by another element that shares that same parent
    • Attribute selectors (advanced) targets an element based on the existence of an attribute or the attribute’s value
    • (These last 2 advanced selectors went a bit over my head. They’re probably not so important to me right now so I’ll just park them)

And that’s chapter 1…. stay tuned.

August 15, 2008

When did tables go out of fashion?

Have I been living under a rock?

Ever see those people still wearing shoulder pads? “Omg, she’s like so stuck in the eighties”. That’s me … “Omg, she’s like so still using tables. That’s so like yesterday”…..

I stared on my wireframes today and made a couple pretty basic sketches. Incidently, it was a great way of drawing out the contents I needed/wanted to have, and grouping those to form the basis of my Menu. Anway, subconciously, my sketches were of the typical “3-column layout” a lot of web pages seem to have these days. My limited html/css knowledge assumed it must be done using <tables>. So I researched (googled) “web design”. Lots of articles came up and I noticed a few talked about the ”3-column layout” and the “holy grail” [2]. What??

I researched some more.

I came across the article ”Practical CSS Layout Tips, Tricks, & Techniques” [1] , and it was an eye-opener. Table-less designs? When did that happened? Apparently 2001, when the article was written! Liquid layout, box-model. What?? I examined some web pages (view source) – no tables. Conclusion, no longer are fears of wasting time on colours and fonts experiments, I have way too much to learn first.

OMG.

Reference:

[1]. http://www.alistapart.com/articles/practicalcss/ , ( viewed 15/08/2008 )

[2]. http://www.alistapart.com/articles/holygrail/, ( viewed 15/08/2008 )

August 15, 2008

DMT Website and Learning Proposal

I’ve setup myself up with free webhosting here (not much there yet):

http://www.dmtsar.0fees.net/

And my Learning Proposal is here:

http://www.dmtsar.0fees.net/learning_proposal.htm

August 14, 2008

Wireframes: What are they? What are they good for?

I have a mishmash of ideas in my head and I don’t know where to start. I know am I going to get bogged down in making my page “look good” and forget about functionality. I’m going to experiment with every colour and every font and font size combination.  I just learned about the <div> tag from Week 3 – more ideas!! And that’s barely scratching the surface. I have to nip this in the bud before I get out of control.  Enter wireframes. I first learned about wireframes last semester in another MIM subject.

What are they?

“They are working documents that are not finished designs but are likely to change as the design process progresses and functional requirements are clarified”. [1]

What are they good for?

“They allow us to focus on the functionality of a site. They are a fast and cheap way to produce an idea of how a page on a site may work”. [1]

Why will it work for me?

I think wireframes will serve me well for a few good reasons:

  • It will help me conceptualise and organise my thoughts
  • I can quickly discard those ideas that just won’t work, and shortlists those that may
  • I can identify functionalities that I want and don’t want to include
  • I can better track my progress, and have a specific plan and schedule on areas I want to work on next, as well as identify areas I am struggling with

There are a number of types of wireframes ranging from low fidelity hand sketches, to high fidelity flash prototypes. I will probably stick to lo-fi hand sketches, and as I progress and my ideas become more concrete, move my hand-sketches to photoshop where I can experiment on colours and fonts.

Reference:

[1]. http://userpathways.com/2008/06/26/the-what-when-and-why-of-wireframes/, ( viewed 14/08/2008 )

Tags:
August 12, 2008

CSS: Pseudo-Classes for Link Styles

I wanted a Navigation Bar on my web page, but I didn’t want the links to look different, ie, different colours for visited and unvisited links, or underlined. I only knew how to do this by defining it within the <body> tag, like so:

<body link=”red” vlink=”blue”>

</body>

Clearly this is not ideal, for a couple of reasons:

1.  I want the Navigation Bar to be a specific colour, which may, or may not be, the same as the rest of the web page
2.  I may want other link(s) within the page to be a different colour(s)
3.  I’m still currently experimenting with styles and will most likely change my mind later on. It would be easier if I only have to make my changes in one place.

Stylesheets is the way to go. However, it took hours of frustration and an “I’ve looked everywhere else” before I decided to click on “CSS Pseudo-classes” – which I kept overlooking because I didn’t think it was relevant (w3schools.com/css).

CSS pseudo-classes are used to add special effects to some selectors.

Syntax:

selector:pseudo-class {property: value}

or, used with classes

selector.class:pseudo-class {property: value}

My example:

a.menu:visited, a.menu:link
{
color: wheat;
font-style: normal;      
text-decoration: none;   <!– No underline –>
}

<a class=”menu” href=learning_proposal.htm>learning proposal</a>

<a class=”menu” href=links.htm>links</a>

Hooray it worked! Refer to My Webpage – http://dmtsar.0fees.net

Reference

1. http://w3schools.com/css

August 11, 2008

The “X” in XHTML

XHTML stands for EXtensible HyperText Markup Language, and basically, is a combination of elements from HTML 4.01 with the syntax of XML. XML is a stricter and more rigourous markup language than HTML, requiring everything to be marked up correctly, for example, there must always be a beginning and end tags. As a result, XHTML written documents are “well-formed” making it easier to maintain and support.

Some of the rules of XHTML 1.0 include:

  • Elements and attributes must appear in lower case
  • Attribute values must be quoted
  • Non-Empty elements require a closing tag
  • Empty elements are terminated using a space and a trailing slash
  • No attribute minimization is allowed
  • In strict XHTML, all inline elements must be contained in a block element

Resource
1. http://www.webstandards.org/learn/articles/askw3c/oct2003/
2. http://w3schools.com/xhtml/xhtml_intro.asp
3. http://www22.brinkster.com/beeandnee/techzone/articles/htmltoxhtml.asp
4. http://www.sitepoint.com/article/future-html-xhtml

Tags: ,
July 29, 2008

Intro…

This is my first blog! Purpose – a journal of sorts of my learning progress for the UTS DMT course. In this subject I envisage to become skilled in Web Development and specifically, I will be learning how to develop web pages using HTML, XHTML, CCS, PHP, MySQL and Javascript.

My background is in IT - ”backend” support and development of various financial systems. By “backend” I mean application development on the server side, which includes database stored procedures and automated overnight batch processing. Hopefully, my programming background will help me pick up PHP and Javascripting without too much difficulty. However, we shall soon see…

Follow

Get every new post delivered to your Inbox.