Τηλεκπαίδευση

Αν ξέρετε τις απαντήσεις σε όλα τα προβλήματα και έχετε σχεδιάσει τις πρώτες ολοκληρωμένες ιστοσελίδες για ένα θέμα τότε ίσως σας ενδιαφέρει:

1. Ευχρηστία (Usability). H Ευχρηστία ανήκει στο χώρο Διάδρασης Ανθρώπου Μηχανής που είναι και ειδικότητά μου αλλά για την Εκπαίδευση (Human-Computer Interaction in Education). Οι οδηγίες είναι εδώ και αναφερονται περιλητπικά στα εξής:

1. Διαφάνεια της θέσης συστημάτων
2. Αντιστοιχία μεταξύ του συστήματος και του πραγματικού κόσμου
3. Έλεγχος και ελευθερία χρηστών
4. Συνέπεια και πρότυπα
5. Πρόληψη λάθους
6. Αναγνώριση παρά την ανάκληση
7. Ευελιξία και αποδοτικότητα της χρήσης
8. Αισθητικό και μινιμαλιστικό σχέδιο
9. Οι χρήστες βοήθειας αναγνωρίζουν, εντοπίστε, και ανακτήστε από τα λάθη
10. Βοήθεια και τεκμηρίωση

2. Τι να χρησιμοποιήσω, HTML ή CSS; Εγώ προτιμώ το CSS γιατί πλέον δεν έχει νόημα να κατασκευάζω τις σελίδες μια μια και να πρσέχω το σχεδιασμό κάθε φορά. Αυτό γιατί το CSS είναι ένα κείμενο που διατάζει τις ιστοσελίδες να έχουν ένα συγκεκριμένο σχεδιασμό, να έχουν συγκεκριμένα χρώματα και συγκεκριμένο μέγεθος γραμματοσειράς. Ρίξτε μια ματια σε ένα κείμενο CSS
για την ιστοσελίδα μου> δε χρειάζεται κάθε φορά να προσδιορίζω τα χαρακτηριστικά. Απλά δέχομαι ότι ο απλός και ομοιόμορφος σχεδιασμός είναι και ο καλύτερος και λειτουργεί.

/* -- basic html elements -- */

body {padding: 0; margin: 0; font: 75% Helvetica, Arial, sans-serif; color: #474B4E; background: #fff; text-align: center;}

a {color: #DD6599; font-weight: bold; text-decoration: none;}

a:visited {color: #D6A0B6;}

a:hover {text-decoration: underline; color: #FD0570;}

h1 {margin: 0; color: #7B8186; font-size: 1.5em; text-transform: lowercase;}

h1 a {color: #7B8186;}

h2, #comments h4 {font-size: 1em; margin: 2em 0 0 0; color: #7B8186;) bottom left no-repeat; padding-bottom: 2px;}

h3 {font-size: 1em; margin: 2em 0 0 0;) bottom right no-repeat; padding-bottom: 2px;}

h4, h5 {font-size: 0.9em; text-transform: lowercase; letter-spacing: 2px;}

h5 {color: #7B8186;}

h6 {font-size: 0.8em; text-transform: uppercase; letter-spacing: 2px;}

p {margin: 0 0 1em 0;}

img, form {border: 0; margin: 0;}

/* -- layout -- */

#content {width: 700px; margin: 0; text-align: left; background: #ffffff;}

#header {background: #D8DADC) 0 0 repeat-y;}

#header div {background: url(im/klimt.jpg) left no-repeat;}

#main {

line-height: 1.0;

float: left;

padding: 10px 12px;

border-top: solid 1px #fff;

width: 200px;

/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */

voice-family: "\"}\"";

voice-family: inherit;

width: 404px;

}

/* IE5 hack */

#main {}

#footer {clear: both; background: #E9EAEB url(im/bg-footer.gif) bottom right no-repeat; border-bottom: solid 1px #fff;}

/* -- header style -- */

#header h1 {padding: 12px 0 60px 4px; width: 557px; line-height: 1;}

/* -- content area style -- */

#main {line-height: 1.4;}

.post {clear: both; margin-bottom: 4em;}

.post-footer em {color: #B4BABE; font-style: normal; float: left;}

#main img {border: solid 1px #E3E4E4; padding: 2px; background: #fff;}

.deleted-comment {font-style:italic;color:gray;}

/* -- sidebar style -- */

#sidebar h2 {font-size: 1.3em; margin: 1.3em 0 0.5em 0;}

#sidebar dl {margin: 0 0 10px 0;}

#sidebar ul {list-style: none; margin: 0; padding: 0;}

#sidebar li {padding-bottom: 5px; line-height: 0.9;}

#profile-container {color: #7B8186;}

.archive-list {margin-bottom: 2em;}

/* -- footer style -- */

#footer p {margin: 0; padding: 12px 8px; font-size: 0.9em;}

#footer hr {display: none;}

</style>

3. Χρησιμοποίηση Σύστημα Διαχείρησης Περιεχομένου (Content Management system). Μόνο αν σας χρειάζεται και μόνο αν μπορείτε να έχετε δικό σας χώρο, νοικιασμένο, για να φιλοξενείται στο Διαδίκτυο. Για παράδειγμα οι Γέφυρες Παιδείας