Μηνύματα λάθους στο Web (Quiz)

Skeftomilos · Post by **Skeftomilos** » Sun May 15, 2005 3:06 pm

Όλοι έχουμε εμπειρία τόσο από Windows όσο και από Web εφαρμογές. Γνωρίζουμε επομένως ότι συνήθως δε λειτουργούν ακριβώς με τον ίδιο τρόπο. Για παράδειγμα όταν προσπαθούμε να κάνουμε μία καταχώρηση σε μία database και για κάποιο λόγο αυτή δεν είναι δυνατή, ο τρόπος ειδοποίησης του χρήστη είναι πολύ διαφορετικός. Στην πρώτη περίπτωση θα εμφανιστεί ένα μήνυμα με την περιγραφή του σφάλματος, στη δεύτερη θα δούμε το σφάλμα γραμμένο με κόκκινα γράμματα στη Web σελίδα. Ποια από τις δύο τεχνικές είναι αντικειμενικά η προτιμότερη από τη σκοπιά του χρήστη? Η πρώτη βέβαια! Το μήνυμα είναι άμεση και καθαρή ειδοποίηση ότι κάτι δεν πήγε καλά, ενώ τα γράμματα πρέπει να ψάξει κάποιος να τα βρει. Γιατί λοιπόν δεν ακολουθούν οι Web εφαρμογές αυτό το πετυχημένο πρότυπο των Windows? Διότι πολύ απλά δε μπορούν. Ο Server δέχεται το submit της φόρμας με τα προς καταχώρηση στοιχεία, εντοπίζει το σφάλμα, και στέλνει μία νέα σελίδα στον client με την περιγραφή του σφάλματος. Δεν μπορεί να προκαλέσει την εμφάνιση popup μηνύματος με το σφάλμα ... ή μήπως μπορεί?

Ζητείται JavaScripter που να μπορεί να δώσει σωστή απάντηση στο quiz. Δεν είναι απαραίτητος ο server-side κώδικας (ASP, PHP, JSP κ.λπ.) αλλά μόνο το Response του server, δηλαδή σκέτη HTML με client-side κώδικα. Η λύση δεν πρέπει να απαιτεί ενεργοποιημένη JavaScript στον client. Αν δεν υπάρχει JavaScript τότε το σφάλμα πρέπει εμφανίζεται γραμμένο στη σελίδα κατά τα γνωστά. Αν υπάρχει JavaScript, το σφάλμα δεν πρέπει να φαίνεται στη σελίδα αλλά μόνο στο popup. Ο νικητής κερδίζει ένα μαγευτικό ταξίδι δύο ημερών για ένα άτομο στις μαγευτικές Μπραχάμες, με δωρεάν εισιτήρια (ΟΑΣΑ) και διαμονή σε πολυτελές αντίσκηνο σε προνομιακή τιμή. Εντάξει, το ξέρω ότι το βραβείο είναι μούφα αλλά είπα να βάλω κάτι έτσι για το ονόρε.

Αν δε δωθεί απάντηση, η λύση θα αποκαλυφθεί μεθαύριο, 17/5/2005 ώρα 22:00.

AmmarkoV · Post by **AmmarkoV** » Mon May 16, 2005 4:09 am

Έχω πολύ μικρή εμπειρία javascript..
Μπορεί να λέω και βλακεία αλλά έχω την εντύπωση οτι η εντολή είναι:
alert("Σφάλμα : Ο Κωδικός υπάρχει ήδη!")

Post by **HdkiLLeR** » Mon May 16, 2005 2:09 pm

Ναι απλά πρέπει να τσεκάρεις εάν ο browser έχει js suppοrt. Εάν έχει πετάς το λαθάκι μέσα στο msg box, αλλιώς επιστρέφεις html

AmmarkoV · Post by **AmmarkoV** » Mon May 16, 2005 4:49 pm

Το έχω δεί το τσεκάρισμα σε διάφορα websites..
Δεν το έχω συγκρατήσει όμως..

Λογικά θα πρέπει να είναι στον header και αν δεν υπάρχει javascript support να σε κάνει redirect(?) σε κάτι άλλο που έχεις έτοιμο..
Ωραίο πράγμα πάντως η Javascript..

Skeftomilos · Post by **Skeftomilos** » Mon May 16, 2005 7:19 pm

Ναι αλλά πώς ξέρουμε στον server αν υποστηρίζει JS ο browser? Εν πάσει περιπτώσει θα το κάνω λίγο πιο δύσκολο αλλά και πιο ρεαλιστικό. Ο JavaScripter και ο PHP developer είναι διαφορετικά άτομα με διαφορετικές αρμοδιότητες. Δεν μπορεί να ζητήσει ο μεν από τον δε "κάνε την PHP να παράγει αυτό τον κώδικα JavaScript". Επιπλέον ο Project Manager απαιτεί να υπάρχει πλήρης διαχωρισμός HTML, CSS και JavaScript, δηλαδή το PHP script πρέπει να επιστρέφει καθαρό κώδικα HTML. Ούτε λέξη CSS ή JavaScript. Τα αρχεία .css και .js δεν επιτρέπεται να παράγονται δυναμικά, γιατί αυτό θα εμποδίσει το caching στον client. Tο caching είναι επιθυμητό γιατί επιταχύνει το download, άρα αυξάνει την performance της εφαρμογής. Επομένως η σελίδα που θα στείλει το PHP script θα έχει τα παρακάτω στο head:

Code: Select all

<link type="text/css" href="application.css" rel="stylesheet">
<script type="text/javascript" src="application.js"></script>

Ο JavaScripter έχει πλήρη έλεγχο του application.js, και κανέναν έλεγχο στα άλλα δύο αρχεία. Το ζητούμενο λοιπόν είναι το περιεχόμενο αυτού του αρχείου. Ένα τυπικό response του PHP script στην περίπτωση σφάλματος είναι το παρακάτω:

Code: Select all

<html>
  <head>
    <link type="text/css" href="application.css" rel="stylesheet">
    <script type="text/javascript" src="application.js"></script>
  </head>
  <body>
    <h2>Application</h2>
    <div id="error">Ο κωδικός υπάρχει ήδη!</div>
  </body>
</html>

Ενώ όταν δεν υπάρχει σφάλμα, το div είναι κενό. Όσο για το application.css, περιέχει μόνο το εξής:

Code: Select all

div#error { color:red }

nap · Post by **nap** » Tue May 17, 2005 4:02 pm

Να πω κι εγώ μια γνώμη για το application.js

Code: Select all

function kokoriko(){
// Αν υπάρχει μηνυμα λάθους
	if(document.all.error.innerText != ''){
// Το δειχνουμε
		alert(document.all.error.innerText);
// Μπορουμε να παμε αλλού αν δεν θέλουμε να εμφανιστεί στη σελίδα
//		location.href = "about:blank";
// Κλεινουμε και το παραθύρι
		window.close();
	}
}

// Αυτό για να υπάρχει μια μικρή καθυστέρηση πριν τρέξει η συνάρτηση
// Χωρίς αυτό δεν έτρεχε, σε μένα τουλάχιστον (Win2K Server, IE6)
setTimeout('kokoriko()', 10)

Αν δεν υποστηρίζεται JS, προφανώς δεν θα τρέξει τίποτα και θα φορτωθεί κανονικά η σελίδα που επιστρέφει ο server. (Τουλάχιστον σε μένα πάλι...

)

Skeftomilos · Post by **Skeftomilos** » Tue May 17, 2005 4:26 pm

Negative.

Τρία λάθη τουλάχιστον. Η σελίδα θέλουμε να εμφανιστεί, αλλά χωρίς να γράφει το σφάλμα. Καλή προσπάθεια πάντως!

nap · Post by **nap** » Tue May 17, 2005 5:55 pm

application.js v. 2

Code: Select all

function kokoriko(){
	var errMsg;
	errMsg = document.all.error.innerText;
	if(errMsg != ''){
		document.all.error.innerText = ''; // Ή οτιδήποτε άλλο θέλω να δείξει...
// Αν δεν θέλω να δείξει κάτι, μπορώ να το κρύψω (νομίζω)
//    document.all.error.visible = false;
		alert(errMsg);
	}
}

setTimeout('kokoriko()', 10)

Τα άλλα λάθη ποια είναι ?

Skeftomilos · Post by **Skeftomilos** » Wed May 18, 2005 4:20 am

document.all : IE specific. Θέλουμε standard κώδικα που να τρέχει σε όλους τους σύγχρονους browsers, όχι μόνο σε έναν, ακόμα κι αν είναι ο πιο δημοφιλής.

document.all.error.visible = false : Εύλογο, αλλά το W3C DOM δεν περιλαμβάνει ιδιότητα visible για τα HTML elements.

setTimeout('kokoriko()', 10) : Πώς είσαι σίγουρος ότι το download θα έχει ολοκληρωθεί σε 10 msec? H διάρκεια του download εξαρτάται από την ταχύτητα της σύνδεσης, η οποία μας είναι άγνωστη. Οποιοσδήποτε αριθμός msec είναι αυθαίρετος και η τεχνική αναξιόπιστη.

window.close() : Ποιο παράθυρο προσπαθείς να κλείσεις? Το popup της alert κλείνει από ενέργεια του χρήστη. Η εντολή αυτή προσπαθεί να κλείσει το κύριο παράθυρο του browser, κάτι όμως που δεν επιτρέπουν τα χαρακτηριστικά ασφαλείας της JavaScript.

kokoriko() : δεσμευμένη λέξη για μελλοντική επέκταση της JavaScript (just kidding!).

Το παλεύεις γερά, αλλά ακόμα είσαι μακριά από την ονειρική εκδρομή στις εξωτικές Μπραχάμες.

Διευκρίνηση: το σφάλμα δεν πρέπει να είναι ορατό ούτε κατά τη διάρκεια φόρτωσης της σελίδας.

nap · Post by **nap** » Wed May 18, 2005 10:25 am

I give up! Χάνω τις Μπραχάμες...

(Άσχετο: Υπήρχε ένα παλιό τραγούδι που έλεγε για τις Μπραχάμες...)
Δεν έχω γράψει ποτέ JS για άλλο browser πλήν του IE, και νομίζω ότι δεν έχω τον χρόνο να μάθω τώρα...

Skeftomilos · Post by **Skeftomilos** » Wed May 18, 2005 4:25 pm

Code: Select all

document.write("<style type='text/css'>")
document.write("div#error { display:none }")
document.write("</style>")

window.onload = function() {
  var error = document.getElementById("error").innerHTML
  if (error != "") alert("Σφάλμα:\r\n" + error)
}

Το script ενεργεί σε δύο χρόνους. Γράφει άμεσα στο head της σελίδας το style που κρύβει το div, και παγιδεύει το συμβάν onload της σελίδας ώστε να εμφανιστεί το μήνυμα όταν αυτή θα έχει φορτωθεί ολόκληρη. Είναι δοκιμασμένο σε Firefox, IE και Opera.

Ο κώδικας επιδέχεται μερικών βελτιώσεων. Για παράδειγμα υπάρχει περίπτωση ένας παλιάς τεχνολογίας browser να μη μπορέσει να εμφανίσει το popup λόγω μη διαθεσιμότητας της μεθόδου document.getElementById, έχοντας παρόλα αυτά προλάβει να κρύψει το div. Μια επαγγελματική δουλειά θα απαιτούσε αντιμετώπιση αυτού του προβλήματος.

mikem4600 · Post by **mikem4600** » Wed May 18, 2005 10:39 pm

Καλό αυτό, αλλά δεν παίζει με XHTML (ή XML γενικότερα ως markup) γιατί δεν παίζει το document.write()...

(εκτός κι αν γράφεις απλή HTML).

Skeftomilos · Post by **Skeftomilos** » Thu May 19, 2005 11:38 am

Πολύ σωστή η παρατήρησή σου. Το δοκίμασα με .xhtml response και πράγματι δε δουλεύει. Αρχικά δεν είχα σκοπό να χρησιμοποιήσω την παρηκμασμένη μέθοδο document.write() παραμόνο αν δεν είχα άλλη επιλογή. Και - guess what - δεν είχα άλλη επιλογή! Αρχικά δοκίμασα τον παρακάτω κώδικα:

Code: Select all

var style = document.createElement("style")
style.setAttribute("type", "text/css")
style.innerHTML = "div#error { display:none }"
document.documentElement.appendChild(style)

... ο οποίος δουλεύει άψογα σε Firefox και Opera και είναι και XHTML συμβατός, αλλά χτυπάει στον IE6 με το μήνυμα "Unknown runtime error". Υποθέτω ότι στον IE το object model του εγγράφου δεν είναι διαθέσιμο πριν ολοκληρωθεί το φόρτωμα της σελίδας.

Μία λύση θα ήταν η αναστολή της απόκρυψης του σφάλματος στη σελίδα μέχρι να φορτωθεί ολόκληρη, οπότε θα αρκούσε η προσθήκη της παρακάτω εντολής στο χειριστή συμβάντος window.onload:

Code: Select all

document.getElementById("error").style.display = "none"

Όμως το οπτικό αποτέλεσμα αυτής της καθυστέρησης δε μου αρέσει καθόλου.

Αν είχαμε έστω και ελάχιστη πρόσβαση στον HTML κώδικα που παράγει το PHP (ή ASP ή JSP) script, θα μπορούσαμε να ζητήσουμε την προσθήκη του παρακάτω κώδικα στο head:

Code: Select all

<style type="text/css">
  div#error { display:none }
</style>
<noscript>
  <style type="text/css">
    div#error { display:block }
  </style>
</noscript>

Αυτή είναι αρκετά καλή λύση, αλλά κάνει το πρόβλημα με τους παλιάς τεχνολογίας browsers που αναφέρω παραπάνω, μάλλον άλυτο.

Skeftomilos · Post by **Skeftomilos** » Thu Jun 02, 2005 5:46 am

Πέτυχα ένα σχετικό με το θέμα άρθρο του guru της Usability Jakob Nielsen. Έχει ενδιαφέρον. Error Message Guidelines