HTML5 Project

S

S3th13

Gawd
Joined
Aug 2, 2007
Messages
992
If anyone has any experience with web development, I'd like a little help with starting this project from my internship. They know I have no experience with HTML5, but would like me to try and figure this out using the web or any means necessary. I'm not exactly sure where to begin but here is the assignment:

https://docs.google.com/viewer?a=v&...gHA869HBjBMWSv3QmYyb4a&hl=en&authkey=CKSt7-kN

I'm obviously allowed to use PHP, Javascript, MySQL, and any other web technology along side of HTML5 to complete the assignment. All of my programming experience is in Java and C/C++, so I'm not sure where to begin with this higher level design. Any help would be appreciated. Thanks!

I'll be working on it continuously, so I'll update this page as I go.
 
Google Docs is blocked by the proxy here at work... but have you done some basic reading on web development?

http://w3schools.com/ will become one of your closest friends.
 
Yeah, I'm actually about half way through the Javascript tutorials. They seem pretty helpful so far.
 
It seems you are going to need MySQL and PHP to achieve this, but without someone along side you teaching you it takes a while to figure out. You have programing experience which will reduce the learning curve but the syntax alone will take a while if you don't know where to look.
 
Is there an actual reason this has to be using ajax? Looking at the project, I don't see why this HAS to be done that way. All ajax is going to do at this point is add more work to you learning how to do this.
 
In a way, yes. you could drag items around and then click a save button.

Is that essential though? Being able to drag and drop? I'm not trying to disourage you from doing it. But it would make things easier on yourself if you didn't have to use ajax for everything.
 
yeah it says "the user should be able to drag and drop" on the first page of the assignment
 
Wait. Assignment. Is this for work or school then?
 
This is for work... well an internship rather. And he never asked for me to use Ajax. I've found some tutorials on using JavaScript for the drag n' drop. All I have done so far is basic page layout with placeholder images. My experience relies on 3.5 years of Java/C experience for my nearly completed BS in Computer Science if that gives anyone a better understanding of what I can do.


What I've come to find out thus far is that JavaScript is basically Java with very little differences in syntax and not as in depth of hierarchy. Obviously without the 100,000+ page API of defined classes.
 
Don't have any suggestion on the project itself. But, I suggest that if you're going to use some HTML5 constructs that you use HTML5 markup too and validate it (many over look this). Also, see http://dev.w3.org/html5/html4-differences/

When a user views source of the pages, it should look like this for starters:

Code: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    
    </body>
</html>
 
S3th13 said:
If anyone has any experience with web development, I'd like a little help with starting this project from my internship. They know I have no experience with HTML5, but would like me to try and figure this out using the web or any means necessary.
Click to expand...
Pay someone at elance.com to complete the project for you, take all the credit. Done.
 
Well, it's a curly-braces language with a fairly normal punctuation style. The OO design is different, though - the prototype system is a different beast from the class system in java. :)
 
For some reason, the drag and drop isn't working in any browser (Chrome, IE8, or FF3.6) Does anything look messed up in my code?



Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="ui.draggable"></script> 
<script type="text/javascript" src="ui.core"></script> 
<script type="text/javascript" src="ui.droppable"></script> 

<script language="javascript" type="text/javascript"> 
	$(document).ready(function() {
		$("#dragMe").draggable({helper: 'clone' });
		$(".selectedEmployees").droppable(
		
		{
			accept:".selectedEmployees",
			drop: function(ev, ui) {
				
				var droppedItem = $(ui.draggable).clone();
				$(this).append(droppedItem);
				
			}
		}
	
		);
	});
	
</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Employee Comparison</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	body {
		background-color: #CCDFFF;
		margin-top: 0px;
		margin-bottom: 0px;
		padding:0;
	}

</style>
</head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <div align="center" id="entirePage">
        <div align="center" class="heading">
          <h2>Employee Comparison</h2>
        </div>
        <p>
        <p>
        <p>
        <div align="center">
		<div align="left"  class="selectedEmployees" id="employeeOne">
        	<img src="dropEmployee1.png" width="201" height="251" alt="Employee 1 Comparison" /></div>
		<div align="right" class="selectedEmployees" id="employeeTwo">
        	<img src="dropEmployee2.png" width="201" height="251" alt="Employee 1 Comparison" />
        </div>
        </div>
        
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div align="center" class="availEmployees">
          <table width="800" border="0" cellpadding="20" align="center">
            <tr>
              <td><img name="" src="pic0.png" width="120" height="160" alt="Employee 1" style="background-color: 					#999999" id="dragMe"/></td>
              <td><img name="" src="pic6.png" width="120" height="160" alt="Employee 1" style="background-color: #999999" id="dragMe" /></td>
              <td><img name="" src="pic2.png" width="120" height="160" alt="Employee 1" style="background-color: #999999" id="dragMe"/></td>
              <td><img name="" src="pic7.png" width="120" height="160" alt="Employee 1" style="background-color: #999999" id="dragMe"/></td>
            </tr>
          </table>
          <p>&nbsp;</p>
        </div>
        </div>
    </body>
</html>
 
EDIT: Just saw the current progress and realized you are already using jQuery UI. Nevermind...
 
Is there something wrong with JQuery UI? Heres a little more information:

The project must be completed using all of these languages separately (obviously excluding the ones that must be used in unison).

1. Javascript
2. HTML5
4. XHTML
5. Jquery
6. Silverlight
7. Flash/Flex
8. Java FX
9. EXT-JS
10. QT
11. GTK
12. Dojo
13. Android
14. Iphone
15. Swing
 
S3th13 said:
This is my progress thus far: (pathetic lol)

http://www2.gvsu.edu/~johnsokm/
Click to expand...

Just some suggestions:

<script> and <style> don't need a type attribute.

It's <img>, <meta>, and <link>, not <img/>, <meta/> and <link/>.

It's <html>, not <html xmlns="http://www.w3.org/1999/xhtml">. xmlns doesn't do anything.

It's <meta charset="utf-8">, not <meta http-equiv="Content-Type" content="text/html; charset=utf-8">. The latter contains stuff that's not necessary.

It's <!DOCTYPE html>, not <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. The latter puts browsers in almost standards mode and stops IE9 from using HTML5 and new Javascript features. It can mess up rendering if you don't have this right.

In your stylesheet, inside a block, properties must be separated by ';'. A ';' after the last property is not necessary.

Although you can just use <p>, it's best to always close it with </p>.

Here are some CSS properties:

margin-left: (auto is an option)
margin-right: (auto is an option)
margin-bottom:
margin-top:
text-align: left | center | right
width:
height:
border-spacing (for tables)
border (for tables and table cells too)
padding: (for table cells too)
background-color:

You can use those in your stylesheet and get rid of all the attributes you have on the elements (including style=) so you can separate style from content.

HTML5 has <section> elements that you can use (with heading elements too), which can make things more semantic than just using divs or divs with classes.

Using <table> to lay out those images isn't really the proper use for a table. A list (<ul>) or containers with descriptive classes would be better depending on what you want to do. You then style them how you want to look. You can search the net for 'css image gallery" or "tableless css image gallery" etc. to find examples.
 
I'm confused. Why would you use flash and silverlivht in the same project?

Also, Shadow gave some good tips. However html5 does accept XHTML syntax without problem. Its been designed to not actually have a preference. Hell, you don't even have to encase HTML attributes in quotes in html5.
 
S3th13 said:
Is there something wrong with JQuery UI? Heres a little more information:

The project must be completed using all of these languages separately (obviously excluding the ones that must be used in unison).

1. Javascript
2. HTML5
4. XHTML
5. Jquery
6. Silverlight
7. Flash/Flex
8. Java FX
9. EXT-JS
10. QT
11. GTK
12. Dojo
13. Android
14. Iphone
15. Swing
Click to expand...

That is some serious overkill. And why all the redundancy? If you can avoid it, don't go all multi-library on a single website.

Also, follow Shadow2531's Advice on the <!DOCTYPE html>, There is no reason if you going HTML5 to go retro with that old transitional crap declaration.

Don't forget, you titled this thread HTML5 project, so spend a little time and figure out what that really means. So far you really haven't put in a single HTML5 tag or concept into your markup. instead of <div id="header"> use <header>.

if you are using an external stylesheet there is no reason to put css declarations in the html at all; copy/paste that body style to the sheet where it belongs. Also kill all that inline styling bullshit like align="center" and style='something'

For maximum compatibility and to save yourself some time in the future. Google and understand the following:
CSS3 advanced selectors.
CSS Reset (Use Eric Meyer's), sometimes called a Global White Space Reset
HTML5shiv (it makes make the new tags work in older IE version)

----
Edit: I see you are using jQuery, that is good, but you don't need to put a bunch of unstyled class hooks to use it. jQuery is designed to be used exactly like those CSS3 Advanced Selectors I mentioned above. In your example you can use $("table img") to get them. Oh and and for good measure, let me repeat, kill the goddamn table!
 
Last edited:
Tons of great information from everyone. I'll be reading over it all throughout the weekend. These are all separate projects that may use a few overlapping technologies. The reason for the html doctype is because I was originally starting with HTML5 when I made this thread, but switched the HTML4/CSS/Jquery half way through due to lack of knowledge of what I was doing. I guess doing it in both HTML4 and XHTML is a waste of time and I can finish an almost similar project in HTML5.
 
DocFaustus said:
That is some serious overkill. And why all the redundancy? If you can avoid it, don't go all multi-library on a single website.

Also, follow Shadow2531's Advice on the <!DOCTYPE html>, There is no reason if you going HTML5 to go retro with that old transitional crap declaration.

Don't forget, you titled this thread HTML5 project, so spend a little time and figure out what that really means. So far you really haven't put in a single HTML5 tag or concept into your markup. instead of <div id="header"> use <header>.

if you are using an external stylesheet there is no reason to put css declarations in the html at all; copy/paste that body style to the sheet where it belongs. Also kill all that inline styling bullshit like align="center" and style='something'

For maximum compatibility and to save yourself some time in the future. Google and understand the following:
CSS3 advanced selectors.
CSS Reset (Use Eric Meyer's), sometimes called a Global White Space Reset
HTML5shiv (it makes make the new tags work in older IE version)

----
Edit: I see you are using jQuery, that is good, but you don't need to put a bunch of unstyled class hooks to use it. jQuery is designed to be used exactly like those CSS3 Advanced Selectors I mentioned above. In your example you can use $("table img") to get them. Oh and and for good measure, let me repeat, kill the goddamn table!
Click to expand...

HTML5 Boilerplate takes care of all of that for you... :)
 
S3th13 said:
Tons of great information from everyone. I'll be reading over it all throughout the weekend. These are all separate projects that may use a few overlapping technologies. The reason for the html doctype is because I was originally starting with HTML5 when I made this thread, but switched the HTML4/CSS/Jquery half way through due to lack of knowledge of what I was doing. I guess doing it in both HTML4 and XHTML is a waste of time and I can finish an almost similar project in HTML5.
Click to expand...

The problem is, not all browsers support HTML 5, and forcing users to update isn't always an option.

Look into PhoneGap to simply your life for the phone applications although it sounds like it might be cheating your assignment.. Honestly I think the assignment is BS. Your going to have to create create the app a few times very painfully. Swing... Swing??? Really WHY! Most developers with 10+ years would not be master of ALL these technologies. I would hate to be in your shoes! Great learning experience but I think you looking at over 10k pages of technical reading to use all these these appropriately.
 
Last edited:
S3th13 said:
Tons of great information from everyone. I'll be reading over it all throughout the weekend. These are all separate projects that may use a few overlapping technologies. The reason for the html doctype is because I was originally starting with HTML5 when I made this thread, but switched the HTML4/CSS/Jquery half way through due to lack of knowledge of what I was doing. I guess doing it in both HTML4 and XHTML is a waste of time and I can finish an almost similar project in HTML5.
Click to expand...

Both GTK and Qt is an interesting case of overkill as well - they're basically for the same niches. x)
(Oh well - it'll be a learning experience.)
 
NickTheNut said:
However html5 does accept XHTML syntax without problem. Its been designed to not actually have a preference. Hell, you don't even have to encase HTML attributes in quotes in html5.
Click to expand...

However, here are some guidelines to follow:

Even if HTML5 says you're allowed to:

1. You don't use / before > to signify void elements (like doing <br/> or <meta/> or <img/>) unless you need compatibility with XML.

2. You don't leave attributes unquoted unless you understand how attribute values are parsed.

3. You don't leave non-void elements like <p> open (always close them with </p>) unless you understand how an implicit </p> can come about and understand exactly what content that follows <p> ends up in the paragraph.

4. You don't use xmlns unless you need compatibility with XML.

etc.

Also, using / before > to signify void elements doesn't make authoring any easier as you already know what elements are void elements or you wouldn't know what elements to use /> on.

So, if someone is new to HTML etc. and doesn't really understand parsing specifics, it's good to avoid certain things, even if they're allowed. For those that know better, that's a different story.
 
Last edited:
Justintoxicated said:
The problem is, not all browsers support HTML 5,
Click to expand...

For example, Opera's not using an HTML5 parser yet. But, given good HTML5 markup, Opera (and most other browsers) shouldn't have any problems parsing it.

Since this thread is title "HTML5 project", I assume(d) older browsers like IE8 and such are of no concern.
 
If you want to check out and see my current (not much) progress thus far. I have a couple questions:

1. My employer wants me to use ASP.NET to control the dynamic content on the page. Does anyone have any recommendations on a guide that will help me get started with using ASP.NET and my own private SQL server to pull information from? I've had no experience with ASP, but I have had a database class in mySQL/Oracle. The class didn't really help us connect our programming to an actual database but rather teach us basic SQL code with a informal database project to master the creation of keys/dependencies/etc. (Also went through tutorials on Access for homework throughout the semester)

2. Also, I'm not exactly sure how I would go about hooking up the Javascript in my page to the dynamic contect pulled by the ASP.NET. This web programming is rather new to me, so any help in this area would be much appreciated.

Thanks in advance!
 
S3th13 said:
If you want to check out and see my current (not much) progress thus far. I have a couple questions:

1. My employer wants me to use ASP.NET to control the dynamic content on the page. Does anyone have any recommendations on a guide that will help me get started with using ASP.NET and my own private SQL server to pull information from? I've had no experience with ASP, but I have had a database class in mySQL/Oracle. The class didn't really help us connect our programming to an actual database but rather teach us basic SQL code with a informal database project to master the creation of keys/dependencies/etc. (Also went through tutorials on Access for homework throughout the semester)

2. Also, I'm not exactly sure how I would go about hooking up the Javascript in my page to the dynamic contect pulled by the ASP.NET. This web programming is rather new to me, so any help in this area would be much appreciated.

Thanks in advance!
Click to expand...

Here's the start of Nuttuts's ASP From Scratch series:
http://net.tutsplus.com/tutorials/asp-net/asp-net-from-scratch-lesson-1/
 
You must log in or register to reply here.
Back
Top