Oikofugic Design

Out and about

Out in Southport for the evening. Felt like a bloody tourist.
Some pics

Check out the being driving the car in the front of photograph.
He definitely saw me. That I saw him you understand.
Luckily the camera captures the true essence of the grey, because to most they appear just like anyone else, but make no mistake.. they are amongst us..
Fortunate to have camera ready. For more info: below.

Add comment August 26th, 2007

Css Layout

Layout techniques using css. Cascading style sheets.

Over the next few weeks I am going to build an external working page (I will link to soon) with pictures, graphic images, text, navigation and anything else that pops into mind at any given time along the course of the project. In an effort to keep this blog going I will post in smallish segments, to enable me to write more frequently.

Disclaimer:

I have uncovered all I know from the web, and my own investigations. All tutorials are given in the understanding that information acquired here might in some cases not be the best solution to any possible hypothetical situation. Hold me not responsible for any psychiatric episodes you may experience on your personal quest to build a web site.
Enjoy:

The beginnings

Above is a div. It can be any size as specified by the style sheet or style rules.

html:
<div id="maincont"></div>

css:
#maincont {
 width:350px;
 height:200px;
 border:2px solid green;
 margin-left:30px; }

A div is just a box/container and is used to create a page layout. Divs can be placed within other divs, next to each other, or in any other combination you can imagine.

Below I am going to put another div inside the first and align it to the left.

html:
<div id="maincont1">
<div id="lfttbx"></div>
</div>

css:
#lfttbx {
 width:150px;
 height:50px;
 border:2px solid red;
 float:left; }

Floating a div like this is a common way to achieve a multi columned layout, or even more elaborate designs.
Below I will add another containind div to the structure, but align it to the right.

html:
<div id="maincont1">
<div id="lfttbx"></div>
<div id="rttbx"></div>
</div>

css:
#rttbx {
 width:180px;
 height:70px;
 border:2px solid blue;
 float:right; }

1 comment August 21st, 2007

Which famous photographer are you?

I came across this today. Doing this quiz your tastes, and styles are matched to a famous photographer:

Here are my results:

One of my own: Clearly he acquired all he knows from his former master.

Add comment August 15th, 2007

It’s a plugin mashup

Playing around with plugins

Using a combination of plugins to achieve the goal

The goal is..

Objective: to place code in the page and have mini applications working within the parameters of the page

To that end I have mashed a few plugins together and will now try and explain why, that is before I forget myself

Initially I just wanted to be able to add things I had learnt or wanted to explain in the blog post page.
For eg. I followed a tutorial See previous post

I had to at the time take the example out of the wordpress loop, I couldn’t find a way to add the necessary code to the head section of the page without that code residing in every subsequent post I made. See auto generated content in previous highlighted post.

So another plugin to the rescue, sometimes they sound great , but don’t always live up to expectations, this is not one of those. It does what it says, But I still have struggles, and be aware I do make things difficult for myself.. You know I am just playing around here, nowt too serious.
To add a link to a style sheet specific to the
particular post I am writing is easy using the box generated, which appears under your post text box

<link href="mystyle.css" rel="stylesheet" type="text/css" />

So adding the above style sheet link to the add headers box will generate that link, but obviously does nothing to any links that are in the core wordpress index template. These links remain. and I’m wondering now why I am bothered

At this point I have kind of realized that it isn’t a mashup really at all, but to go back would be folly. I kind of wanted to get into what I had done, and why. It seemed like a good idea at the time.

A new page template

Nice tutorial on Binary Moon

I made new page template as shown below, but created a new header..header1.php and had the template call that.

<?php
/*
Template Name: Uniqu
*/
?>

<?php
define('WP_USE_THEMES', false);
require('header1.php');
?>

<div id="content">

</div>

<?php get_footer(); ?>

Why, and for what purpose would you do that

Deleted the style sheet link that is why

And we come full circle..

hello Mr.Plugin, I think I need to add a new unrelated link here.
Could be css, javascript, whatever.

At the end of all that I have test page, not done anything with this yet, but in combination with another ‘add page plugin’ and ‘keep page from main navigation plugin’, we have an option from the web interface to be able easily to add unique content and style to the blog on the fly.

I will have to re-write this..

1 comment August 12th, 2007

It’s a ‘meta’ plugin

All in One SEO Pack

It does the job of adding the relevant information to the top of your post pages, I think this will help in getting some exposure for this humble little blog.

Buzzing, I think I have found what I was looking for initially.
This link is for another plugin, (I think) Check this out for adding custom headers.

Going back to the plugin being discussed.

Title, adds title in the title field of your posts page.
I think the description is what is the visitor sees when a search engine search has been processed, or to clarify, from the creators
own words.

Description

Your META description often gets used as the snippet of your page that Search Engines provide on their results list. This way, your description often is the first thing (besides title) a potential visitor sees. This makes it very important to craft your META descriptions very very carefully.

Keywords, adds the meta tags, so make them unique and interesting I guess.

I have to just include a disclaimer, being that all that I chat about here, is mostly learning, and experimental, and possibly full of detritus, feel free to let me know.

See you out there..

3 comments August 8th, 2007

Rush 2007

14th October

Off to Manchester MEN arena to see the glorious Rush in concert. Oh yeah baby I have my ticket.

Photos by Andrew McNaughton

Check out this quality vid, animation I found next page.

Add comment August 7th, 2007

AJAX

Asynchronous Javascript And XML

I at this time know nothing, and am following a tutorial I found whilst looking for a tutorial on AJAX.

From Tizag I begin this latest endeavor.

I love learning new stuff, in fact it is why I am here but the jargon does tend to lead me down a road, which inevitably takes me away from my original pursuit.

Asynchronous, What the..

1 : not synchronous
2 : of, used in, or being digital communication (as between computers) in which there is no timing requirement for transmission and in which the start of each character is individually signaled by the transmitting device.

Here is the finished page. A nice tutorial I think.
It’s funny how your understanding shifts through time. A couple of years ago I thought that my web development and understanding was almost complete because I was learning css. I had reasonable layout and graphic design skills, and was all set to bring the money home producing web sites for local businesses etc. How wrong, I began to see the emergence of the dynamic site. Sites that allowed visitor feedback, and interaction. I wanted some of that action, but initially didn’t understand how it was accomplished. Some time later I discovered the blogging platform wordpress which runs this site.

I am telling you this because I find myself again wondering how best to achieve what I did manually with my first site central12, that is to have unique meta information for individual pages (the static wordpress page, such as ‘about’ or ‘contact’ and the post pages generated when a single post is created.)

Apart from the search engine optimization reason for doing this, I also wanted to unclutter my pages.

This only became desirable after doing the above tutorial, and having the working example on a separate page as opposed to working within the page as in the example on tizag. It is is possible to link to the javascript and php files in the header of the page, but causes the crux of the problem.

Because wordpress pulls content for pages from a template.

header
index
sidebar
footer

Any code that is added to the header will appear on every generated page. Creating individual templates for every new project kind of defeats the object of an auto generated site. So I need a plugin, or a solution that will allow me to have unique meta information on individual pages (static and dynamic) this way I can add link to javascript, php files and have key words in the page header that are specific to that particular page. So this is next on my to do list.

Anyway, back to the subject in hand, which is this AJAX tutorial, and why I am doing it. The truth is I’m not 100% sure. Recently I have heard, and am beginning to understand that the use of AJAX in your code allows communication with the server without the page having to re-load. This is always desirable, not only is the end product smoother for the site user, but site will also be faster.

Really though, the main reason in this pursuit is just to add another facet to my programming/web designing skills. I am not even sure how integrating AJAX into my coding will benefit me at this time, however I am open to change, whilst simultaneously building my knowledge base.
I will write more on the subject as I complete more tutorials.

Update

Check out these plugings I found here, for adding meta information, and custom headers.

1 comment August 5th, 2007