Quantcast

Jump to content

» «
Photo

WD&P Mega Topic

  • This topic is locked This topic is locked
8 replies to this topic
Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#1

Posted 17 December 2005 - 09:11 AM Edited by Toadyd, 15 February 2008 - 11:37 AM.

WD&P Mega Topic


Welcome to the Web Design & Programming Mega Topic. Below you will find some useful links to various WD&P related goodies. As well as the WD&P Rules. Any questions you may have about this topic, or about WD&P, please feel free to ask Toadyd, Johnno, or myself. As well as any feedback, errors, or additions you'd like to send to us.

TutorialsPosted/Updated Feb 15th

Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#2

Posted 17 December 2005 - 09:12 AM Edited by Toadyd, 15 February 2008 - 11:13 AM.

Free Image/File HostingFree Web HostingFree Domain Services

Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#3

Posted 17 December 2005 - 09:13 AM Edited by Toadyd, 15 February 2008 - 11:26 AM.

Tutorial Sites

Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#4

Posted 17 December 2005 - 09:14 AM Edited by Toadyd, 15 February 2008 - 11:32 AM.

FTP ApplicationsFree Text Editors

Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#5

Posted 17 December 2005 - 09:18 AM

GTAF Firefox Extension
By PatrickW - Original Topic






I made a firefox extension, based on the well-known BBcode firefox extension. It adds support for (almost) all message-tags to the background menu including the GTAforums specific ones.

user posted image

This extension is now officially released, and available at the firefox extensions update site.
It can be installed, rated and commented on its own page.
02-05-2005:Version 0.2.0 is now available at that site or you can select select update from the extensions window ( tools->extensions)

Install
• install GTAFcode from its home at update.mozilla.org
• restart firefox.
• rate and comment the extension at its home at update.mozilla.org

From now on you should see a gtaforum code menu entry in the background menu whenever you're in an editwindow.

How to use
Most of the entries should be self explaining, the only thing that might need some explanation is the support for the table/tableb tags.
You should just write the content of your table thereby seperating horizontal cels with a '|' character, and seperating the rows with a newline. To render a cel as a header, you should prefix is with a "*".
When your done typing, select the whole block and choose (bordered) table from the special submenu to convert it to proper tags.
e.g.
*cel1|*cel2
more cels|and yet another|last one


wil result in:
cel1 cel2
more cels and yet another last one
If no text was selected when you issued the table command, you will be prompted for content (use '|' and '*' to seperate fields and make headers) and you can stop by entering a empty row.

Technology
This extension (like any firefox extension) is written RDF (Resource Description Framework), XUL (XML UserInterface Language) and Java-Script. The only tools that are needed are a plain text-editor (even notepad will do) and winzip.

Known Issues sad.gif
• apply tags->Image inserts [image][/image] i.s.o.

Edit:
•changed text for release at its home at update.mozilla.org
•The mirrors are no longer needed, but thanks for supplying them sofar.
• updated for 0.2.0 release

For those that are less adventureous....

I've updated this extension, to be compatible with the latest FireFox version (1.5).
Sadly they won't host it on the official mozzila extension site anymore, as they consider it "promotional" now sad.gif..

Therefor you won't get an automatic update notice,
and you'll have to install the new version of gtafcode (v0.3.0) manually from my site.

New
Some minor bugs have been solved, and a nifty "break-quote" has been added.
Select a spot in a quote where you want to add some comment, than selection the special->break-quote, will insert a
CODE
[/quote][quote=continued]
pair, which enable you to put your comments in between.

I haven't included BBcode's Custom feature (yet)

BTW
Sorry for the long pause in posting on the forums, but I've been lurking in silence ph34r.gif


Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#6

Posted 17 December 2005 - 09:22 AM Edited by Toadyd, 14 July 2006 - 02:52 PM.

GoDaddy.com domains for $5.19 USD
By Barbaneez - Original Topic

GoDaddy have clamped down on this, and it is no longer possible to get the domains so cheap.
Check the original topic for any updates or new ideas giving you tips on how to save a bit of money.

Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#7

Posted 17 December 2005 - 09:23 AM

Making Lists Useful
By Svip - Original Topic






Making lists useful

Some people have different ideas of how to create a menu, or any sort of data there just keep repeating down the line.

It's here lists come in, mainly known as <ul> ( unordered list ), but there is also <ol> ( ordered list ), but since we don't care about numbers, we us <ul>, each item has the tag <li> for "list item".

Let's write a list that is a menu we want to use.

HTML:
HTML
<ul>
<li>
Item 1.
</li>
<li>
Item 2.
</li>
<li>
Item 3.
</li>
<li>
Item 4.
</li>
</ul>

Click to view.

Okay. This doesn't look like much, but let's get into the CSS. First we want to remove those annoying circles, and remove the padding.

CSS:
CODE
ul {
list-style-type: none;
padding: 0;
}

Click to view.

Okay. Let's make these items a bit more prettier. First lets add some borders on them.

CSS:
CODE
li {
border:1px solid gray;
}

Click to view.

Oh jeez, those lists became a little too long. So we are doomed to set a width of it. I think 30% is good number, you can use anything you want, in fact pixels instead of %.

CSS:
CODE
li {
width: 30%;
...
}

Click to view.

Great, now let's add a background colour and some text colour to each of the list items.

CSS:
CODE
li {
background-color: #ff3535;
color: #0a3e6f;
...
}

Click to view.

Oh yeah, I didn't say this was suppose to be pretty. tounge.gif

Anyways, how about we add a background to left of each item?

CSS:
CODE
ul {
width: 30%;
background-color: #256db0;
list-style-type: none;
padding: 0 0 0 10%;
}

Click to view.

Woops, those items got a bit small. Better fix that by removing the width of the list items.

Click to view.

Okay, anyways. Now this might seem boring enough, but what can you really use list tags for?

Let me show you. First we strip down our current CSS code, so we end up with;

CSS:
CODE
ul {
list-style-type: none;
padding: 0;
}
li {
border:1px solid gray;
}


Okay, we have seen this before, now to make this cool, we have to add some id tags to our list, so our list in HTML will look like this:

HTML:
HTML
<li id="left">
Item 1.
</li>
<li id="right">
Item 2.
</li>
<li id="left">
Item 3.
</li>
<li id="right">
Item 4.
</li>


Good, good. And first we start by letting the "left" items float to the left.

CSS:
CODE
li#left {
float:left;
}

Click to view.

Wow? Yeah. Okay, in order to make this work, we have to give the left items a width of 50% to give the same amount of space.

CSS:
CODE
li#left {
width:50%;
float:left;
}

Click to view.

Okay, now let's say we are going to have a list of links, and they have to displayed on each side of the list ( as it looks like in the link ).

First we have to make the text of the right items be standing to the right.

CSS:
CODE
id#right {
text-align:right;
}


Then we have to add some links to our HTML code so we can see the sense.

HTML:
HTML
<li id="left">
<a href="#">Item 1.</a>
</li>
<li id="right">
<a href="#">Item 2.</a>
</li>
<li id="left">
<a href="#">Item 3.</a>
</li>
<li id="right">
<a href="#">Item 4.</a>
</li>

Click to view.

Uuuh, those links look ugly. We better fix that.

CSS:
CODE
li a:link, li a:visited {
color: #bda176;
text-decoration: none;
}
li a:hover, li a:active {
text-decoration: underline;
}

Click to view.

That's more like it. But to make it work even better, it would be cool if you could just hover within the borders and the link would be ready to press, right?

CSS:
CODE
li a:link, li a:visited {
width: 100%;
display: block;
...
}

Click to view.

Good, now we can make this look pretty good if we added a "hover" background for the links.

CSS:
CODE
li a:hover, li a:active {
background-color: #f9e3bf;
...
}

Click to view.

Yup, that looks great. Lastly I will just add/remove some CSS to make it look cooler.

CSS:
Add:
CODE
body {
background-color: #ffdfac;
}
ul {
width: 30%;
border: 1px solid #bda176;
...
}


Remove:
CODE
li {
border: 1px solid gray;
}

Click to view.

Now you might be wondering, what would happen if I added only one more list item? Not much but this;

Click to view.

That's why I would suggest you not to use borders on the <ul> tags, and rather on the item surrending the <ul> tag. But you get the idea.

I said I would make it. ¨¨

Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#8

Posted 17 December 2005 - 09:24 AM

From frames/tables to div tags
By Svip - Original Topic






From frames and tables to div tags
Notice: clicking the links throughout the guide will allow you to see how the site would look with the code we have made until now.

This guide is to tell you how to get from tables and frames to <div> tags.

Questions
Why go over to <div> tags? Tables and frames are very easy to use.

Yes, tables and frames are basically easy to use. But frames has a lot of problems, mostly it cause it can mess up any design, either by the user being allowed to move the borders or the wrong stuff opens in a frame. Also frames is not supported by many browsers, and it requires browsers to download a lot of useless stuff.

Secondly, tables is without doubt an better option than frames, but tables still have a lot of useless tags that you can have saved, and tables was originaly meant for data and not content.

So why is <div> tags so much better?

I can't even start to desribe how annoying making frames is, and tables has rows and cells and all sorts of stuff you need to take care of. While <div> tags only have their own <div> </div> tags to ensure the matter with, which means that each part of your content does not have to be in cells which are controlled by the table, while <div> tags can easily be set different towards each other, in fact none of the other <div> tags having some to say about the other tag.

The Guide
Let's first start out with something you might already know;

Tables;
HTML
<table>
<tr>
<td colspan="2">
Here is a logo.
</td>
</tr>
<tr>
<td>
A navigation list.
</td>
<td>
The content
</td>
</tr>
</table>

See how this page looks here.

While the exact same code could be resovled this way;

HTML
<div id="logo">
Here is a logo.
</div>
<div id="navi">
A navigation list.
</div>
<div id="main">
The content
</div>

See how this page looks here.

Now you may think that the page with the table tags looks better than the one with the div tags.

Perhaps, but we need CSS to make this work. Since we are not going to work with the tables again, this is the last time you see that code.

So let's start with the CSS code. First of all, we assume that the logo is hovering above both the navigation and the content, while the content and the navigation are side by side. So we make the navigation float left.

CSS:
CODE
div#navi {
float: left;
}

See the page now.

Much better aye?

Okay, let's move on, in order to give it a bit of sense, let's add a border to the logo, a border that is on either side and on the bottom, just not the top, just to make some graphical stuff.

CSS:
CODE
div#logo {
border-width: 0px 1px 1px;
border-style: none solid solid;
border-color: #545454;
}

See the page now.

Remember; if we were doing this with tables the size of the cell would not have been that width. But let's go on by adding borders to each of the bottom parts.

CSS:
CODE
div#navi {
float: left;
border-width: 0px 1px 1px 0px;
border-style: none solid solid none;
border-color: #545454;
}
div#main {
border-bottom: 1px solid #545454;
}

See the page now.

Not the world's most beautiful page, but at least we are getting somewhere. Now it could annoy someone that the div tags doesn't have any padding yet, so we'll add that for the looks.

CSS:
CODE
div {
padding: 3px;
}

See the page now.

Great, now we should make the whole site centred, so it only fills 90% of the screen, while it will always be kept centred. But because IE doesn't support you to do it with the body tag, I have to add a container div tag first.

HTML:
HTML
<div id="container">
...
</div>


CSS:
CODE
div#container {
width: 90%;
margin: 10px auto;
padding: 0px;
}

See the page now.

So let's add some background to the logo, like something gray, while we make the logo larger, in case an image should be added.

CSS:
CODE
div#logo {
height: 10%;
background-color: #B1B1B1;
...
}

See the page now.

In order to give a better sense of the content, we'll add a lot of it:

HTML:
HTML
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /><br />
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

See the page now.

Okay, you will quickly notice that the navigation is now for it self, but remember, the larger the navigation gets, the more it will push the content text. But, we must be warned. Cause if we add too much it will just push the content to the right, and not just flip down as we want it to.

So we need to give it a width. 15% is good for a navigation.

CSS:
CODE
div#navi {
width: 15%;
...
}

See the page now.


And there you have it. In a later tutorial, I will tell you how to make a navigation thingie. But now you should be able to do this by your own, right?

To all the hardcore webdesigners; please notice me if I have done something "wrong", which I assume I haven't.

Dalpura
  • Dalpura

  • Members
  • Joined: 14 Nov 2003

#9

Posted 17 December 2005 - 09:25 AM

Winamp "Now Playing" Sig
By Jack_Knife - Original Topic






Well, after getting two requests in like, half an hour of having it as my sig, I figured I'd post the code. Just change the username to your Audioscrobbler one, and upload to your PHP-enabled web server, and that's it.

nowplaying.php:
CODE
<?

// Set content type header
header("Content-type: image/png");

// Constants
$charWidth = 7;
$charWidthDisp = 6;
$charHeight = 10;
$chars = array("." => 11, ":" => 12, "(" => 13, ")" => 14, "-" => 15, "'" => 16, "!" => 17,
      "_" => 18, "+" => 19, "\\" => 20, "/" => 21, "[" => 22, "]" => 23, "^" => 24,
      "&" => 25, "%" => 26, "," => 27, "=" => 28, "$" => 29, "#" => 30);

// Variables
$username = "Jack_Knife"; // Change this to your Audioscrobbler username

// Retrieve name of last song played and format
list(,$song) = explode("\n", @file_get_contents("http://ws.audioscrobbler.com/txt/recent/".$username));
if (!isset($song) || strlen($song) == 0) {
 $song = "Not playing anything";
}
$song = strtoupper($song);
if (strlen($song) > 41) $song = substr($song, 0, 38)."...";

// Load the background image and set transparency
$image = imagecreatefrompng("background.png");
$green = imagecolorallocate($image, 0, 255, 0);
$trans = imagecolortransparent($image, $green);

// Load the font image
$fontImage = imagecreatefrompng("font.png");

// Loop through string printing a character at a time
$startX = 32;
$startY = 31;
for ($i=0; $i<strlen($song); $i++) {
 $char = $song[$i];
 $asc = ord($char);
 switch ($asc) {
  case ($asc >= 65 && $asc <= 90): // Letters
   imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, ($asc - 65) * $charWidth, 0, $charWidth, $charHeight);
   break;
  case ($asc >= 48 && $asc <= 57): // Numbers
   imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, ($asc - 48) * $charWidth, $charHeight, $charWidth, $charHeight);
   break;
  case 34: // "
   imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, 26 * $charWidth, 0, $charWidth, $charHeight);
   break;
  case 64: // @
   imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, 27 * $charWidth, 0, $charWidth, $charHeight);
   break;
  default: // All other characters
   if (isset($chars[$char])) imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, $chars[$char] * $charWidth, $charHeight, $charWidth, $charHeight);
   break;
 }
}

// Output image and clean up
imagepng($image);
imagedestroy($image);

?>


You'll also need background.png and font.png

background.png:
user posted image

font.png:
user posted image

Upload the three files, and you're done. I know the code ain't too good, but it was kinda rushed, plus the stupid winamp font image doesn't have the characters in the same order as their ASCII numbers, which made it harder.

Enjoy, and post any questions you may have. smile.gif




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users