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.