TH-HTML5 [Community Project]

Discussion in 'General Webmaster Support' started by Miz, Apr 2, 2011.

  1. Miz

    Miz Administrator

    Ratings:
    +430 / 0 / -0
    [​IMG]
    <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!
     
  2. Lyerae

    Lyerae I keep popping up on this site from time to time.

    Ratings:
    +105 / 0 / -0
    Sounds interesting. Might be a good way to practice the new technologies. :D
     
  3. azareus

    azareus And you know it.

    Ratings:
    +63 / 0 / -0
    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.
     
  4. Jindo

    Jindo Self

    Ratings:
    +462 / 0 / -0
    I'm up for this, something I worked on last year out of curiosity.
     
  5. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Ratings:
    +128 / 0 / -0
    [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.
     
  6. azareus

    azareus And you know it.

    Ratings:
    +63 / 0 / -0
    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?
     
  7. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Ratings:
    +128 / 0 / -0
    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.
     
  8. Miz

    Miz Administrator

    Ratings:
    +430 / 0 / -0
    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.

    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.

    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.

    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.

    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?
     
  9. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Ratings:
    +128 / 0 / -0
    We could do pretty much anything. We can manipulate pixel data...
     
  10. Lyerae

    Lyerae I keep popping up on this site from time to time.

    Ratings:
    +105 / 0 / -0
    What about the new JavaScript features? (WebSocket, Databases, etc)? Will that be included as well?
     
  11. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Ratings:
    +128 / 0 / -0
    Forget WebSockets. Leaks were found in the protocol and Mozilla decided to not adopt it. Some other browsers too.
     
  12. Lyerae

    Lyerae I keep popping up on this site from time to time.

    Ratings:
    +105 / 0 / -0
    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.
     
  13. Miz

    Miz Administrator

    Ratings:
    +430 / 0 / -0
    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.
     
    • Like Like x 1
  14. UndeadDragon

    UndeadDragon Super Moderator Staff Member

    Ratings:
    +450 / 0 / -0
    I'll be up for some things on this after exams are all done.
     
  15. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Ratings:
    +128 / 0 / -0
    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]
     
    • Like Like x 1
  16. Miz

    Miz Administrator

    Ratings:
    +430 / 0 / -0
    @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?
     
  17. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Ratings:
    +128 / 0 / -0
    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.
    PHP:
    <!-- 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=' tosendurl'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>
    PHP:
    <!-- 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')");
    ?>
    PHP:
    <!-- 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.
     
  18. Lyerae

    Lyerae I keep popping up on this site from time to time.

    Ratings:
    +105 / 0 / -0
    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.
     
  19. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Ratings:
    +128 / 0 / -0
    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.
     
  20. Miz

    Miz Administrator

    Ratings:
    +430 / 0 / -0
    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.
     

Share This Page