HTML5/CSS3/advancedJavascript learning and programming logs - Computer Technical Help

Two Plus Two Forums Other Topics Computer and Technical Help

HTML5/CSS3/advancedJavascript learning and programming logs

Post Reply Subscribe

...

Page 1 of 12

1 2 3 4 5 6 11

Page 1 of 12

1 2 3 4 5 6 11

04-26-2011 , 02:31 AM

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Welcome to HTML5/CSS3/advanced javascript learning and programming log.

For this thread, I am using the following resources, along with all the other resources that hopefully pop up in this thread. There isn't any one perfect resource that I have found as of yet:

BASICS

http://w3schools.com/
- gives a basic overview of all the programming languages. Yes, there are issues with some of the advice, for example: "if you want this to work in internet explorer, you must add a doctype." Well, no kidding. I still recomend this site because the layout is very easy to us and intuitive. I haven't came across any busted codes, so that is a plus.

http://w3fools.com/
- I know that there are people (Gullanian, who intro'd this to me) who don't approve of w3schools, and by no means is that the end-all-be-all of web-programming. w3fools takes a violent stance against w3schools, but this is a situation where the kettle is calling the tea pot black. Many of the linked articles are incomplete and inaccurate. However, this is a decent resource. The best link is to Google's From the Ground Up series.

stackoverflow is a good resource too.

JAVASCRIPT

http://www.openjs.com/tutorials/adva...l/contents.php
- gives a decent overview of some of the advanced javascript functions available.

http://www.ecma-international.org/pu...s/Ecma-262.htm
- The written standards for ecmascript aka javascript.

HTML5

http://diveintohtml5.org/table-of-contents.html#canvas
- This is the free version of the same book brought to you by O'Rielly. Yes, read it and reread it. The writing is funny. The beginning sections on doctypes, utf, and other concepts is a mandatory read. Each section has tons of amazing external links. This is the grand pooh-bah of all the HTML5 resources, but there is one small problem: incomplete codes. I guess the paid version is more complete.

http://www.web3mantra.com/tag/canvas-clock-with-html5/
- a good collection of tutorials for many things that we all should know how to do: create forms, build blogs, etc.

http://www.whatwg.org/specs/web-apps...d-textbaseline
- This is the group working on the HTML5 standards. Full of great ideas and explanations.

http://dev.opera.com/articles/view/h...as-the-basics/
- Opera's dev. team is pretty darn good with this stuff. Great ideas.

BROWSWER SUPPORT?

http://caniuse.com/#
- This site is vital to anyone who wants to know what browsers support what. Each item is linked to the corresponding w3c.com section.

INSPIRATION

http://www.hongkiat.com/blog/48-excellent-html5-demos/
- This answers the basic question: why don't I have a 6-figure income? If you are really too bored to look at it all, scroll all the way to the bottom.

-----------------

About the resources:

If you attempt to use all of these resources in conjunction with each other, you will find a messy world of coding. In order to dodge this issue, I am staying with the following rules:

Browsers I am doing initial programming in:

I am doing my coding in FireFox4 and Google Chrome. FireFox4 is buggy as hell, the look sucks, and I just hate this browser: what works one day may not work the next. One time, I was pulling up the web codes, and I kept getting shoved to the print screen and I don't own a printer. Next day: this wasn't a problem.

Browser Compatibility

There are several variations on the theme. Some sites will tell you to use various tags for browser compatibility. This includes:

Code:

-ms-          // IE
-moz-         // firefox
-webkit-     // safari
-o-       // opera

I am going to try out the codes with these labels without the labels and see what happens, then report on it.

Older browsers:

Eff them, right?

From the HTML5 book:

There are several new elements defined in HTML5 which are block-level elements. That is, they can contain other block-level elements, and HTML5-compliant browsers will style them as display:block by default. If you want to use these elements in older browsers, you will need to define the display style manually:

Code:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

and of course, there is a special case for Internet Explorer: Here is a short-bus code for that browser:

Code:

<!--[if lt IE 9]>
<script>
  var e = ("abbr,article,aside,audio,canvas,datalist,details," +
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
    "progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
</script>
<![endif]-->

-----------------------------------

Specs for HTML5:

In order to be as modern as possible, I am using the following layout in my code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

I don't know if/how other doctypes work with the codes. I only know that there are seemingly (see ff4 bugs) strange quirks.

For example, the ONLY way to write an image that comes up is:

Code:

background-image:url('http:xxx');

I've tried just about every other variation I could find or think of. I haven't found any other ways to do this.

Here is the post that originally spawned this thread:

Quote:

Does anyone know how to position a <canvas> element?

I want to put all the circles against the left:

I can't find anything that states how to place the element in a specific position, and it seems plain wrong to use <div>.

If you are interested, here is the code. Took me all damn day to get this one to work. The information is quite sparse and scattered to boot.

Anyways, I am collecting a bunch of resources right now. I'll begin a log in about one week with all the great stuff (read: links that are beyond my head) I found.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="web.css" />
</head>
<body>

<canvas id="thisCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("thisCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Music", 100, 110);

</script>

<canvas id="secondCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("secondCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Writing", 100, 110);

</script>

<canvas id="thirdCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("thirdCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Web", 100, 110);

</script>

</body>
</html>

I don't think that the doctype accepts styles in the head, so here is the stylesheet:

I know there are like 15 ways to write image links, but this is the ONLY way to write it so that it works. Standards FTL?

Code:

body
{
background-image:url('http://i218.photobucket.com/albums/cc208/davidtoomey/smallblot.jpg');
}

Last edited by jukofyork; 04-27-2011 at 10:56 PM. Reason: Merged new OP with old OP from split thread.

Quote

$25m Guaranteed WPM on CoinPoker

Join the action now

Daily Rewards • Splash Pots • CoinRaces

04-26-2011 , 09:14 PM

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,154

don't you just position them with CSS as you would any other element of a page? I dunno, haven't ever used a canvas yet...

Quote

04-26-2011 , 09:14 PM

anononon

Guest

Posts: n/a

No F idea how to use canvas. Front end work =

Quote

04-26-2011 , 09:19 PM

Zurvan

Carpal \'Tunnel

Join Date: Apr 2005 Posts: 37,385

Canvas/HTML5/CSS3 is somewhere on my very long list of "stuff I want to learn about"

Instead, I post on 2+2 and watch hockey.

Quote

04-27-2011 , 03:05 AM

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by _dave_

don't you just position them with CSS as you would any other element of a page? I dunno, haven't ever used a canvas yet...

Not sure, really. Unfortunately, canvas doesn't have margins or buffers or anything like that, so it's not like any other element.

The best solution I came up with, and I feel like a filthy vermin: inline style.

The StackOverflow is pretty nifty, but it's not quite what I need. I copy/pasted the code and the image is centered in the canvas. I think the OP was about centering the actual canvas, but that's not the answer he got, unfortunately.

I think the problem is here:

Code:

var canvasWidth = viewportWidth * C;
    var canvasHeight = canvasWidth / W_TO_H;
    el.style.position = "fixed";
    el.setAttribute("width", canvasWidth);
    el.setAttribute("height", canvasHeight);
    el.style.top = (viewportHeight - canvasHeight) / 2;
    el.style.left = (viewportWidth - canvasWidth) / 2;

The last two lines seem to describe how long to draw the line, not where to draw the line.

Unfortunately, my js solutions didn't work.

I tried:

Code:

el.style.position.left=300px;
el.style.position= "left: 300px";    // Yes, that is desperate, I know.

There doesn't seem to be any positioning codes for js: only how to find the position of an element in a DOM tree.

Quote

04-27-2011 , 03:09 AM

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by kyleb

No F idea how to use canvas. Front end work =

I don't know: in the sad world of web programming, I feel less said doing front end.

Of course, I don't know the first thing about back end work. echo?

Quote

04-27-2011 , 04:02 AM

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,154

This one's maybe more relevant? http://stackoverflow.com/questions/5...ent-attributes

Quote

04-27-2011 , 05:01 AM

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by _dave_

This one's maybe more relevant? http://stackoverflow.com/questions/5...ent-attributes

I need to lurk more in this site. This is also good information to know for later use. whatwg is also very useful.

I think I figured out the issue:

Basically, all elements, classically speaking, are set at a default by the browsers. A <div>, or <p>, or whatever is going to begin at the left and expand all the way to the right causing all the elements to stack from top to bottom. For some reason, the browsers don't interpret canvas this way. While I was expecting the <canvas> images to act this way, they ended up "stacking" along the x axis opposed to the y axis as it would with a <div> or <p> element.

This guy explains why elements behave the way they do far better than I can, with total nerd explanations:

Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough:
http://www.youtube.com/watch?v=_mgyf...layer_embedded

I think the way that <canvas> is interpreted is why the external or head style sheets don't work (or it could be because I suck at coding, you decide).

BUT!!!!!

2+2 is the only place you will learn this.

--------------------------------------------------

Continuing on with this project, opacity is an interesting concept. I sort of enjoy screwing with it, though the code piece is sort of mystifying:

The code for opacity is as follows:

Code:

filter:alpha(opacity=10);
opacity:0.75;

Create the alpha opacity to whatever you want, then punch in a bunch of numbers in opacity and see what happens. I don't know why they bothered with creating the alpha value. Would it be that painful to just call it "100" by default and use numbers 1-100 as valid in opacity?

The code is 121 lines long. Hopefully that isn't too obfuscated. I'm not using any shorthand.

Quote

04-27-2011 , 10:25 AM

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

You seem to be creating an entire website in an HTML5 canvas, I would be very careful doing this as there are a lot of drawbacks, a lot of the things you want to do could probably be done in CSS/Jquery.

Quote

04-27-2011 , 12:23 PM

#10

Zurvan

Carpal \'Tunnel

Join Date: Apr 2005 Posts: 37,385

At the job interview I mentioned earlier we spent a fair bit of time talking about Canvas, and one of the things they pointed out is that it really suffers on performance if you get even a moderate number of moving parts in there.

Quote

04-27-2011 , 01:38 PM

#11

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Quote:

Originally Posted by Zurvan

Canvas is still quite a new technology, but the latest browsers really do render it nicely and reasonably well, in our tests IE9 actually comes out top followed closely by Chrome.

However, in tests we did with a simple game in Direct X and the same game in canvas (not the most scientific test we know), canvas runs around 8x slower, which shows there is a lot of room for improvement. But it's being improved all the time and I expect that gap to close really quickly.

Quote

04-27-2011 , 06:48 PM

#12

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

The entire page is not ran in canvas. The only part that is canvas is the circles. The main is just <div> with some CSS attributes. The only part that is new to CSS3 is the opacity and curvature on the border.

Canvas is an undiscovered territory, but that is partly because it is new and no one is familiar with it, and also because it is tied into js, which few people are really good at anyways. The fact that no one can tell you how to position a canvas is proof of how little is known about canvas. I could have used a <div> around the <canvas> element, but I wanted to be sure there was no other solutions.

The meat of the code is very basic (outside of canvas, obv):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">
body
{
background-image:url('http://i218.photobucket.com/albums/cc208/davidtoomey/smallblot.jpg');
}

#main
{
position:absolute;
top:5em;
left:20em;
right:5em;
background-color:blue;
color:white;
border-style:solid;
border-width:10px;
border-color:black;
filter:alpha(opacity=10);
opacity:0.75;
border-opacity:1;
border-radius:100px;
padding:2em;
}

span
{
word-wrap:normal;
}
</style>
</head>
<body>

<canvas id="thisCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("thisCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Music", 100, 110);

</script>

<canvas id="secondCanvas" width="200" height="200" style="position: absolute; left: .5em; top: 10em;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("secondCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Writing", 100, 110);

</script>

<canvas id="thirdCanvas" width="200" height="200" style="position: absolute; left: .5em; top: 20em;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("thirdCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Web", 100, 110);

</script>

<div id="main">
<span>

<h1> WELCOME </h1>

<p>I'll tell you this in so many words. I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words. I'll tell you this in so many words. I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words. I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words. I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.</p>

</span>
</div>

</body>
</html>

Of course, there is much to be said and discovered about the rules governing <!DOCTYPE html>, which is a stumbling block that will cause you to pull your hair out. Then again, I like the strong enforcement of rules: I get very sad when I see a site created in HTML4.0 transitional and see the same thing described 15 different ways, which is all too common.

Instead of writing "Your browser doesn't support canvas," I should write: "get a real browser <here>, meng!"

Quote

04-27-2011 , 07:56 PM

#13

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,154

it seems like a function to draw those round canvases may be preferable to copy/pasting the same code 3 times changing only a couple of words, e.g.

[php]
<script type="text/javascript">
function makeButton(canvasId, buttonText)
{
var c=document.getElementById(canvasId);
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText(buttonText, 100, 110);
}

makeButton("thisCanvas", "Music")
makeButton("secondCanvas", "Writing")
makeButton("thirdCanvas", "Web")

</script>
[/php]
untested and edited straight in the 2p2 edit box so use at your own risk!

also good idea to try and be consistent when naming things, thisCanvas -> secondCanvas -> thirdCanvas =

Quote

04-27-2011 , 08:02 PM

#14

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Use an array of canvases

Quote

04-28-2011 , 10:33 AM

#15

markdeeznutz

old hand

Join Date: Aug 2006 Posts: 1,279

Thank you so much for this thread. I was under the impression that w3schools was actually part of w3c. I always wondered why the information seemed a bit off but could never find other good resources like you posted.

Quote

04-29-2011 , 12:52 AM

#16

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by _dave_

it seems like a function to draw those round canvases may be preferable to copy/pasting the same code 3 times changing only a couple of words, e.g.

[php]
<script type="text/javascript">
function makeButton(canvasId, buttonText)
{
var c=document.getElementById(canvasId);
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText(buttonText, 100, 110);
}

makeButton("thisCanvas", "Music")
makeButton("secondCanvas", "Writing")
makeButton("thirdCanvas", "Web")

</script>
[/php]untested and edited straight in the 2p2 edit box so use at your own risk!

also good idea to try and be consistent when naming things, thisCanvas -> secondCanvas -> thirdCanvas =

Quote:

Originally Posted by Gullanian

Use an array of canvases

Both of these are good ideas. However, I am concerned about the style positioning, which will probably throw a wrench into things.

Unfortunately, my understanding of arrays would create a code that is five times as long as what I have.

I'm going to put this one on the back burner for right now. There is going to be too many things I have to learn about before I can get all of the stuff I want to happen, which includes shortening the codes and adding some animations. Basically, I want to make it so that when the user clicks on the "buttons," a line will come out of it with a menu to more specific links.

Quote

04-29-2011 , 01:10 AM

#17

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Further project ideas I have:

Executive clock wall:
Create a series of clocks that will show different times in different cities, sort of like this, but not an angle and with different cities.

Overhead city-scape:
Since CSS3 adds in a shadow feature, I would like to render a 3D birds-eye-view of buildings. This should be pretty easy.

Convert a normal page to layers of 3D shapes:
This is more abstract and sits in my head for right now. I'll probably work on this one before the rest since it will be easy.

Render a few normal looking pages:
Create a normalized CSS2/XHTML page, then change to coding to CSS3/HTML5. I figure it's pretty important to do this, assuming people/companies would want to update their websites. I'll probably find some poorly done sites on the web and fix them up myself for giggles.

There's one idea I am currently stewing on that is all javascript:

I have 3 brick sizes, all written in <div>

I want to render a brick wall by only using the three divs. There are 2 versions:

1- Create the brick wall on the whole page.
2- Create a brick wall in a div.

The idea is to create the bricks in a random fashion, so basically, I'll probably have to create a Math.random() along with a loop of some sort. The problem will be getting it to stop so that it renders one page with no spaces at the end. I guess the other odd plus to it will be that when the user refreshes the page, the layout would change.

Code:

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="utf-8"> 
<head> 

<style type="text/css"> 
.brick 
{ width:2em; 
height:1em; 
background-color: red; 
border:0.1em; 
border-style: solid; 
border-color: gray; 
margin:0em; 
float:left; 
}  

.brickTwo 
{ 
width:1em; 
height:1em; 
background-color: 
red; border:0.1em; 
border-style: solid; 
border-color: gray; 
margin:0em; 
float:left; 
}  

.brickThree 
{ 
width:3em; 
height:1em; 
background-color: 
red; border:0.1em; 
border-style: solid; 
border-color: gray; 
margin:0em; 
float:left; 
} 
</style> 
</head> 

<body>  
<div class="brick"></div> 
<div class="brickTwo"></div> 
<div class="brickThree"></div>   
</body> 
</html>

Unfortunately, the more I think about it, the more impossible it seems. How would I ensure that it renders a complete wall with no blank spaces at the right side of the screen?

Eh, I'll just do some basic stuff for right now.....

Quote

04-29-2011 , 05:56 PM

#18

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

You should check this article about making backgrounds: The Cicada Principle and Why It Matters to Web Designers

The basic idea is to use small images with a width that is prime. This will generate "randomness" as the pattern will last a long time before it starts repeating.

Quote

04-29-2011 , 08:00 PM

#19

gaming_mouse

Carpal \'Tunnel

Join Date: Oct 2004 Posts: 13,786

Quote:

Originally Posted by TheIrishThug

cool link. thx.

Quote

04-30-2011 , 01:12 AM

#20

smrk

old hand

Join Date: Feb 2008 Posts: 1,575

I wouldn't touch canvas with java.awt's ****

Quote

04-30-2011 , 01:40 AM

#21

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Before going crazy and trying a bunch of exciting stuff, I am going to go ahead and take a basic page and mess around with the new HTML5 tags.

So, my fictional client sells paper bags. Perhaps he created this site with a template in 1994 or something, and finally, after all these years, decided to capture his dream of selling luncheon bags. I'm not one to judge and I am desperate for money, so....

Somehow, despite the fictional client's atrocious website, the code doesn't make me want to scratch my eyes out:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">


#header
{
background-color:#D2691E;
height: 5em;
padding-top: 1em;
padding-left: 1em;
border-style: solid;
}

#left
{
position: absolute;
background-color: #D2691E;
width: 7em;
height: 20em;
border-style: solid;
padding-left: 0.5em;
}

#main
{
height: 20em;
background-color: #D2691E;
margin-left: 7em;
border-style: solid;
padding-left: 1em;
}

#footer
{
background-color: #D2691E;
height: 10em;
border-style: solid;
}


#hList
{
text-decoration: underline;
display: inline;
}

</style>
</head>
<body>

<div id="header">
    <h1>Welcome to the site</h1>
</div>

<div id="left">
    <p><strong>Stuff:</strong></p>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
<div id="main">
    <span>
    This page does absolutely nothing, so don't press anything.
    </span>
</div>

<div id="footer">
    <p>
    <strong>Links that don't work:</strong>
    </p>
    <ul class="listed">
        <li id="hList">one</li>
        <li id="hList">two</li>
        <li id="hList">three</li>
    </ul>
</div>

</body>
</html>

(I realize that I could have used <a> tags and stuff, but I don't care right now)

Quote

04-30-2011 , 01:44 AM

#22

anononon

Guest

Posts: n/a

What tags did you use that are new? Looks like old stuff.

Quote

04-30-2011 , 01:49 AM

#23

smrk

old hand

Join Date: Feb 2008 Posts: 1,575

right

use <header> <footer> <nav> <section> <article>

<article> can have its own <header> <footer> etc

Quote

04-30-2011 , 02:51 AM

#24

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

No, there is no new tags. I am taking an "old" website and updating the site with new tags. Sorry, I'll stay away from the cute stories from now on.

--------------

I went ahead and created this page that shows the behavior of all the tags. I think the results are interesting.

Take note that I did not change the background color on <mark>. You can change the background-color to whatever you want. I just think it's interesting that it defaults to yellow.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">

section
{
background-color: red;
}

nav
{
background-color: red;
}

article
{
background-color: red;
}

aside
{
background-color: red;
}

hgroup
{
background-color: red;
}

header
{
background-color: red;
}

footer
{
background-color: red;
}

time
{
background-color: red;
}


</style>
</head>
<body>

<section>
section words
</section>

<nav>
nav words
</nav>

<article>
article words
</article>

<aside>
aside words
</aside>

<hgroup>
hgroup words
</hgroup>

<mark>
mark words
</mark>

<header>
header words
</header>

<footer>
footer words
</footer>

<time>
time words
</time>

<footer>
footer words
</footer>

<time>
time words
</time>

<mark>
mark words
</mark>

</body>
</html>