Εργασίες
Οι εργασίες δοκιμάζονται στον νεότερο 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.
Δίνονται
- Το αρχείο HTML του Μπάμπη
- Η εικόνα του comic
- Η εικόνα φόντου που χρησιμοποίηθηκε
- Το screenshot που είχε τραβήξει
- Οι σημειώσεις του Μπάμπη
Παράδοση
Μέσω FTP. Ανεβάστε το αρχείο style.css στον προσωπικό σας φάκελο.
FTP server: web-seminar.softlab.ntua.gr
Τα FTP username και FTP password υπάρχουν στο προσωπικό σας dashboard.
Για να ανεβάσετε αρχεία μέσω FTP θα χρειαστείτε ένα FTP client. Αυτό μπορεί να είναι οποιοδήποτε πρόγραμμα FTP client της επιλογής σας, όπως για παράδειγμα το Filezilla που είναι διαθέσιμο τόσο για Windows, όσο και για Linux.
Για να δείτε και να αντιγράψετε τον κώδικα ενός 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 σας.
Προθεσμία
Μέχρι 22/11/2013. Μπορείτε να την παραδόσετε και αργότερα μαζί με την 5η εργασία.
Πρότυπη λύση
5η Εργασία 22/11/2013
Αυτή η εργασία αφορά βελτίωση της 4ης εργασίας. Σε περίπτωση που δεν έχετε ολοκληρώσει την 4η εργασία, σας προτείνουμε να τελειώσετε πρώτα τις απαιτήσεις της 4ης εργασίας πριν προχωρήσετε.
Ζητείται να προσθέσετε τις ακόλουθες δυνατότητες στο σύστημα του file uploader που έχετε κατασκευάσει:
- Δημιουργία λογαριασμού χρήστη
- Login / Logout
- Αποθήκευση χρηστών στην βάση δεδομένων
- Αποθήκευση meta-πληροφοριών αρχείων στη βάση δεδομένων
- Αποθήκευση χρήστη που ανέβασε κάθε αρχείο
- Εμφάνιση ονόματος χρήστη στην λίστα των αρχείων
- Όλοι οι χρήστες μπορούν να κατεβάσουν τα αρχεία όλων
Θα χρειαστείτε μία εγκατάσταση της MySQL και του phpMyAdmin.
Οδηγίες εγκατάστασης phpMyAdmin
Για την διαχείριση της εισόδου των χρηστών, μπορείτε να επιλέξετε να χρησιμοποιήσετε δικά σας μπισκότα, ή να κάνετε χρήση της έτοιμης λειτουργίας συνόδων της PHP.
Είναι καλό να ξοδέψετε κάποιο χρόνο για να σκεφτείτε ένα εύχρηστο σχήμα για την βάση δεδομένων σας. Αν το σχήμα σας δεν είναι καλοσχεδιασμένο, ενδέχεται να χάσετε αρκετό χρόνο στο να ξαναγράψετε τον κώδικά σας αν επιθυμείτε αργότερα να το αλλάξετε.
Στην παράδοση της εργασίας σας, συμπεριλάβετε ένα αρχείο κειμένου .sql που θα περιέχει τα ερωτήματα SQL
που αφορούν την δημιουργία του σχήματος (δηλαδή CREATE TABLE
).
Μπορείτε να τα πάρετε έτοιμα με την λειτουργία "Export" του phpMyAdmin.
Ύλη
Διαλέξεις μέχρι και την 12η
Παράδοση
Όπως και η 4η εργασία.
Προθεσμία
Μέχρι 6/12/2013
Πρότυπη λύση
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 ιδέες που θα αναπτυχθούν μέσα από το σεμινάριο να εξελιχθούν σε πραγματικές υπηρεσίες που θα είναι χρήσιμες για τον κόσμο, θα γίνουν γνωστές, και θα χρησιμοποιηθούν από ευρύ κοινό. Θα έχετε κάθε υποστήριξή μας γι' αυτό το σκοπό.
Προτεινόμενα Θέματα
- Σελίδα τύπου Twitter: Κάθε χρήστης βλέπει μία λίστα με τα status updates που αναρτούν τα άτομα που "ακολουθεί".
- Forum: Χρήστες, topics, και αναρτήσεις σε κάθε topic.
- Ιστολόγιο: Κάθε χρήστης μπορεί να δημιουργήσει το δικό του blog, με αναρτήσεις και σχόλια σε κάθε ανάρτηση.
- Εικονολόγιο: Δυνατότητα σε κάθε χρήστη να ανεβάσει τις φωτογραφίες του και να τις μοιραστεί με τους φίλους του.
- Αγγελίες: Σελίδα αγγελιών όπου κάθε μέλος μπορεί να δει τις αγγελίες των άλλων και να αναρτήσει τις δικές του.
- Ερωτοαπαντήσεις: Σελίδα όπου μπορεί κανείς να αναρτήσει κάποια ερώτηση και να περιμένει απαντήσεις.
- Συλλογή αγαπημένων: Κάθε χρήστης έχει μία συλλογή από αγαπημένες ιστοσελίδες τις οποίες μπορεί να μοιραστεί με τους φίλους του.
Θα προτιμούσαμε να σκεφτείτε εσείς ένα αυθεντικό θέμα και να το υλοποιήσετε, και να χρησιμοποιήσετε τα παραπάνω μόνο σαν πρωταρχικές ιδέες. Αν έχετε κάποια μεγάλη ιδέα, προσπαθήστε να υλοποιήσετε μία πλήρη και λειτουργική εφαρμογή που να κάνει κάποια πράγματα από αυτά που φαντάζεστε ώστε να προλάβετε να την παρουσιάσετε μετά τα Χριστούγεννα. Στη συνέχεια θα έχετε την ευκαιρία να την βελτιώσετε πέρα από τα πλαίσια του σεμιναρίου αν σας αρέσει.
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 το οποίο θα περιλαμβάνει:
- Ένα link ώστε να δούμε την τελική σας εργασία να τρέχει στον server σας.
- Το username του συνεργάτη σας που έχει ανεβάσει τον κώδικα της εργασίας.
Μέχρι τις 23 Ιανουαρίου, θα έχετε την δυνατότητα να βελτιώσετε τις εργασίες σας περαιτέρω. Οι καλύετερες τελικές εργασίες θα παρουσιαστούν μπροστά στους υπόλοιπους συμμετέχοντες στο αμφιθέατρο στις 28 Ιανουαρίου.
Προθεσμία
Παράδοση μέχρι 8/1/2014 όπου και θα αποφασίσουμε για τις καλύτερες. Παρουσίαση στις 28 Ιανουαρίου 2014. Μέχρι τότε μπορείτε να τις βελτιώσετε κι άλλο.
Δημοσίευση εργασιών
Μία από τις λύσεις που στάλθηκαν για κάθε εκφώνηση δημοσιευθεύθηκε ως πρότυπη λύση μετά την προθεσμία κάθε εργασίας.
Επιτρέπεται και ενθαρρύνεται η συνεργασία. Αν το επιθυμείτε, μπορείτε να χρησιμοποιήσετε και τεχνολογίες εκτός ύλης, όμως οι πρότυπες εργασίες που θα επιλεγούν και θα δημοσιευθούν στη σελίδα του μαθήματος πρέπει να βασίζονται μόνο σε στοιχεία που έχουν παρουσιαστεί μέσα στις παραδόσεις, και να κάνουν ορθή χρήση των τεχνολογιών.
Το κριτήριο επιλογής για την δημοσίευση της κάθε εργασίας ήταν η εκπαιδευτική αξία της. Αυτό σημαίνει ότι κώδικας ο οποίος είναι πιο ευανάγνωστος και κατανοητός προτιμήθηκε, ώστε διαβάζοντάς τον να μπορούν και οι υπόλοιποι να μάθουν κάτι. Επίσης μας αρέσουν οι πρωτότυπες και δημιουργικές λύσεις.