Αρχική σελίδα

Εργασίες

Οι εργασίες δοκιμάζονται στον νεότερο Mozilla Firefox, και πρέπει να κάνουν validate ως XHTML 1.0 Strict και CSS 2.1 ή νεότερο.

Η παράδοση όλων των εργασιών είναι προϋπόθεση για την ολοκλήρωση του σεμιναρίου.

1η Εργασία 11/10/2013

Δημιουργείστε μία προσωπική ιστοσελίδα που να περιλαμβάνει το όνομά σας, το επώνυμό σας, και το e-mail σας. Προσθέστε λίγα λόγια για τον εαυτό σας, μία φωτογραφία που σας αρέσει, μία λίστα, και έναν πίνακα της επιλογής σας.

Παράδοση

Μέσω e-mail στο web-seminar@softlab.ntua.gr με συνημμένο αρχείο .zip ή .html

Ύλη

Διαλέξεις 1 και 2

Προθεσμία

Μέχρι 18/10/2013

Πρότυπες λύσεις

2η Εργασία 18/10/2013

Αυτή είναι μία κλασική εργασία που ανατίθεται σε όσους μαθαίνουν HTML και CSS. Ονομάζεται half cleanroom επειδή δίνεται μόνο ο μισός κώδικας, ενώ ο υπόλοιπος μισός πρέπει να γραφτεί από εσάς.

Ο βιρτουόζος σχεδιαστής ιστοσελίδων Μπάμπης Σιεσές σχεδίασε ένα εναλλακτικό design για την σελίδα XKCD, τη διάσημη σειρά comic. Δυστυχώς, όσο έλειπε από τον υπολογιστή του, η γάτα του πάτησε τα πλήκτρα Shift + Del με αποτέλεσμα το αρχείο CSS που είχε γράψει να εξαφανιστεί από προσώπου γης. Για καλή του τύχη, είχε κρατήσει ένα screenshot και έτσι θυμάται την εμφάνιση της σελίδας που είχε φτιάξει. Είχε επίσης σημειώσει τα χρώματα και τις γραμματοσειρές που χρησιμοποίησε. Η δική σας δουλειά είναι να ξαναγράψετε το αρχείο CSS με βάση τα στοιχεία αυτά.

Το αποτέλεσμα μετά την εφαρμογή του CSS θα πρέπει να φαίνεται πανομοιότυπο με την έκδοση που φαίνεται στο screenshot.

Δίνονται

Παράδοση

Μέσω FTP. Ανεβάστε το αρχείο style.css στον προσωπικό σας φάκελο.
FTP server: web-seminar.softlab.ntua.gr
Τα FTP username και FTP password υπάρχουν στο προσωπικό σας dashboard.

Για να ανεβάσετε αρχεία μέσω FTP θα χρειαστείτε ένα FTP client. Αυτό μπορεί να είναι οποιοδήποτε πρόγραμμα FTP client της επιλογής σας, όπως για παράδειγμα το Filezilla που είναι διαθέσιμο τόσο για Windows, όσο και για Linux.

Οδηγίες χρήσης του FileZilla

Για να δείτε και να αντιγράψετε τον κώδικα ενός HTML αρχείου μπορείτε να χρησιμοποιήσετε την λειτουργία Προβολή > Πηγαίος κώδικας σελίδας (View > Page source code) του φυλλομετρητή σας.

Πρόσβαση στο dashboard

Θα πρέπει να έχετε ήδη λάβει ένα e-mail στην διεύθυνση που δηλώσατε με την παράδοση της 1ης εργασίας. Το e-mail αυτό περιέχει έναν σύνδεσμο τον οποίο θα μπορείτε να χρησιμοποιήσετε μία φορά για να ορίσετε τον κωδικό πρόσβασης για το dashboard. Ενδέχεται το e-mail αυτό να έχει μεταφερθεί στον φάκελο "Ανεπιθύμητη Αλληλογραφία" ή "Spam", συνεπώς αν δεν το λάβατε, ρίξτε μία ματιά και εκεί.

Το dashboard στο μέλλον θα περιέχει τις εργασίες που έχετε στείλει μέχρι τώρα και τις διορθώσεις των εργασιών σας. Αυτή τη στιγμή εκεί θα βρείτε το προσωπικό FTP username και το FTP password σας που θα χρησιμοποιήσετε για την παράδοση της 2ης εργασία. Το FTP password που λαμβάνετε δημιουργείται αυτόματα και είναι διαφορετικό από τον κωδικό πρόσβασης για το dashboard που ορίζετε εσείς. Αυτό γίνεται για την προστασία του κωδικού σας, αφού το FTP είναι ένα σύστημα από τη φύση του ανασφαλές.

Ύλη

Διαλέξεις μέχρι και την 4η

Προθεσμία

Μέχρι 25/10/2013

Πρότυπη λύση

Μαρία Γκολιομύτη

3η Εργασία 25/10/2013

Μετά το half cleanroom της δεύτερης εργασίας αυτή τη φορά έχετε να κάνετε ένα πλήρες cleanroom. Ο στόχος αυτής της εργασίας χωρίζεται σε δύο στάδια. Στο πρώτο στάδιο θα πρέπει να περιγράψετε με σωστό σημασιολογικά τρόπο το έγγραφο που βλέπετε στο screenshot. Στο δεύτερο στάδιο θα πρέπει να γράψετε τους κανόνες CSS που θα εφαρμοστούν στο έγγραφο που θα φτιάξετε και θα το κάνουν να φαίνεται όπως και στο screenshot.

Το αποτέλεσμα μετά την εφαρμογή του CSS θα πρέπει να είναι ποιοτικά ίδιο με την έκδοση του screenshot. Αυτό σημαίνει ότι δεν είναι απαραίτητο να κάνετε ακριβείς μετρήσεις για τις αποστάσεις κλπ.

Tip

Προσπαθήστε να φτιάξετε το γενικό layout με άδεια divs και ύστερα προσθέστε σε αυτά το περιεχόμενό σας.

Δίνονται

Ύλη

Διαλέξεις μέχρι και την 6η

Παράδοση

Μέσω FTP. Ανεβάστε το αρχείο index.html και style.css στον φάκελο assignment3 που βρίσκεται μέσα στον προσωπικό σας φάκελο.
FTP server: web-seminar.softlab.ntua.gr
Τα FTP username και FTP password υπάρχουν στο προσωπικό σας dashboard.

Προθεσμία

Μέχρι 15/11/2013

Λόγω της καθυστέρησης ανάρτησης της 6ης video-διάλεξης, δόθηκε παράταση μίας εβδομάδας για την 3η εργασία.

Πρότυπη λύση

Ρήγας Παπαθανασόπουλος

4η Εργασία 8/11/2013

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

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

Επιμένουμε η ασκηση να παραμείνει απλή:

Επειδή ο browser δεν τρέχει PHP, αλλά αυτή τρέχει στον HTTP server, θα πρέπει να έχετε ένα μηχάνημα server όπου θα δοκιμάσετε τον κώδικά σας. Μπορείτε να κάνετε τον υπολογιστή σας server με εγκατάσταση του Apache και της PHP.

Οδηγίες εγκατάστασης Apache και PHP

Είστε ελεύθεροι να σχεδιάσετε σε HTML/CSS την διεπαφή χρήστη που εσείς θέλετε. Μπορείτε να χρησιμοποιήσετε οτιδήποτε από HTML και CSS. Παρ' όλο που ο σκοπός της άσκησης δεν είναι η εξάσκηση σε HTML/CSS, τα αρχεία σας θα πρέπει να κάνουν validate.

Μία λύση για τον χωρισμό των PHP αρχείων είναι να έχετε 2 PHP αρχεία: Το πρώτο που θα τυπώνει την λίστα με τα υπάρχοντα αρχεία και μία φόρμα, και το δεύτερο το οποίο θα είναι το action της φόρμας για το ανέβασμα του αρχείου και το οποίο απλώς θα αποθηκεύει το αρχείο και θα επιστρέφει τον χρήστη στην προηγούμενη σελίδα.

Η αποθήκευση των αρχείων από την μεριά του server, θα ήταν σκόπιμο να γίνεται σε έναν φάκελο όπου θα βρίσκονται όλα τα αρχεία που ανεβαίνουν. Για παράδειγμα, σε ένα σύστημα Windows αυτό θα μπορούσε να είναι το C:/Uploads, ενώ σε ένα σύστημα Linux ή Mac θα μπορούσε να είναι το /home/uploads. Προσέξτε ο HTTP server να έχει δικαιώματα εγγραφής στους συγκεκριμένους φακέλους.

Ύλη

Διαλέξεις μέχρι και την 9η

Παράδοση

Μέσω SSH/SCP. Ανεβάστε τα αρχεία σας στον προσωπικό σας φάκελο. Ο προσωπικός σας φάκελος βρίσκεται στο /home/students/username όπου username είναι το όνομα χρήστη που έχετε χρησιμοποιήσει και στις προηγούμενες εργασίες.
SSH server: web-seminar.softlab.ntua.gr
Τα SSH username και SSH password υπάρχουν στο προσωπικό σας dashboard και είναι τα ίδια με τα FTP username και FTP passwords σας.

Οδηγίες χρήσης SCP

Προθεσμία

Μέχρι 22/11/2013. Μπορείτε να την παραδόσετε και αργότερα μαζί με την 5η εργασία.

Πρότυπη λύση

Βλέπε 6η εργασία

5η Εργασία 22/11/2013

Αυτή η εργασία αφορά βελτίωση της 4ης εργασίας. Σε περίπτωση που δεν έχετε ολοκληρώσει την 4η εργασία, σας προτείνουμε να τελειώσετε πρώτα τις απαιτήσεις της 4ης εργασίας πριν προχωρήσετε.

Ζητείται να προσθέσετε τις ακόλουθες δυνατότητες στο σύστημα του file uploader που έχετε κατασκευάσει:

Θα χρειαστείτε μία εγκατάσταση της MySQL και του phpMyAdmin.

Οδηγίες εγκατάστασης MySQL

Οδηγίες εγκατάστασης phpMyAdmin

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

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

Στην παράδοση της εργασίας σας, συμπεριλάβετε ένα αρχείο κειμένου .sql που θα περιέχει τα ερωτήματα SQL που αφορούν την δημιουργία του σχήματος (δηλαδή CREATE TABLE). Μπορείτε να τα πάρετε έτοιμα με την λειτουργία "Export" του phpMyAdmin.

Ύλη

Διαλέξεις μέχρι και την 12η

Παράδοση

Όπως και η 4η εργασία.

Προθεσμία

Μέχρι 6/12/2013

Πρότυπη λύση

Βλέπε 6η εργασία

6η Εργασία 7/12/2013

Αυτή η εργασία αφορά βελτίωση της 5ης εργασίας. Σε περίπτωση που δεν έχετε ολοκληρώσει την 5η εργασία, σας προτείνουμε να τελειώσετε πρώτα τις απαιτήσεις της 5ης εργασίας πριν προχωρήσετε.

Ζητείται να προσθέσετε την δυνατότητα "άμεσης προβολής" στο σύστημα του file uploader που έχετε κατασκευάσει. Αυτό σημαίνει ότι στην λίστα με τα αρχεία που μπορεί να κατεβάσει κανείς, θα πρέπει να μπορεί να κάνει κλικ σε κάποιο αρχείο για να προβάλλει τα περιεχόμενά του. Αυτή η προεπισκόπηση θα πρέπει να δουλεύει σε εικόνες και αρχεία κειμένου. Στη συνέχεια, αν επιθυμεί, θα πρέπει να δίνεται η δυνατότητα κανονικής λήψης του αρχείου. Η δυνατότητα αυτή θα πρέπει να δίνεται και στα αρχεία άλλων ειδών για τα οποία η προεπισκόπηση δεν είναι δυνατή.

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

Απαιτείται το περιεχόμενο από τα αρχεία κειμένου των οποίων γίνεται η προεπισκόπηση να μην περιλαμβάνονται στην ίδια τη σελίδα, αλλά να κατεβαίνει με την χρήση AJAX. Αυτό σημαίνει ότι θα χρειαστείτε κάποια ένδειξη φόρτωσης (π.χ. "Γίνεται λήψη του αρχείου...") έως ότου εμφανίσετε το περιεχόμενο μέσα στην ίδια την σελίδα. Φροντίστε να μην γίνεται ξανά φόρτωση της σελίδας, αλλά το περιεχόμενο να εμφανίζεται χωρίς refresh.

Ύλη

Διαλέξεις μέχρι και την 16η

Παράδοση

Με SCP.

Προθεσμία

Μέχρι 21/12/2013

Η προθεσμία της 6ης εργασίας παρατείνεται μέχρι το τέλος το 2013, καθώς το video της 16ης διάλεξης δεν είναι ακόμη διαθέσιμο.

Καθώς η 5η και η 6η εργασία αποτελούν βελτίωση της 4ης εργασίας, οι ημερομηνίες παράδοσης της 4ης και της 5ης εργασίας είναι ενδεικτικές και όχι δεσμευτικές.

Πρότυπη λύση

Σωκράτης Βίδρος

Τελική εργασία 20/12/2013

Ομαδική δουλειά

Η τελική εργασία θα απαιτεί την συνεργασία σε ομάδες των 3 ατόμων (ή περισσότερων αν το επιθυμείτε). Τα άτομα θα είναι της επιλογής σας. Θα πρέπει να αποφασίσετε την ομάδα με την οποία θα δουλέψετε μέσα στις επόμενες ημέρες. Μπορείτε αν θέλετε να συνεργαστείτε μέσω SVN ή git.

Θέμα

Το θέμα της τελικής εργασίας θα είναι της επιλογής σας, ενώ ακολουθούν αρκετά προτεινόμενα θέματα. Η τελική εργασία αφορά την ανάπτυξη μίας μικρής αλλά πλήρους web εφαρμογής. Αν έχετε μία καλή ιδέα και την αναπτύξετε, θα θέλαμε να την εξελίξετε σε μία πραγματική ολοκληρωμένη και χρήσιμη υπηρεσία μετά το τέλος του σεμιναρίου. Ελπίζουμε 1 - 2 ιδέες που θα αναπτυχθούν μέσα από το σεμινάριο να εξελιχθούν σε πραγματικές υπηρεσίες που θα είναι χρήσιμες για τον κόσμο, θα γίνουν γνωστές, και θα χρησιμοποιηθούν από ευρύ κοινό. Θα έχετε κάθε υποστήριξή μας γι' αυτό το σκοπό.

Προτεινόμενα Θέματα

Θα προτιμούσαμε να σκεφτείτε εσείς ένα αυθεντικό θέμα και να το υλοποιήσετε, και να χρησιμοποιήσετε τα παραπάνω μόνο σαν πρωταρχικές ιδέες. Αν έχετε κάποια μεγάλη ιδέα, προσπαθήστε να υλοποιήσετε μία πλήρη και λειτουργική εφαρμογή που να κάνει κάποια πράγματα από αυτά που φαντάζεστε ώστε να προλάβετε να την παρουσιάσετε μετά τα Χριστούγεννα. Στη συνέχεια θα έχετε την ευκαιρία να την βελτιώσετε πέρα από τα πλαίσια του σεμιναρίου αν σας αρέσει.

Hosting

Αν θέλετε να αναπτύξετε μία πραγματική υπηρεσία θα χρειαστείτε ένα domain name και μία υπηρεσία hosting. Αυτά προσφέρονται από διάφορες εταιρίες, για παράδειγμα από το papaki σε τιμές κάτω από 5€ / μήνα. Έτσι θα μπορείτε να έχετε το δικό σας domain name (π.χ. example.com) και να έχουν πρόσβαση στην εφαρμογή σας όλοι. Θα χαρούμε να δούμε την εφαρμογή σας ολοκληρωμένη και διαθέσιμη online, και φυσικά να την χρησιμοποιήσουμε.

Παρουσίαση

Οι καλύτερες τελικές εργασίες που θα επιλεγούν θα παρουσιαστούν από τους δημιουργούς τους σε μία διάλεξη αφιερωμένη σε αυτό το σκοπό που θα διοργανωθεί μετά το τέλος του σεμιναρίου. Θα αφιερώσουμε 10 - 15 λεπτά σε κάθε παρουσίαση.

Ύλη

Τα πάντα! Νιώστε ελεύθεροι/ες να εμβαθύνετε στις τεχνολογίες που έχουμε δείξει, ακολουθώντας τις αρχές που σας δείξαμε, αλλά χωρίς να περιορίζεστε στα πλαίσια του σεμιναρίου. Ανάλογα με τον τύπο της εφαρμογής σας, ενδέχεται να χρειαστεί να εμβαθύνετε σε κάποια διαφορετική τεχνολογία.

Παράδοση

Αρχικά δημιουργήστε όλοι ένα δημόσιο/ιδιωτικό RSA κλειδί για τον λογαριασμό σας. Αυτό θα σας επιτρέψει την χρήση του SCP χωρίς κωδικό πρόσβασης.

Οδηγίες δημιουργίας RSA κλειδιού

Επιλέξτε έναν από τους συνεργάτες σας στην ομάδα για να παραδόσει την εργασία. Η παράδοση της εργασίας θα γίνει σε 2 φάσεις. Αρχικά, θα πρέπει να παραδόσετε μία πρώτη αλλά λειτουργική έκδοση της εργασίας σας. Αυτό θα πρέπει να γίνει μέχρι τις 8 Ιανουαρίου, ώστε να έχουμε χρόνο να τις αξιολογήσουμε και να επιλέξουμε αυτές που θα παρουσιαστούν.

Μέχρι τις 8 Ιανουαρίου, ο συνεργάτης σας που αποφασίσατε ότι θα στείλει την εργασία θα πρέπει να την ανεβάσει μέσω SCP και χρησιμοποιώντας RSA στον φάκελο "final" που θα δημιουργήσει. Εκεί θα πρέπει να υπάρχει ο πλήρης κώδικας της εφαρμογής.

Επιπλέον, θα πρέπει να μας στείλετε ένα e-mail ανά ομάδα στο web-seminar@softlab.ntua.gr το οποίο θα περιλαμβάνει:

Μέχρι τις 23 Ιανουαρίου, θα έχετε την δυνατότητα να βελτιώσετε τις εργασίες σας περαιτέρω. Οι καλύετερες τελικές εργασίες θα παρουσιαστούν μπροστά στους υπόλοιπους συμμετέχοντες στο αμφιθέατρο στις 28 Ιανουαρίου.

Προθεσμία

Παράδοση μέχρι 8/1/2014 όπου και θα αποφασίσουμε για τις καλύτερες. Παρουσίαση στις 28 Ιανουαρίου 2014. Μέχρι τότε μπορείτε να τις βελτιώσετε κι άλλο.

Δημοσίευση εργασιών

Μία από τις λύσεις που στάλθηκαν για κάθε εκφώνηση δημοσιευθεύθηκε ως πρότυπη λύση μετά την προθεσμία κάθε εργασίας.

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

Το κριτήριο επιλογής για την δημοσίευση της κάθε εργασίας ήταν η εκπαιδευτική αξία της. Αυτό σημαίνει ότι κώδικας ο οποίος είναι πιο ευανάγνωστος και κατανοητός προτιμήθηκε, ώστε διαβάζοντάς τον να μπορούν και οι υπόλοιποι να μάθουν κάτι. Επίσης μας αρέσουν οι πρωτότυπες και δημιουργικές λύσεις.