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

Two Plus Two Forums Other Topics Computer and Technical Help

HTML5/CSS3/advancedJavascript learning and programming logs

Post Reply Subscribe

...

Page 11 of 12

6 7 8 9 10 11 12

Page 11 of 12

6 7 8 9 10 11 12

06-06-2011 , 01:40 AM

#251

gaming_mouse

Carpal \'Tunnel

Join Date: Oct 2004 Posts: 13,786

Quote:

Originally Posted by kyleb

CodeIgniter is likely to be the least difficult to learn. I am a little biased because I use it for most of my projects, but it does have the least "magic" involved. Which is a good thing, IMO.

I agree with this. CodeIgniter seems to have the easiest learning curve of any, but still has enough power to be valuable. EDIT: And has good newbie learning resources

Quote

150% up to $2,000 Welcome Bonus on CoinPoker

Join the action now

Daily Rewards • Splash Pots • CoinRaces

06-06-2011 , 04:53 AM

#252

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Regardless of where I want to be, where I am coming from, and where I am actually going, I'm not trying to create a db-driven site. I just wanted to put up a comment box. Nothing more, nothing less.

Tonight was spent mostly twiddling my thumbs with various other stuff with other people, and twiddling my thumbs in front of a computer reading this and reading that.

What did I really learn today?

insert("xxxxx.php") makes my life a lot easier. How I would implement this into my current project is a question riddled with choice vocabulary I won't repeat here. Regardless, insert() is perfect for me since I have a ton of articles that are intertwined, so 20 articles on the left of the page? Write once, insert(). Lovely.

I am sort of happy I got the comment box to work, but I am not happy with the implementation. I have two comment boxes right now, here is one, just imagine the other says "commentTwo":

Code:

<?php
require('connect.php');

if(isset($_POST['subjectOne'])){
    $subjectOne = $_POST['subjectOne'];
}

if (isset($_POST['name'])){
    $name = $_POST['name'];
}

if (isset($_POST['commentary'])){
    $comment = $_POST['commentary'];
}

if (isset($_POST['submit'])){
    $submit = $_POST['submit'];
}

if($submit){
    if($name&&$comment){
        $insert=mysql_query("INSERT INTO comments (subject, name, comment) VALUES ('" . mysql_real_escape_string($subjectTwo) . "','" . mysql_real_escape_string($name) . "','" . mysql_real_escape_string($comment) . "')");
        header('Location: direct.php'); 
    }else{
        echo "Please fill out all fields";
    }
}

?>


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



</head>

<body>

<form action="comment.php"
    method="POST">
    <fieldset>
        <legend>Comments:</legend>
        <p>While I am a strong proponent of freedom of speech and expression, I am granted with the right to delete spam, troll posts, and rudeness. I will exercise that right when needed.</p>
        <input type="hidden" name="subjectOne" value="sOne">
        <p><label>Name:<br><input type="text" name="name"></label></p>
        <p><label>Comments:<br><textarea name="commentary"></textarea></label></p>
        
        <input type="submit" name="submit" id="submit" value="Hit me" />
    
    </fieldset>
</form>


<?php

$getquery=mysql_query('SELECT id ,name ,comment 
              FROM comments 
              WHERE subject="sOne"
              ORDER BY id DESC');

    while($rows=mysql_fetch_assoc($getquery)){    
        $id=$rows['id'];
        $name=$rows['name'];
        $comment=$rows['comment'];
    
        echo $name . '<br>' . $comment . '<br>' . '<br>';
}

?>

</body>
</html>

I did attempt this:

Code:

<form action="commentOrg.php"
     method="POST">
     <fieldset>
         <legend>Comments:</legend>
         <p>While I am a strong proponent of freedom of speech and  expression, I am granted with the right to delete spam, troll posts, and  rudeness. I will exercise that right when needed.</p>
         <input type="hidden" name="subjectOne" value="sOne">
         <p><label>Name:<br><input type="text" name="name"></label></p>
         <p><label>Comments:<br><textarea name="commentary"></textarea></label></p>
         
         <input type="submit" name="submit" id="submit" value="Hit me" />
     
     </fieldset>
 </form>

so that the form information redirects to commentOrg.php, which is basically the stuff at the top of the page copy/paste with a few modifications.

Although I got it too work, the page only redirected to commentOrg.php.

As for direct.php, I tried a bunch of stuff, like using an if (should use a switch/case statement if I really wanted to this, I guess). The idea would be to catch the hidden form variable, and send the information back to the appropriate page.

Code:

<?php
header('Location: comment.php');
header('Location: commentTwo.php');
?>

but I guess if I really wanted it all to work with my current knowledge, I would have 1500 files that say nothing more than header('Location: xxxxx.php'), which I don't want to do.

Basically, I think I am on the right track with using a switch/case statement.

The more I am learning about PHP -- which so happens to be everything I don't need to know about this particular project -- I am finding that it makes life a heck of a lot easier, and creating a site without it or a similar back end seems patently absurd to me now.

Did you know that you can use:

<script type ="text/javascript" src=xxxxx.php>

Interesting implications there.

Also learning that PHP is a violent language. explode(), implode(), die().

Quote

06-06-2011 , 05:34 AM

#253

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

The switch statement works (modified the page codes to work. Rather than have subjectOne, subjectTwo, I turned them into plain ol' $subject):

Code:

<?php
switch($subject){
    case "subjectOne";
    header('Location: comment.php');
    break;
    case "subjectTwo";
    header('Location: commentTwo.php');
    break;
}
?>

Sort of: it stops the refresh error. It doen't make me to to commentTwo.php. It does make me go to direct.php, which is what I want to stop.

Quote

06-06-2011 , 06:24 AM

#254

MrWooster

veteran

Join Date: Mar 2007 Posts: 2,984

Looking for some HTML5 canvas help

I am looking to create an HTML5 canvas grid. The grid will be 100x100 squares and I need to be able to access each individual square and change its colour.

Any suggestions on what might be the best way to achieve this?

Quote

06-06-2011 , 06:28 AM

#255

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

My solution is pretty ugly, but it works:

Code:

<?php
switch($subject){
    case "sOne";
    header('Location: comment.php');
    break;
    case "sTwo";
    header('Location: commentTwo.php');
    break;
}
?>

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

<script>
window.onload = function start(){
    document.getElementById('clickBack').onclick = function(){
        history.go(-1);
    };
}
</script>
</head>
<body>

<p>Thank you for your comment.</p>

<button id="clickBack">Click here to return to the page you were viewing.</button>

</body>
</html>

Quote

06-06-2011 , 06:34 AM

#256

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by MrWooster

http://diveintohtml5.org/canvas.html

Scroll all the way to the bottom of the page where he starts talking about the Halma game. There is a grid there and I am sure you can do some on-click events to change the colors.

The source code for the game is:

http://diveintohtml5.org/examples/halma.js

I imagine you have to create mouse-over coordinates.

Hope that is a start on the grid at least.

Quote

06-06-2011 , 07:13 AM

#257

MrWooster

veteran

Join Date: Mar 2007 Posts: 2,984

Exactly what I was looking for. Thanks

Quote

06-06-2011 , 01:18 PM

#258

gaming_mouse

Carpal \'Tunnel

Join Date: Oct 2004 Posts: 13,786

Quote:

Originally Posted by daveT

Regardless of where I want to be, where I am coming from, and where I am actually going, I'm not trying to create a db-driven site. I just wanted to put up a comment box. Nothing more, nothing less.

Not sure what you think a db-driven site is, but if you have a comment box and store the comments in a db, you are building a db-driven site.

Quote

06-07-2011 , 12:49 AM

#259

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

I looked into code igniter just now. Not going to download. You are right that I want to learn "from the ground up," or I suppose, "the hard way."

I'm sure it's going to be really cool though. I doubt that I would be able to appreciate what it is or what it does without going in with a bloody nose first.

but one thing made me sad:

You want a framework that does not require you to adhere to restrictive coding rules.

and....

You eschew complexity, favoring simple solutions.

In my world, everything is complex. Just because I suck today doesn't mean I will suck tomorrow, next month, or next year, and if there is an easy solution then I'll learn it along with the hard. I think "complexity" is far more superfluous than one would like to let on*, so until I learn the difference between what is complex for me, complex for the population, and legitimately complex, and I can tell the difference between the three, I'm not convinced that learning to use a power drill is going to benefit me before I master the screwdriver.

*People bitch because HTML5 is "hard." What if I decide to say screw it and find a CMS because that is the easy way? What learning path am I laying out for myself if I am not willing to struggle? If I am going to use a tool, I am going to learn the "why" of the tool and use it sparingly, not the "what" and fall back on it. I'd rather fall back on my own knowledge. If this sounds stupid, I don't care.

Quote

06-07-2011 , 12:51 AM

#260

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by gaming_mouse

Not sure what you think a db-driven site is, but if you have a comment box and store the comments in a db, you are building a db-driven site.

I'm thinking a db-driven site is a site that will fall apart without a db. I can still have the site function just fine without comments, thus the db is only an add-on, not a necessity.

Quote

06-07-2011 , 12:54 AM

#261

anononon

Guest

Posts: n/a

The way you are learning how to develop websites is... obscure. I have never seen anyone take the haphazard approach you do. Not to say that your approach will fail; only that I have never seen it before.

I generally suggest learning how to use a basic tool like WordPress, then learning HTML basics, then the basics of CSS, then the basics of PHP, then the basics of a framework (understanding model-controller-view), and finally, the basics of databases (MySQL / SQLite). Javascript and real-time work with the DOM comes long, long after all of that, because it is ultimately unnecessary when developing web applications.

IMO you haven't learned any of it to any reasonable level of competency, which is leading to a lot of frustrations and misunderstandings of the technologies involved.

A base understanding of the HTTP protocol, network transport layers, and programming logic (language independent) is probably necessary in your case. You are trying to sprint before you can crawl.

Quote

06-07-2011 , 01:11 AM

#262

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

dave's method of learning is the only way to do it right IMO and I would approach it from a similar angle if I were in his position. Learn the language then learn the library/framework but in dave's case he needs to learn more basic things about programming.

It's like learning to fish instead of begging for food. Once you know how to fish then your food issues are taken care of (bear with me here and assume there's an endless fish supply).

Learning WP first is like learning how to cook your fish before learning how to catch it. You would learn PHP/MySQL to figure out how to catch it. Later on, if you want to cook it in a specific way (WP's way), then you might look into WP however with your knowledge of knowing how to fish you are free to cook it any way you want.

Quote

06-07-2011 , 01:33 AM

#263

anononon

Guest

Posts: n/a

I wouldn't learn how to develop WP. Sorry if that was unclear. I would learn how to simply use it.

Quote

06-07-2011 , 01:55 AM

#264

gaming_mouse

Carpal \'Tunnel

Join Date: Oct 2004 Posts: 13,786

dave,

what is your final goal? ie, why are putting so much effort into all this and what do you hope to get out of it? i think depending on the answer to that, your current approach may make some sense, no sense, or a lot of a sense. it seems like you might be attracted to the complex or the fundamental just as a general principle, without regard to any goal, which i guess is fine if you know that's what you are doing.

Quote

06-07-2011 , 02:59 AM

#265

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

I thought my goal was pretty clear: hand-code a website.

From the name of this thread: learn HTML5 and CSS3. I think I learned the HTML5 pretty good. Good enough to get a job in the field? Probably not, even if I believe I can create better mark-up than 90% of the sites I see out there.

I haven't got into the nitty gritty of CSS3 yet (and I believe my general CSS has improved immensely over the past two weeks). I'll get into it at a later date, but right now, that isn't pertinent to what I am doing today.

Yes, I would probably use a CMS if I created another personal site, but only if I have full control of the mark-up and other aspects of the site. I actually enjoy exploring the guts of how all this works. I would learn a CMS only for the fact that other people like to use it, and I would have to use it in order to work for them.

Yes, I'll get into learning actual programming concepts as well. Zurvan posted about the Stanford open course, and there is also the ocw from MIT. I'm sure I will use both resources. Yes, I'll get that damn javascript book as soon as possible.

I should also point out that I mostly post about my difficulties and failures here, so the perspective on how much I am struggling may be skewed. It's not like I struggle with everything I touch.

How did I get into web coding?

I though the iPhone, Android, et. al. was an amazing new beginning for the computer world and I wanted to create some apps at some point in the future. This was last year, around the time Job's brought HTML5 and webkit into the mainstream vocabulary.

There was a problem: I had no computer, so I found the only site i could that would allow me to program, find free tutorials, ~and~ see the results of my effort online. After finding w3schools, I had mostly what I needed, so I just started learning how to do web programming.

I quit doing it for several months, but I still had the bug earlier this year, so I started up again, slopped my way through some Java and Python (lol bad, obv), and now I am back to square one.

Eh. Nothing clear yet, but I find that I enjoy seeing images manipulated on the screen, so web design it is for now. I do, though love the challenge of trying to get all the different languages to work together in unison. I learned so much just from trying to add PHP to some of the pages, including how to reformat the HTML into something more cogent and extensible.

Last edited by daveT; 06-07-2011 at 03:09 AM.

Quote

06-07-2011 , 03:10 AM

#266

gaming_mouse

Carpal \'Tunnel

Join Date: Oct 2004 Posts: 13,786

Quote:

Originally Posted by daveT

i am asking the larger question. you mention programming concepts, jobs, etc -- clearly your goal is bigger than simply hand coding a website. i get that this is your current task, but i am suggesting you take a step back and ask what the larger goal is, and from that perhaps rethink the specific learning tasks that will get you there.

sounds like you aren't interested in that, though, which i get. i mean, this is all coming from a place of your genuine interest, so i do understand the desire to just learn the way you feel like learning -- i am guilty of that for sure. being efficient isn't always fun.

Quote

06-07-2011 , 03:13 AM

#267

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

If you stuck with the button and weren't informed to consider using the input element instead, what would you have done to fix it? Break it down step by step. What would you have asked yourself and then what would you have Googled?

Quote

06-07-2011 , 03:15 AM

#268

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Not entirely sure what "larger goal" means. I mean, build this or build that?

I doubt that anyone would know that larger goal until they began exploring the richness of programming and how it integrates into our life. Do you think the guy who just introduced nodeJS was thinking about how great it would be to learn inginX when he first stepped into college?

Quote

06-07-2011 , 03:15 AM

#269

gaming_mouse

Carpal \'Tunnel

Join Date: Oct 2004 Posts: 13,786

Dave,

I've got an actual question for you too, which you probably know the answer to. What is the current state of support of HTML5? That is, can you write a page in HTML5 and expect it to look the same or degrade nicely in browsers that don't support it? Or is it still considered a bad idea to use it on production sites that have to support stuff like IE7 or FF3?

Quote

06-07-2011 , 03:18 AM

#270

gaming_mouse

Carpal \'Tunnel

Join Date: Oct 2004 Posts: 13,786

Quote:

Originally Posted by daveT

No I mean stuff like:

"I want to become great at building professional web applications and do that for my job"

or

"I want to be a Renaissance man when it comes to computer programming, learning lots of languages and concepts, and I don't care if that knowledge has any use or can make me money because it will only be a hobby I do because I love it"

etc

EDIT: obviously this goal can change as you learn, but you must have at least some idea in mind

Quote

06-07-2011 , 03:32 AM

#271

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by gaming_mouse

Support for HTML5 is fully degraded and able to be used in all browsers dating back to IE5, except for the canvas element, which (I think) will only work on ie8 and ie7. I'm not sure of this because IE just changed the coding in ie8 so that the exCanvas needs a different input code to work.

In order to get all the new elements to work in ie:

connect to the Google shiv and then manually reset the default stylesheet to create block elements. Search "Eric Meyer Reset" to get the idea. Take his advice and modify with abandon.

So, you end up with:

Code:

<!--[if lt IE 9]
<script src="google.com.........>
[end if]-->

<link rel="stylesheet" href="reset.css">

etc....

The exCanvas is something you have to download to your computer and upload to the site.

According to the documentation, you have to add a line of code to make it appear in ie8 and less, but that code is no longer needed as of last week.

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

As for degrading, I am wholly obsessed with making it look perfect.

Quote

06-07-2011 , 03:37 AM

#272

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by Shoe Lace

I have no idea what I would have done. I have no idea what I would have googled outside of something like "connect HTML form to PHP"

I had a nagging suspicion that that was the problem, but I couldn't justify the action for some reason, so I never did it.

Quote:

Originally Posted by gaming_mouse

For now, I just want to be a darn good web programmer. I think I'll stick to the path I am learning because it appears that using HTML5/javaScript will allow me the option to go into mobile app development.

Quote

06-07-2011 , 03:42 AM

#273

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

I realized that I screwed up the code in the previous post:

For the canvas:

Code:

<!--[if lt IE 9]><script src="excanvas.js"></script><![endif]-->

and for the shiv:

Code:

<!--[if lt IE 9]>   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

<link rel="stylesheet" href="altReset.css" />

my altReset looks like:

Code:

/*Modified version of Meyer Reset*/


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

*/

body {
    width: 960px;
    font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}


/*
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*/

I added in the body rules myself. Have to define font-size:100% so that I have the option to use em instead of pixel.

Quote

06-07-2011 , 03:49 AM

#274

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

I am sort of proud of myself for the switch solution, not that I am breaking my arm patting myself on the back or anything....

Quote

06-07-2011 , 03:50 AM

#275

gaming_mouse

Carpal \'Tunnel

Join Date: Oct 2004 Posts: 13,786

Thanks for the HTML5 explanation, that is helpful.

Quote:

Originally Posted by daveT

definitely learn html/css/js well. but if that is your goal, you really need to be thinking about learning an MVC framework as soon as possible. knowing how to do everything by hand is great, but actually doing everything by hand in any real world situation just marks you as ignorant.

Also, when you get deeper into js, this is a great resource:

http://javascript.crockford.com/

He calls js the world's most misunderstood programming language. It is not just a simple scripting language the way most people think of it. Eg it can support OO programming in ways few people know about:

http://www.crockford.com/javascript/private.html