TH-HTML5 [Community Project]

[Miz]

<TH-HTML5>

MISSION STATEMENT​

With the development of HTML5, there are now a ton of new tools and resources that can be utilized by Web designers to explore various untouched possibilities. HTML5, even though considered a “work-in-progress” by W3C, is gaining support within many major web browsers such as Firefox, Chrome, Opera and Safari. However even with these developments, a majority of the users (including myself) have not yet attempted to capitalize with the new version of HTML and do not understand its true capabilities.

TH-HTML5 is a community project opened to anyone (new or old) who has any interest in exploring the aspects of HTML5 and expanding their, as well as others', knowledge towards creating a site employing its new abilities.

Our Goal is Simple
“To create an appealing and useful demo site that incorporates as many features of HTML5 as possible, all the while, utilizing as many members as possible in its creation. We hope in this process that we will be able to learn more about HTML5 and that our Demo Site will provide examples and give explanation to all its future uses.”​

To reach this goal, we will discuss the features of HTML5 amongst ourselves, investigate and research the possibilities of these features in action, and incorporate them in our site's final design. The hopeful end result of this project, besides allowing us to learn HTML5 effectively, is some kind of website design that uses as many HTML5 Features that we can find an accurate purpose for and that validates with W3C. Creating an excellent example of what HTML5 can do in the future.

PARTICIPATION​

To participate in this community project please join the TH-HTML5 Social Group (to be a part of the project's members' list), and post in the thread below with your ideas, questions, comments and findings on HTML5/CSS3 that you feel are related to the goals of this project. As well as what features you wish to learn about, know about or want to see utilized in some way-shape-or-form.
All thoughts and people are welcomed!

Project Members' List

TH-HTML5 @ GitHub

HTML5 - Logo - W3C

​

 

[Lyerae]

Sounds interesting. Might be a good way to practice the new technologies.

 

[azareus]

So where is this going to be located? In a sub-domain to TH? Is the site just going to showcase as many possibilities as possible (no pun intended), or is it going to have some functionality?
If it is, I suggest we make some kind of video or gallery site, since media is heavily focused on in HTML5. Possibly the videos could be tutorials on how to use the techniques.

 

[Jindo]

I'm up for this, something I worked on last year out of curiosity.

 

[GetTriggerUnit-]

[video=youtube;lZVFUQOCQWI]http://www.youtube.com/watch?v=lZVFUQOCQWI[/video]
[video=youtube;zjQzP3mOXdc]http://www.youtube.com/watch?v=zjQzP3mOXdc[/video]

Maybe we could write a library that allows to place effects over video in Javascript/HTML5. Just an idea.

 

[azareus]

Maybe we could write a library that allows to place effects over video in Javascript/HTML5. Just an idea.

We could have a video showing, where the users could chose effects to apply. Now, to do this we would need a video, preferably with lots of colors to really showcase the effects...
Should someone make one?

 

[GetTriggerUnit-]

Which options could we include?

• lighten
• darken
• grayscale
• invert colors

It could also automaticly change the luminosity depending on what time it is. Darken the day, Lighten the evening/night.

 

[Miz]

So where is this going to be located? In a sub-domain to TH?

Well it will be hosted on TH's server and under its domain, but where exactly on the site is it going to be located I haven't decided yet where would be best.

Is the site just going to showcase as many possibilities as possible (no pun intended), or is it going to have some functionality?

What makes it on to the site is up to all of us as a collective, the site is suppose to showcase examples and give some elaboration with the features, (A long with the source code and other parts of the pages being able to be downloaded) but as for what exactly has to go on the demo site is up to us and where our discussions might lead us.

If it is, I suggest we make some kind of video or gallery site, since media is heavily focused on in HTML5. Possibly the videos could be tutorials on how to use the techniques.

Yes, that is a necessity speaking Media is like 3 different categories they like to bring up in their promos for HTML5. Of course also think about ultizing CSS3, which is what I am looking into.

I'm up for this, something I worked on last year out of curiosity.

Yeah I was hoping you would be. You are probably one of the few people who have actually attempted to use the canvas function so far.

Which options could we include?

• lighten
• darken
• grayscale
• invert colors

It could also automaticly change the luminosity depending on what time it is. Darken the day, Lighten the evening/night.

That is pretty amazing stuff that you can do with the videos, so many options just with the <video> tag itself. As for the javascript filter options, does anyone know the full list of things we can add over the video?

 

[GetTriggerUnit-]

We could do pretty much anything. We can manipulate pixel data...

 

[Lyerae]

What about the new JavaScript features? (WebSocket, Databases, etc)? Will that be included as well?

 

[GetTriggerUnit-]

Forget WebSockets. Leaks were found in the protocol and Mozilla decided to not adopt it. Some other browsers too.

 

[Lyerae]

Seriously? JavaScript needs sockets...

Edit: A quick Google search shows that the problem lies in the handshake, specifically using an 'Upgrade-type' handshake, rather than a 'CONNECT-type' handshake. Not sure what that means though.

 

[Miz]

Apparently I did not plan my posting of this very well. I posted this project right before the midst of Exam season. So I hope that many of you are still interested in trying to expand your knowledge of HTML5 and all the fun new tools people have been inventing since.

 

[UndeadDragon]

I'll be up for some things on this after exams are all done.

 

[GetTriggerUnit-]

EDIT: If you'd like to test it: http://sbstp.netne.net/.
Hey.

I was looking over there http://html5demos.com/ and saw the sendMessage function. I think we could actually develop a web chat using that function, php and iframes. Just an idea.

EDIT. Here, I was able to do an AJAX chat. Heres the video: (Might want to put in HD).
[video=youtube;Pxv16EAWxJM]http://www.youtube.com/watch?v=Pxv16EAWxJM[/video]

 

[Miz]

@GetTriggerUnit - Wow you created that amazingly fast. I do like the sendMessage function because it works in all of the HTML5 Browsers. So I think we could definitely try to have some sort of Shoutbox/chat. I assume it uses a database because of your SQL Buddy but does it still utilize PHP?

 

[GetTriggerUnit-]

EDIT: If you'd like to test it: http://sbstp.netne.net/.
Hum, I don't think sendMessage or postMessage as what we want for our behaviour. I've looked at it and it doesn't do what I thought it did. It is just another way of sending cross domain data. The chat doesn't need a such function. Althought I think a such chat is still a good idea. Here's my code.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
    <script type="text/javascript" src="jquery-1.6.min.js"></script>
    <script type="text/javascript">
        var username;
    
        $(document).ready(function () {
            $('#chat-div').hide();
            $('#username').keyup(function (e) {
                if (e.keyCode == '13') {
                    var value = $('#username').val();
                    if (value.length > 0) {
                        username = value;
                        $.ajax({type: 'POST', data: 'message=<b>' + username + ' has joined the chat.</b>', url: 'ajax.php'});
                        $('#login-div').hide();
                        $('#chat-div').show();
                    }
                }
            });
            $('#textbox').keyup(function (e) {
                if (e.keyCode == '13') {
                    var value = $('#textbox').val();
                    if (value.length > 0) {
                        var tosend = '<b>' + username + '</b>: ' + value;
                        $.ajax({type: 'POST', data: 'message=' + tosend, url: 'ajax.php'});
                        $('#textbox').val('');
                    }
                }
            });
            setInterval(function () {
                $('#chat-frame').attr('src', 'iframe.php');
            }, 5000);
        });
    </script>
</head>
<body align="center">
    <div id="login-div">
        Username: <input id="username" type="text" />
    </div>
    <div id="chat-div">
        <iframe id="chat-frame" src="iframe.php"></iframe><br/>
        Send: <input id="textbox" type="text" />
    </div>
</body>
</html>

<!-- ajax.php -->
<?php
    mysql_connect('localhost', 'root', '');
    mysql_select_db('chat');
    
    $message = mysql_real_escape_string($_POST['message']);
    
    mysql_query("INSERT INTO messages (message) VALUES('$message')");
?>

<!-- iframe.php -->
<?php
    mysql_connect('localhost', 'root', '');
    mysql_select_db('chat');
    
    $res = mysql_query("SELECT message FROM messages ORDER BY id DESC LIMIT 10");
    if (mysql_num_rows($res) > 0) {
        while ($row = mysql_fetch_array($res)) {
            echo $row[0] . '<br/>';
        }
    } else {
        echo 'No messages...';
    }
?>

Also, instead of always refreshing an iframe, we could use ajax to load our html.

 

[Lyerae]

That seems kinda slow. :/

Anyways, here's a WebSocket-based chat I made a while ago, but never finished. I just recorded a quick demo of it, but if you want to see it for yourself, feel free to go to the URL (http://thelifelessone16.dyndns.org/chat/) to play with it.

[video=youtube;Hq2VQXZRtLw]http://www.youtube.com/watch?v=Hq2VQXZRtLw[/video]

Code and info in the video info.

 

[GetTriggerUnit-]

The speed can be edited to anything.

WebSockets are awesome but they're not supported by Opera and Firefox.

I have changed the speed to refresh every second.

 

[Miz]

I am looking into CSS3 and what special elements we should do for the actual page layout. I will be exploring options if anyone has any suggestions and ideas that would be awesome.