interactive base to work on

Been thinking about an interactive template for web design. The basic principal is to create a canvas containing thousands of tiled objects, could be pixels. All these objects are monitored. When the mouse passes over them their colour value increases.This would create a nice effect for the user.We can change areas of this so that the pixels behave differently in different areas. Perhaps their behavior is based on the proximity to something. Or perhaps different elements like the menu system have either different starting value or different calculations.

This way we can create a website, the graphics are all based on user interactions, and each time the page is visited the visitor will see something unique.

To do:

• Create objects which change when mouse goes over
• Tile a webpage with it
• Create areas within the webpage with different variables

Possible problems

I see that this initially might be processor intensive. This needs to be monitored and more effencient methods worked out.

Research

going to use jquery to animate the changes. 

Mouseover jquery here

HTML Colours here

Change colour values is easier with RGB or maybe HSV

jquery pullout slide animation

This is my first lesson in jquery.

Basically what I want is a slider which is mostly hidden on the left, and when you hover over it pulls out to reveal all.

After going on W3CSchools for 30 mins I botch'd up this code:

$(document).ready(function(){$("#square").hover(function(){ $("#square").animate({ left: '+=100px' }); }, function(){ $("#square").animate({ left: '-=100px' }); }); });

adding javascript to a template

Whilst making templates in Joomla I am always wanting to add a little javascript here and there but always hitting a brick wall. What usually seems to happen is that the script, or another on the page doesn't seem to run.

Looking into it it looks like it is to do with how it is loaded. It looks like you cannot have mutliple scripts using the on page load command. It only runs once and probably on the first occurance, maybe the last?

Looking at Joomla specifically, I found the official article on how to add inline and external javascripts. I'm going to try this out before investingating anything else.

Adding Google street view to Joomla Estate Agencie JEA

So, even though I have only edited the code in minor ways, it actually took me a long time to do it, but here is the final result! Posted here on JEA forums

Hi, I've had a go at this myself, and finally came up with a solution.

The first thing I did was to go into my template and create an override for JEA Property.

I then edited the "default_googlemap.php" file. From line 44 to the bottom, replace the script with this script:

$script = <<

 

function initMap(mapOptions, panoOptions, MarkerLatlng) {

    map = new google.maps.Map(document.id('jea_property_map'), mapOptions);

    var marker = new google.maps.Marker({

        position: MarkerLatlng, 

        map: map, 

        title: '{$this->row->ref}'

    });

    var panorama = new google.maps.StreetViewPanorama(document.getElementById('jea_property_map_pano'), panoOptions);

  map.setStreetView(panorama);

}

 

window.addEvent("domready", function(){

    var longitude  = {$longitude};

    var latitude   = {$latitude};

 

    if (longitude && latitude) {

        var myLatlng = new google.maps.LatLng(latitude, longitude);

        var options = {

          zoom : 15,

          center : myLatlng,

          mapTypeId : google.maps.MapTypeId.ROADMAP

        };

        var panoramaOptions = {

    position: myLatlng,

  };

        initMap(options, panoramaOptions, myLatlng);

 

    } else {

        var geocoder = new google.maps.Geocoder();

        var opts = {'address':'$address', 'language':'$lang', 'region':'$region'};

        geocoder.geocode(opts, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {

                var myLatlng = results[0].geometry.location;

                var options = {

                  center : myLatlng,

                  mapTypeId : google.maps.MapTypeId.ROADMAP

                };

                var panoramaOptions = {

    position: myLatlng,

  };

                initMap(options, panoramaOptions, myLatlng);

                map.fitBounds(results[0].geometry.viewport);

             }

        });

    }

});

 

EOD;

 

$this->document->addScriptDeclaration($script);

?>

 

I've only modified the original code to add panoramaOptions variable, and pass it to the initMap function. I then added the panorama variable.

 

At the bottom I also added a div tag called "jea_property_map_pano", but you have to give it a height property otherwise you won't be able to see it. The street view loads up in this div tag.

Creating a Back Button in Joomla

So, I wanted to create a back button, as one of my articles did not provide an adequate link to the previous item. I found this article which describes a simple a tag which calls javascript. Heres the example:

Go back

for none javascript browsers he proposes this:

Go back

I then created a module called "Back Button" with this link, and made it appear only on the pages I wanted. It nearly worked but unfortunately I couldn't get the WYSYWIG editor to let me put the javascript entry in, it always wiped it out!!

Ended up going into the database and pasting it in myself! If someone could please let me know for next time how I get TINYMCE to let me put this code in to a customHTML module in Joomla!!

after comingback to this some time later, i accidentally saved it and it deleted the code! But now, if I want code I install flexi custom code, which lets you add javascript, php etc. to modules!

Publishing HTML codes anywhere - HTML converter

So I always try and put the html code as examples in the blog and other places but it never converts it for me. I've even found html code which should show html code:

<pre>code</pre>

<code>code</code>

and there was another with x in it but I've forgotten. Needless to say it didn't work with a bit of php code I had. In the end I had to find a converter. I found this one which is good

Joomla and emails

Using emails in Joomla has been a slight learning curve. It seems it wants to hide this as much as possible from bots which is nice. So I found this article explaining ways to use emails in joomla

Joomla 3 template and bootstrap

So, after making a nice template the same as I'd done in Joomla 2.5, there are some slight differences when you log onto the front-end. Noticably that the cute little icons of yesterday are gone.

Reading into it, there's this new thing called BootStrap. Very good once you get the hang of it. I found a nice tutorial on it here

The main things to do to get bootstrap are:

1. In the index.php file for your template, right at the top include (tutorial here):
1. $doc = JFactory::getDocument();
2. $doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
2. Secondly, make sure the including your stylesheets here

)

Just be sure to override stuff in your template when it pops up.

Creating a Joomla Template

So, I've made a few websites in Joomla now, but I've only been able to 'cobble' them together either by editing existing templates, or by deleting content from a traditional website I've made and putting the right code it.

This second way is close enough to the real thing. I've found this nice tutorial on how to do it for Joomla 1.5. But it's not too different from the latest version (2.5).

I think the easiest way is to have your own machine setup as a webserver (see this blog on setting that up) and editing the files locally, and easily seeing what Joomla makes of it by viewing the pages through the web browser.

On top of this I found this youtube video explaining how you can setup dreamweaver to interact with the website locally so you can edit all files in dreamweaver. To do it:

1. Set up a new site in Dreamweaver
2. edit the local folder to that of the joomla site
3. in server enter the web URL which you need to type in the browser to access the site
4. Make sure you tick the "testing" box

Here are some screenshots:

locate the local root folder for that particular joomla website

enter the weburl that the computer has to go to view the website

Make sure to tick the "testing" box.

If you havent got a new template in the joomla site yet, just create the folder within the templates folder, make index.php and templateDetails.xml files (found tutorial here), then go to extensions > extension Manager > Discover > press Discover button. If you're templateDetails.xml file is the correct format then you should see it in the list. Tick and click install.

To edit a template:

1. load up its "index.php" in it's own template folder
2. click "live view"
3. click yes to the dialogue box
4. you will need to change the address of the viewing page to the root of the joomla site. i.e. you are editing the main template, which changes the whole site. So you view the website like normal

I did have a few problems refreshing whatever changes I'd made. The simplist was to just go to File > Save All, which would then work.

Moving a site to Joomla

So, here I am moving www.wallspacevisualarts.co.uk to Joomla. I thought I'd best keep notes so I don't loose where I am when I finally give up for the day.

So far I have downloaded and installed the latest Joomla - 2.5.4 on the home machine and put it in the folder - /WallSpaceVisualArts/

I've ran the setup wizard:

1. The admin user is me with my usual password.
2. The sites database is - wallspacevisualarts  (all lowercase). Admin for this is root. My own password.
3. I didn't install the sample data set.

The plan is relatively simple. I put the whole website on there, minus the content that can change. For the moment the only content that is changing is the tabulated text in the tabs. These can be articles which are always shown.

I want to eventually make the pictures an article also, but this would require much more work.

Here's the plan in chronological order (or maybe not so chronological):

1. get the documentation to know how to make a template
1. here it is
2. take out the css and put in a file
1. I called the file "main.css" in the css folder
3. make the template files and folders
1. made the root /Joomla Website/Templates
2. made one inside called /WallSpaceVersion1/
3. Made /css/ and /images folders
4. made templateDetails.xml
1. copied all info from link above and made it relevent
5. made index.php
4. move ALL images into "images" directory
1. moved images from "assets" directory to "images" directory
2. change any mention of "assets" with "images"
5. Change the way the tabs work so that they are called "tab1" and the information attached to each tab is called "tab1_info" to make more universal.
6. re-write the templateDetails.xml to encompass all the files used
1. if you declare a folder, do you need to declare the files in that folder?
1. looking at atomic's templateDetails.xml, they just put the files in the root folder
2. I think you just declare the files that you want to be editable
7. put the right bits of code in the right places
8. delete text
9. replace text with relevent code which brings up articles
1. Just found this article about Jdoc statements. It will hopefully work nicely
2. So, having looked into it, I found that what I actually wanted was to make each article a "Custom HTML" module. Each of these modules is then assigned a position in the page
1. Here's an example of what I put in the html code:
1. <jdoc:include type="modules" name="menu1" />
2. and for the module I assigned it to position "menu1.
3. don't forget to declare the menu1 in the templateDetails.xml document
10. make into template
11. put in joomla
1. had a little trouble with this. It turns out the "discover" button doesn't work well. The template turned up in "templates" tab but not in "styles" tab! Had to zip it and install it!
12. test
1. with initial testing, the images didn't appear
1. here's the code that I eventually used to link pictures placed in the template:
2. basically, where-ever you have
1. ="location.jpg" you replace with:
2. ="baseurl; ?>/templates/location.jpg
13. make johns login
14. make a space for it in index.php and declare it in templateDetails.xml
15. upgrade daily.co.uk account to Home Pro
16. make database on Daily (limited to 20 databases)
1. described it as "wallspacevisualarts"
2. db name is wallsp_1
3. To get on the database, you can go to mysql.daily.co.uk
1. it runs on phpmyadmin
4. normal password
17. backup joomla on home machine
18. backup old website on daily server
19. restore on daily server
20. give him a tutorial

Joomla free Image Gallery and slideshows

So, thought I'd look into image galleries in Joomla.

Found a few free extensions. The one I ended up trying was "Simple Image Gallery" because I wanted to try the 'low' end first and see how easy it was.

So, also found this page which is the simple instructions:

1. download and install plugin
2. enable plugin (wasn't written in the instructions but I worked it out)
3. create a folder in "images" folder using Media Manager
4. Put your images in here
5. Make a new article
6. somewhere in the article put :
1. {gallery}name_of_your_folder{/gallery}
2. it has to be curly brackets!
7. done

Quite simple really.

I notice they do a pro version as well. Looks like the pro is better, having descriptions and different styles. I'll have to look into how to do this.

Phoco Gallery looks like a good alternative, and has slideshow capabilities

Just seen this site version of it which:

• Phoca templates
• Phoca extensions
• VirtueMart extensions
• Phoca Theme for VirtueMart (software extensions for CMS Joomla!)

 Looks amazing!!


As for slideshows, found DJ ImageSlider which looks and works brilliantly. It has its' own slide management system with slides and categories, but also includes a custom module!! Brilliant

Joomla on a Mac

So, I've been trying out the cloudaccess.net version of Joomla and I thought I'd try the totally free downloadable version, mainly to see the differences and also to perhaps edit files more locally.

Just read up on the txt file which comes with the download, takes you to this page for installation requirements. At the bottom of the page it says there is a quicker way then installing all the little things; MAMP, Macintosh, Apache, Mysql and PHP. 

So... here's how I did it:

1. Download MAMP and install
2. run MAMP from applications folder

1. Go to "Open Start Page" or open browser and type : http://localhost:8888/MAMP
2. Go to MyPHPAdmin

1. Name a new database and click create
3. Now download Joomla
1. unzip it (if safari doesn't)

1. Put the new folder in /Applications/MAMP/htdocs
2. In the web-browser go to http://localhost:8888/Joomla_2 (or whatever folder you've named it)
3. It now takes you through the Joomla installation
4. One point I got stuck on was the database name. Type in the database name you created in MyPHPAdmin
5. The default password for the database thing is:
1. username = root
2. password = root
3. I wouldn't change these if I were you. If you do:
1. Go to MAMP/bin/mamp/index.php and change the password bit
2. Got to MAMP/bin/MyPHPAdmin/config.inc.php and change the password bit in here too
4. Done!!

I'm going to try and download the joomla site I made on cloudaccess.net and put it on the computer? I shall hopefully write a post and stick it up here.

Notes:

Had this error message come up:

Could not connect to the database. Connector returned number: 2

Turns out I didn't create the database and/or put the right password in. It would be easier if Joomla could do this bit?

I'd gone and changed the password for root in MAMP!! Doh, I ended up having to look for where the password entries were for each part of MAMP. Found the main two:

1. Go to MAMP/bin/mamp/index.php and change the password bit
2. Got to MAMP/bin/MyPHPAdmin/config.inc.php and change the password bit in here too

How can I change the password for the MySQL database?

Open the terminal and type the following:
/Applications/MAMP/Library/bin/mysqladmin -u root -p password

Instead of  use the new password you want.
Afterwards, you also need to change the password for phpMyAdmin and other scripts which are running under MAMP. You can change the password for phpMyAdmin in the file /Applications/MAMP/bin/phpMyAdmin-X.X.X/config.inc.php

Joomla notes

Thought I'd best take some notes because I might just forget how I ever did it. So:

• Make a module for everything you want to place on the page, with exception to the articles
• Theres a Banner module
• theres a search module
• theres a menu module
• etc
• These modules require you to designate them a position. This is set out in the template you are using. If you change template you'll have to change all the position. (there always named differently)
• To view the positions, I found this forum. Basically in templates, go to options, switch on "preview positions" then whereever you are on the actual site, just put "?tp=1" without the speech-marks.
• When in the menu manager you can assign different menus to different modules. I think this is so you can have a few different menus for different areas. All you'd have to do is make another menu module and put that in a different position.
• To edit a templates stuff, I saw on a tutorial that there are lots of options which come with every template. I couldn't find these with Beez template, but with all you can edit the html, and also the css. So it's totally changeable!

I shall add to this list of useful hints over time.

which Content Management System to use?

What with all the new websites about these days, with constantly updating and interactive elements, it is too daunting to learn php or asp so why not use a content management system?

Well, I think I'll try some out and then I'll be more able to answer that question. I had a quick look around and found this informative blog, which gives a nice little list of free ones. Here are some of the most popular and nice looking, and almost most importantly, free:

• Joomla
• Drupal
• WordPress

I'll carry on here when I've had some playing about.


Well, I'm still having a good look at Joomla. Seems good but a little complicated when you first have a look at it. I'm finally getting there. Here's what the joomla site currently looks like.

I've just found this wiki which describes how to begin templating, which is ultimately how I will make the website. It'll take a bit of getting used to, but essentially all I'll have to get used to is using the special php references to put the content in. You then use CSS to style all the html you made in the template.

Whilst looking through the joomla wiki I found that it might be easier to start off editing the "beez" template, which they claim to be highly adaptable! Heres the wiki

JQuery sliders to control image sizes on a webpage

I'm currently making a web gallery and want users to be able to resize the gallery to their needs. I did a quick search on Google and found this:

http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery which has this as a demo:

• http://demos.webdesignledger.com/jquery_image_grid/example2.htm

Looks quite good, although I noticed it also increases the gaps between the images which I would prefer to control. But might be worth tweaking!

I've had another look and also found this which looks remarkably similar:

http://agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/

It gives a nice little tutorial on what you have to do.

WallSpaceVidualArts coming soon

Just made the coming soon front page for the website www.wallspacevisualarts.co.uk. All works well, apart from in Firefox 4.0.1. Have a look at this:

Firefox 4.0.1 in background, Safari 5.0.4 in foreground. Notice you can't see the bottom email address in Firefox, and the last part of the phone number

Looks like Firefox 4.0.1 either makes the text too big, or makes the gaps (padding and margins) too big. Quite frustrating. Might be because I used em's for the font size?

Yep, worked it out in the end:

Firefox 4.0.1 in background, Safari 5.0.4 in foreground - fixed inconsistency

So, I started by changing margins which had no effect. I then tried changing font size from 'em' to 'pt', but this didn't work either. Finally tried the old 'line-height', changing from 'em' to 'px' which fixed it. Safari and Firefox are not the same when it comes to 'em's and 'line-height'. I still don't exactly know what 'em' means, but I'm sure I'll look it up one of these days.

Also to note was the slight differences in title formating. I used h1, h2 and h3 for the headers and footers, and there was a slight inconsistency with margins on them. Had to set them to 0px.

Also, for the "JOHN KING" text and phone number, I put a little bit of 'word-spacing' using 'em's, this is inconsistent between these browsers, so I changed it to 'pt'.

I also manually changed the margins for the '
' paragraphs. This is what gives it a bit of space at the top and bottom. I manually changed these so that I could determine the exact distance between the top and bottom of the main text.

Website creation for Nviro-Clean Solutions NCS

Tom asked me if I'd be interested and I jumped at the chance. His brother is just starting out and wants a nice clean coorporate website for the cleaning company. Mostly to advertise and make first contact with customers. Firstly a front page, then some more pages with info.

The company is very flexible set up into two main parts; Domestic and Commercial. It is setup to do business in the midlands, centred on Matlock. Tom has designed the logo which the website will work around.

I've jumped the gun and had some ideas. Based around the blog templates of having a blurred background, each page could have it's own background. So for the domestic some non-de-script clean home, and for commercial some offices. Perhaps for others we could have a commercial kitchen.

Perhaps to contrast the blur, we could some cleaning utilities in focus. Of-course this means some bespoke photography and the question of what products to show. Perhaps a silhouette of a vaccum cleaner and brush. Perhaps not the brush, a little old fashioned.

For the navigation nothing has really come to mind. Keep it simple and in line with the logo.