Web Designer Online » Development http://www.webdesigneronline.co.uk Web Designer Online Tue, 18 Jan 2011 11:11:46 +0000 http://wordpress.org/?v=2.8 en hourly 1 18 Vital iOS apps for Web Designers and Developers http://www.webdesigneronline.co.uk/18-vital-ios-apps-for-web-designers-and-developers http://www.webdesigneronline.co.uk/18-vital-ios-apps-for-web-designers-and-developers#comments Mon, 17 Jan 2011 21:19:34 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=660

Being a web designer or developer, you might be in a design block or might have some problems with code so you take a trip away from your machine and suddenly have a brainwave of solutions – This is where your iOS device will come in handy. Other than this, there are a multitude of apps that will make you more productive even when sat in front of your machine. I’ve not listed every app under the sky but some of the more useful ones.

18 Vital iOS apps for Web Designers and Developers

Dropbox

image

(FREE) | iTunes | Dropbox Homepage

iSpy Analytics

Some users may complain of the lack of advance features but this is perfect for the mobile. It’s free and developed by a reputable company so works quite well.

image

(FREE) | iTunes | iSpy Homepage

FTP On The Go

Access, edit and modify files!

image

(~£4.40) | iTunes | FTP On The Go Homepage

WhatTheFont

Take a pic, upload, wait a few seconds and discover the font.

image

(FREE) | iTunes | WhatTheFont Homepage

Wordpress

Needs no introduction

image

(FREE) | iTunes | Wordpress Homepage

Remember the milk

Excellent (probably the best) to-do app and syncs with your online account.

image

(FREE – requires Pro account via RTM) | iTunes | Remember the Milk Homepage

Paypal

For all you freelancers out there.

image

(FREE) | iTunes | Paypal Homepage

Skype

Contact clients via the mobile

image

(FREE) | iTunes | Skype Homepage

Source Viewer

Who doesn’t love the <p> tags?

image

(£0.59) | iTunes

Color Expert

Excellent tool for both designers and developers. in the middle of a colour block?

image

(~£6.20) | iTunes | Color Expert Homepage

Evernote

image

(FREE – Subscription required) | iTunes | Evernote Homepage

MobileRSS

Excellent RSS Feed reader that syncs with your Google Reader account and it’s FREE!

image

(FREE) | iTunes | MobileRSS Homepage

Hootsuite

I prefer this over the office Twitter app as it allows multiple accounts and syncs with your online Hootsuite account! (it’s all about the sync these days)

image

(FREE) | iTunes | Hootsuite Homepage

iBillTo

Keep client payment/bill details on the go.

image

(£0.59) | iTunes | iBillTo

iBlueSky (mindmapping)

Like putting mind maps together?

image

(~£6.20) | iTunes | iBlueSky

Server Status

Monitor server downtime.

image

(£0.59) | iTunes

Photobucket

image

(FREE) | iTunes | Photobucket Homepage

DatabaseViewer

image

(~£4.40) | iTunes | DatabaseViewer Homepage

Cheatsheets

There are many cheatsheet apps available that I though would list together here:

Conclusion

So there you have it. If you’re an iPhone/iPod/iPad user and a web designer/developer, you shouldn’t be without most of the apps above! Have I missed anything?

]]> http://www.webdesigneronline.co.uk/18-vital-ios-apps-for-web-designers-and-developers/feed 3 Basic PHP/ASP Functions Comparison http://www.webdesigneronline.co.uk/basic-phpasp-functions-comparison http://www.webdesigneronline.co.uk/basic-phpasp-functions-comparison#comments Thu, 19 Aug 2010 14:54:56 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=609

PHP and ASP are amongst the most widely used programming languages online and generally just knowing one will get you by all the way.

There are some people however, who would like to know both for various reasons I won’t bore you with but this list will eb a great starting point for anyone who wished to do so.

NOTE: By ASP, I mean ASP (VB), not ASP (C) or ASPX

Basic PHP/ASP Function Comparison

Opening and
Closing Tags		 <?PHP … ?> <% … %>
Write to Browser echo “Hello World!”; response.write(”Hello World!”)
Inline Comment // This is a comment
# This is a comment		 ‘ This is a comment
Comment Block /*
This is a Comment Block
*/		 /*
This is a Comment Block
*/
Declare a varialble $var_name = value;
$number = 16;		 dim var_name
var_name = “value”
Concatination $var1 = value-1;
$var2 = value-2;

echo $var-1 . $var-2;

 Dim var1, var2, var3
var1 = “Hello”
var2 = ” Worlds”
var3 = var1 & var2
Call a Variable $txt = “Hello World”;
echo $txt;		 dim name
name=”Web Designer Online”
response.write(name) or
response.write(”Website name is: ” & name)
Increment $variable++;
++$variable;		 No Fuction Available

Perform Manually:
<%
For var = 1 to 10
 …code…
Next
%>
Decrement $variable–;
–$variable;		 As above
If Statement if (condition) {
//code
} elseif (condition) {
//code
}else{
//code
}		 If condition Then
code
ElseIf condition Then
code
Else
code
End If
I sequal to if ($var1==$var2) {
// do something
}		 If var1 = var2 Then
do something
End If
AND if ($var1==$var2 && $var1==$var3) {
// do something
}		 If var1 = var2 And var3 = var4 Then
do something
End If
OR if ($var1==$var2 || $var1==$var3) {
// do something
}		 If var1 = var2 Or var3 = var4 Then
do something
End If
NOT if (!$var1) {
// do something
}		 If var1 = var2 Not var3 = var4 Then
do something
End If
While Loop while (condition)
// code to be executed		 Do While condition
code to be executed
Loop
For Loop for (initialization; condition; increment) {
// code to execute
}		 For index = 1 to 10
Response.Write(index)
Next
Array $arr = array();
$arr = array(1,2,3,4);
$arr = array(’one’=>1);		 Dim myFixedArray(3) ‘Fixed size array
Dim myDynArray() ‘Dynamic size array
Array Add item $arr[] = 1;
$arr['key'] = 1;		 Dim myFixedArray(3) ‘Fixed size array
myFixedArray(0) = “Zero”
myFixedArray(1) = “One”
myFixedArray(2) = “Two”
myFixedArray(3) = “Three”
Functions function func() {
// do stuff
}		 function func() {
do stuff
}
Class class ClassName {
// code
}		 Class ClassName
 code
End Class
GET requests $var = $_GET;
$var = $_GET['variable'];		 Dim name
name = Request.QueryString(”")
POST requests $var = $_POST;
$var = $_POST['variable'];		 Dim name
name = Request.Form(”")
Date Function date(); Response.Write(Date())
Include file include(’file.php’);
include_once(’file.php’);		 The Virtual Keyword
Use the virtual keyword to indicate a path beginning with a virtual directory:

<!– #include virtual =”/html/header.inc” –>

The File Keyword
Use the file keyword to indicate a relative path. A relative path begins with the directory that contains the including file.

<!– #include file =”headers\header.inc” –>
Require file require(’file.php’);
require_once(’file.php’);		 n/a
MySQL connect mysql_connect(); Set var1 = Server.CreateObject(”ADODB.Connection”)
Set var2 = Server.CreateObject(”ADODB.Recordset”)

var1.Open “DSN=name“
MySQL query mysql_query(); Set rs = var1.Execute(strSQL)
Do while not rs.eof

Conclusion

It’s always good to know the basic syntax of a variety of languages in your field just to get you by those odd task’s that appear once in a while.

]]> http://www.webdesigneronline.co.uk/basic-phpasp-functions-comparison/feed 5 Some useful Magento template code snippets http://www.webdesigneronline.co.uk/some-useful-magento-template-code-snippets http://www.webdesigneronline.co.uk/some-useful-magento-template-code-snippets#comments Sat, 17 Jul 2010 00:33:22 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=576

Over the last 2 month, I’ve built a few Magento sites during which I’ve had certain requests to add some basic extras to the site template – basic it may sound however if you have even a little experience with Magento, you’ll be aware of its complexity.

Product Reviews and Review form in a tab

1. Add the following:

<catalog_product_view>
<reference name=”product.info.tabs”>
<block type=”review/form” name=”product.review.form” as=”review_form”/>
<action method=”addTab” translate=”title” module=”review”>
<alias>avis</alias>
<title>Avis / commentaires</title>
<block>review/product_view_list</block>
<template>review/product/view/list.phtml</template>
</action>
</reference>

2. Add

<?php
layout = Mage::getSingleton(’core/layout’);
$block = $layout->getBlock(’content’)->getChild(’product.info’)->getChild(’info_tabs’)->getChild(’review_form’);
echo $block->toHtml();
?>

to app/design/frontend/[your_theme]/template/review/product/list.phtml

Note: For the above to work, your theme should already be using product tabs (Many tutorials are available online if you don’t have tabs)

Source: http://www.magentocommerce.com/boards/viewthread/31712/

Show Sub-Categories (as images with text) on Category or product Pages (and sort by name)

If a category contains both products and further sub-categories, then this code can be used so such a category shows both products and sub-categories.

Add the following:

<?php
function sortCategories($a, $b) {
return strcmp($a['name'], $b['name']);
}
?>
<?php
$obj = new Mage_Catalog_Block_Navigation();
$cat = Mage::getModel(’catalog/category’)->load($obj->getCurrentCategory()->getId()); //get current cat
$subcats = $cat->getChildren(); // Get sub cats
// loop on it
if ($subcats) { ?>
<h2 class=”catptitle”>Sub-categories</h2>
<?php }
$categoryArray = array();
foreach(explode(’,',$subcats) as $subCatid){ // split up the mage data for use
$_category = Mage::getModel(’catalog/category’)->load($subCatid);
if($_category->getIsActive()){
$caturl  = $_category->getURL(); // get link to image
$catname = $_category->getName(); // get the name
$catdesc = $_category->getDescription(); // get the name
if($_category->getImageUrl()){
$catimg = $_category->getImageUrl(); // hey, we got image
}else{
$catimg=null;
continue;
} // this is the basic testing data, format as desired & good luck!
$catdescTwo = substr(strip_tags($catdesc), 0, 70);
$categoryArray[] = array(
‘name’ => $catname,
‘url’ => $caturl,
‘desc’ => $catdescTwo,
‘img’ => $catimg
);
}
}
usort($categoryArray, “sortCategories”);
foreach ($categoryArray as $categoryItem) {
echo ‘<a href=”‘.$categoryItem['url'].’”>’.$categoryItem['name'].’</a>
<a href=”‘.$categoryItem['url'].’”><img alt=”" src=”‘.$categoryItem['img'].’” /></a>
‘.$categoryItem['desc'].’…’;
}
?>

to app/design/frontend/[your_theme]/template/catalog/category/list.phtml

OR app/design/frontend/[your_theme]/template/catalog/product/list.phtml

Display RSS Feed items

Step 1

Create a file called latest_news.phtml in app/design/frontend/default/[your_theme]/template/callouts/latest_news.phtml with the following:

<?php $channel = new Zend_Feed_Rss(’INSERT FEED URL’); ?>
<div class=”block block-latest-news”>
<div class=”sideBestS”>
<h2><?php echo $this->__(’Latest News’) ?></h2>
</div>
<div class=”block-content”>
<ol id=”graybox-latest-news”>
<?php $i = 0; ?>
<?php foreach ($channel as $item): ?>
<?php if ($i != 3) { ?>
<li><a href=”<?php echo $item->link; ?>”><?php echo $item->title; ?></a>
<p><?php echo substr($item->description,0,179) . “…”; ?></p>
</li>
<?php $i++; ?>
<?php } ?>
<?php endforeach; ?>
</ol>
</div>
</div>

Step 2

Add the following:

<reference name=”right”>
<block type=”core/template” name=”top.search” as=”topSearch” template=”catalogsearch/form.mini.phtml”/>
<block type=”core/template” name=”right.permanent.callout” template=”callouts/right_col.phtml”/>
<block type=”core/template” name=”right.latest.news” template=”callouts/latest_news.phtml”/>
</reference>

to app/design/frontend/[your_theme]/layout/page.xml

Note: The above will add the code to the right sidebar – you can reference it elsewhere on the site

Display a product’s “quantity in stock” on your Product Pages

<?php $stock_count = (int) Mage::getModel(’cataloginventory/stock_item’)->loadByProduct($this->getProduct())->getQty(); ?>

<?php echo $stock_count ?>

Flush/force DNS (Windows only)

Many a time, when you change the DNS records and nameservers of a domain to point to the new site, it can take up to 72 hours to propagate over the internet. Unfortunately sometimes, the client/customer/general users may see the new site before the developer and if there are any issues then the developer won’t be able to fix them until they can see the new site. Previously i used to wait like anybody else however recently a colleague showed me a method by which I can force my browser to  view the new site!

Step 1:

Open command promt (search/run “CMD” in windows)

In Command promt, type the following:

“ipconfig /flushdns”

image

Step 2

Go to the folder:

%SystemRoot%\system32\drivers\etc\

For windows 7, %SystemRoot% is C:\Windows\

For windows XP, it may be a little different.

Inside the folder “etc” is a file named – “hosts”. Open this with Notepad and add the line

xx.xxx.xxx.xx www.YOUR-DOMAIN.co.uk

At the bottom of the file (where xx.xxx.xxx.xx is the ip address of the new host)

Then you will have to clear your browser cache.

Ecommerce tracking in Magento Using Google Analytics

This one is simple.

Go to System > Configuration > Google API and insert you analytics ID.

Then

  • login to Google analytics
  • Select the account for your site
  • Click edit
  • on “Main Website Profile Information”, click edit
  • tick the radio button “Yes, an E-Commerce site”

Site search tracking in Magento Using Google Analytics

  • login to Google analytics
  • Select the account for your site
  • Click edit
  • on “Main Website Profile Information”, click edit
  • tick the radio button “Do Track Site Search”
  • insert the letter “q” in the input box

Display PHTML files in Dreamweaver

http://www.dreamweaverclub.com/dreamweaver-phtml-inc.php

Conclusion

Is there anything else you would like to do with Magento? leave a note below and I’ll see what i can do!

]]> http://www.webdesigneronline.co.uk/some-useful-magento-template-code-snippets/feed 6 10 great Alternatives to phpMyAdmin http://www.webdesigneronline.co.uk/10-great-alternatives-to-phpmyadmin http://www.webdesigneronline.co.uk/10-great-alternatives-to-phpmyadmin#comments Sat, 10 Oct 2009 15:32:29 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=469

Most people in the web development world are under the impression that phpMyAdmin is the only MySQL client out there for websites. Going a step further, some users are aware of alternative however assume that phpMyAdmin is the best.

Now, I agree that phpMyAdmin is one of the best out there and is is very user friendly. I myself also used phpMyAdmin much until recently… I got introduced to another program which within an hour became my favourite and also this led me to research others out there. Thus, this post!

10 great Alternatives to phpMyAdmin

Adminer (formerly phpMinAdmin)

A full-featured MySQL management tool written in PHP. Does more or less everything phpMyAdmin however consist of a single file only that is ready to upload to your servers and connect to the DB.

image

Navicat

This, in my opinion, is the best MySQL client out there. It does everything you want from a very user friendly interface. However, it doesn’t come free. There is a small price tag to it but is well worth it!

image

Sequel Pro

One for the Mac users.

image

SQLWave

image

SQLyog

image

BlueSQL

Free web based DB management tool.

image

SQL Buddy

image

DBDesigner 4

image

SQLGate

image

HeidiSQL

image

Conclusion

Navicat and Adminer are probably the only other MySQL Clients you need in addition to phpMyAdmin. The rest? I’ll leave them to you to discover which is best suited to you.

]]> http://www.webdesigneronline.co.uk/10-great-alternatives-to-phpmyadmin/feed 75 10 Advance MooTools Scripts to Outshine your Industry http://www.webdesigneronline.co.uk/10-advance-mootools-scripts-to-outshine-your-industry http://www.webdesigneronline.co.uk/10-advance-mootools-scripts-to-outshine-your-industry#comments Tue, 04 Aug 2009 19:18:53 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=279

Following my previous JavaScript article on jQuery – 10 Advance jQuery Scripts to take Your Website to the Next Level – Where I showcased some awesome jQuery scripts, I thought it good to do the same with MooTools.

I could have called this post “50 Advance MooTools Scripts” but kept it at 10 as otherwise you would lose interest and many of the scripts would have been useless. Thus, 10 is the special number today!

MooTools

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Similar to jQuery, MooTools is another very popular JavaScript framework to help do more with less code. I have selected some awesome MooTools script you can use to help outshine the your industry!

Advanced Mootools

Calendar (to input dates)

A cool looking calendar by which you can easily select dates.

  • Style-able and semantic XHTML
  • Highly configurable use of inputs and selects
  • Future/past restrictions
  • Multi Calendar Support
  • And much more!

Homepage (inc. Demo, Download)

mParallax

SIMPLY AMAZING.

Turn’s a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way


Complicated, I know… See the effect in action and you’ll understand in a second!

Homepage (inc. Demo’s, Download)

FancyUpload

An elegant upload script:

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable (is that a word?) via CSS and XHTML and uses MooTools to work in all modern browsers

Homepage (inc. Demo’s, Download)

FancyForm

Not your standard checkbox.

Homepage (inc. Demo’s, Download)

TableGear

Just click any field and start editing it. As soon as you move away from the field, it regains all of its formatting.

  • Designed for PHP/MySQL. (Works with other also)
  • Degradable to work without JavaScript
  • Very customisable

Homepage (inc. Download) | Demo

MooScroll

Customise scroll bars beyond your imagination. Strictly for the Geek only…

Homepage (inc. Demo’s, Download)

MenuMatic

Nice horizontal/vertical menu effect.

Homepage (inc. Download) | Demo 1(Horizontal) | Demo 2 (Vertical)

Slider with Range Indicator

Select a maximum and minimum value using a slider. You can customise the look how you like!

Homepage (inc. Demo, Download)

Horizontal Image Menu

Very nice! (With quite a few options!)

Homepage (inc. Demo, Download)

Kroppr – image cropping script

Impress all your users with this fine script. An image cropping tool that is able to rotate, zoom and move the image in the real time without using plugin’s – such as flash or java.

It’s very simple to implement also!

Homepage (inc. Demo, Download)

Conclusion

Who said jQuery was the only JavaScript library that’s cool. MooTools can be cool too!

If I was asked to recommend one above the other, I wouldn’t give a definite answer. It all depends on what your requirements are. Thereafter, you need to research both scripts and see which would be best for you in the long term!

Useful Links

]]> http://www.webdesigneronline.co.uk/10-advance-mootools-scripts-to-outshine-your-industry/feed 4 10 Advance jQuery Scripts to take Your Website to the Next Level http://www.webdesigneronline.co.uk/10-advance-jquery-scripts-to-take-your-website-to-the-next-level http://www.webdesigneronline.co.uk/10-advance-jquery-scripts-to-take-your-website-to-the-next-level#comments Thu, 23 Jul 2009 07:55:16 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=102

Before 2008, there were only a handful (compared to now) of sites which were of a very high level of quality and stunningly unique; standing out from the rest. It was in 2008 when many tools and frameworks became more popular and widely used amongst the masses. This included CSS based design and everyone’s favourite – Wordpress! Due to this, today, every half decent web designer has a stunning website. You’re probably wondering what I’m getting at? To make your website standout from the rest, you need to take your website to the next level. In this post, I’m going to showcase many Advanced jQuery techniques to add that extra touch to your site.

Advanced jQuery

Below are a list of sites that offer some amazing jQuery script by which you can achieve some stunning effect for your site. I have given a brief introduction to each effect with a link to the original site direct download.

AJAX Fancy Captcha

Taking Captcha’s to the next level! A new, intuitive drag and drop captcha:


Here we’re asked to drag the pencil into the circle! Neat!

Note: According to the producers, this Captcha’s security level is medium.

Homepage (inc. Demo, Download)

jQuery Cycle – Custom Incoming/Outgoing Transitions

Cool image transitions that were once possible in Flash only. This powerful script has room for lots of customisation to all you to fine grain your transition over speed and easing in/out transitions.

Homepage (inc. Demo, Download)

Cool jQuery Sliding Panel

I really like this effect (might implement it here in the future!).

Homepage (inc. Download) | Demo | Tutorial for Wordpress 2.7+

jQuery Scrollable

A very nice/smooth script which you can implement to a div.

This script can be used for

  • Image Galleries
  • Products
  • Navigation
  • Anything else!

Some features:

  • Horizontal/Vertical
  • Can Scroll using navigational buttons, API calls, keyboard arrow keys, and the mouse scroll wheel.
  • Ability to make your own effects
  • and lots of other stuff! See script homepage for script
Homepage (inc. Demo, Download)

jQuery Filterable Portfolio

An awesome effect for portfolios and just showcasing your work!

Here you click the tabs above the images and jQuery performs a cool transition to filter out the required category!

Homepage (inc. Download) | Demo

Animated Portfolio

A Nice Effect!

Homepage (inc. Download) | Demo

Password Strength Meter

A customisable password strength meter to show how secure your password is.

With a bit of tweaking, you should be able to implement it with your registration forms. I’m sure the download contains all the instructions.

Note: Images can be changed!

Homepage (inc. Download) | Demo

jQuery Slide-In Tab

Again from the same site as the above two. This is similar to an accordion effect however horizontal from the edge of the screen.

Homepage (inc. Download) | Demo

JQuery Dashboard

Like the one found on a Mac.

Homepage (inc. Download, Full tutorial) | Demo

Smooth Tabbed Menu

Smooooth!

Homepage (inc. Download) | Demo

BONUS – jQuery Tetris!!!

WIN!

Source Code

Conclusion

You need to initially impress your users within a very short amount of time and one of the methods to achieve this is to use jQuery. By adopting some of the uses above backed up by some inspiration on your side, you can be sure that many of your users will return.

Important Note! All of the above methods are the foundation upon which a strong structure can be built. Use it to your advantage. With some tweaking and CSS, you can take much more out of them. For a freelancer. it’s very important.

If you’re not in the web design/development industry, then using even the most basic jQuery will more than likely impress your visitors! (It’s alright for some!)

Useful Links

]]> http://www.webdesigneronline.co.uk/10-advance-jquery-scripts-to-take-your-website-to-the-next-level/feed 62