Ακόμα 4 λειτουργίες της HTML5 που ίσως δεν γνωρίζεται

• 10 Νοεμβρίου 2012
• by: Georgios
• in: Web Development

Όπως αναφέραμε και στο άρθρο με τίτλο “7 χαρακτηριστικά της HTML5 που ίσως δεν γνωρίζετε” η HTML5 έχει αρκετά χαρακτηριστικά τα οποία δεν είναι ακόμα γνωστά στο ευρύτερο κοινό. Σε αυτό το άρθρο θα σας παρουσιάσω μερικές ακόμα λειτουργίες οι οποίες είναι διαθέσιμες μέσω της HTML5 API.

Fullscreen API

Με το Fullscreen API οι Web Developers, έχουν τη δυνατότητα να ανοίξουν τον περιηγητή διαδικτύου σε κατάσταση κάλυψης ολόκληρης της οθόνης με τη βοήθεια της JavaScript. Θα πρέπει να σημειωθεί, πως όταν αλλάζει η κατάσταση του Web Browser από κανονικός, σε πλήρη οθόνη, ο χρήστης θα πρέπει να επιβεβαιώσει πως θέλει να συνεχίσει σε αυτή την κατάσταση.

Επίσης θα πρέπει να σημειωθεί πως σε κατάσταση πλήρους οθόνης μπορεί να έρθει κάθε στοιχείο της σελίδας σας.

Για λεπτομέρειες δείτε το παράδειγμα που ακολουθεί:

// Χρησιμοποιήστε αυτή τη μέθοδο για να εντοπίσετε ποια μέθοδος
// είναι συμβατή με τον browser του χρήστη.
function fullScreenView(element)
{
    if(element.requestFullScreen)
    {
        element.requestFullScreen();
    }
    elseif(element.mozRequestFullScreen)
    {
        element.mozRequestFullScreen();
    }
    elseif(element.webkitRequestFullScreen)
    {
        element.webkitRequestFullScreen();
    }
}

// Ανοίξτε όλο το έγγραφο σε κατάσταση πλήρους οθόνης
fullScreenView(document.documentElement);
// Ανοίξτε το στοιχείο που παίζει το video σε πλήρη οθόνη
fullScreenView(document.getElementById('videoPlayer'));

Page Visibility API

Η λειτουργία Page Visibility παρέχει στους developers ένα event, το οποίο επιτρέπει σε ένα script να γνωρίζει πότε το συγκεκριμένο tab έχει την εστίαση και πότε όχι.

Αυτή είναι μια χρήσιμη λειτουργία για τους developers, οι οποίοι μπορούν να γνωρίζουν πότε η σελίδα είναι ενεργή, και έτσι να περιορίσουν τη χρήση “δαπανηρών” λειτουργιών για τον browser, όπως είναι τα animation, κλήσεις AJAX και άλλα.

Η χρήση του event είναι όπως στο παράδειγμα που ακολουθεί:

var hidden, state, visibilityChange;

if(typeof document.hidden !== "undefined")
{
     hidden = "hidden";
     visibilityChange = "visibilitychange";
     state = "visibilityState";
}
else if(typeof document.mozHidden !== "undefined")
{
     hidden = "mozHidden";
     visibilityChange = "mozvisibilitychange";
     state = "mozVisibilityState";
}
else if(typeof document.msHidden !== 'undefined")
{
     hidden = "msHidden";
     visibilityChange = "msvisibilitychange";
     state = "msVisibilityState";
}
else if(typeof document.webkitHidden !== "undefined")
{
     hidden = "webkitHidden";
     visibilityChange = "webkitvisibilitychange";
     state = "webkitVisibilityState";
} 

document.addEventListener(
     visibilityChange,
     function(e)
     {
          // Εκκινήστε ή σταματήστε τις λειτουργίες που είναι απαραίτητες.
     },
     false
)

getUserMedia API

Αυτή είναι μια πραγματικά πολύ ενδιαφέρουσα λειτουργία, αφού σας επιτρέπει να προσπελάσετε της συσκευές πολυμέσων του υπολογιστή σας. Για παράδειγμα, μπορείτε να προσπελάσετε την κάμερα, και με τη βοήθεια των στοιχείων <video> και <canvas> να τραβήξετε μια φωτογραφία σας μέσα στον browser σας.

Η χρήση αυτής της λειτουργίας μπορεί να γίνει όπως στο παράδειγμα που ακολουθεί:

window.addEventListener(
    "DomContentLoaded",
    function()
    {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.geElementById('video');
        var videoObj = {
            "video" : true
        };
        var err = function(error)
        {
            alert("Video capture error : " + error.code);
        }

        if(navigator.getUserMedia)
        {
            navigator.getUserMedia(
                videoObj,
                function(videoStream)
                {
                    video.src = videoStream;
                    video.play;
                },
                err
            );
        }
        else if(navigatorwebkitGetUserMedia)
        {
            navigator.webkitGetUserMedia(
                videoObj,
                function(videoStream)
                {
                    video.src = window.webkitURL.createObjectURL(videoStream);
                    video.play();
                },
                err
            );
        }
    },
    false
);

Battery API

Το Battery API προφανώς στοχεύει σε κινητές συσκευές με μπαταρία. Με τη βοήθεια αυτής της API, μπορούμε να γνωρίζουμε προγραμματιστικά ποια είναι η στάθμη της μπαταρίας.

Ο λόγος ύπαρξης αυτής της API είναι για να προειδοποιήσει το λογισμικό μας πως τα αποθέματα ενέργειας τελειώνουν, και έτσι να μπορέσουμε να μειώσουμε προγραμματιστικά τις δαπανηρές για τη μπαταρία λειτουργίες, και όταν η μπαταρία κοντεύει να εξαντληθεί εντελώς, ίσως να αποθηκεύσουμε την εργασία του χρήστη και να τερματίσουμε με ασφάλεια τη λειτουργία της.

Ο τρόπος χρήσης είναι παρόμοιος με τον παρακάτω:

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

console.log("Η μπαταρία φορτίζει: ", battery.charging); // true ή false
console.log("Στάθμη μπαταρίας: ", battery.level); // 0.74
console.log("Εναπομείναν τας χρόνος λειτουργίας: ", battery.dischargingTime);  //476 [seconds]

battery.addEventListener(
    "chargingchange",
    function(e)
    {
         // true ή false και αλλάζει όποτε ο χρήστης συνδέει και αποσυνδέει το φορτιστή στη συσκευή.
         console.log("Battery charge change: ", battery.charging);
    },
    false
);