Semester Project-Life Lectures

Final Project: Live Lectures

(http://83.212.101.48:8080/final_project/index.html , http://83.212.101.47:8080/final_project/index.html)

 

Στο τελικό μας project ασχοληθήκαμε με τη δημιουργία μιας σελίδας στην οποία μπορεί κάποιος χρήστης να βιντεοσκοπεί διαλέξεις του οι οποίες εμφανίζονται ζωντανά και αποθηκεύονται για μελλοντική παρακολούθηση και λήψη. Οι χρήστες που παρακολουθούν την διάλεξη ή ακόμα την κατεβάζουν μετά το πέρας της μπορούν να αφήσουν σχόλια τα οποία γίνονται update realtime. Έτσι δίνεται η δυνατότητα στον δημιουργό του βίντεο να απαντήσει σε τυχόν απορίες είτε κατά τη διάρκεια της διάλεξης είτε μετά.

Για τη δημιουργία αυτής της υπηρεσίας χρησιμοποιήσαμε το Red5 το οποίο είναι ένα framework που υλοποιεί το rtmp πρωτόκολλο που μέσω αρχείων .swf (Adobe Flash) δίνει την ικανότητα στον Browser να καταγράψει και να προβάλει βίντεο και ήχο. Προτιμήσαμε flash αντί για html5 καθώς το δεύτερο βρίσκεται ακόμα σε πρώιμη μορφή όσων αφορά τις δυνατότητες λήψης και προβολής βίντεο. 

Για τη δημιουργία της διάλεξης χρησιμοποιήσαμε ως βάση τα παραδείγματα τα οποία συμπεριλαμβάνονται στον κώδικα του Red5 ώστε να δημιουργήσουμε ένα .swf αρχείο το οποίο είναι υπεύθυνο τόσο για την λήψη της όσο και την μεταφορά και την αποθήκευση στον server. Η προβολή μιας διάλεξης γίνεται μέσω του jwplayer το οποίο έχει δημιουργηθεί ακριβώς για την προβολή video και είναι πολυ διαδεδομένο με μεγάλη κοινότητα χρηστών.

Για να προβληθούν σωστά οι διαλέξεις οι οποίες έχουν αποθηκευτεί τοπικά στον σκληρό του εκάστοτε υπολογιστή θα πρέπει να είναι εγκατεστημένο η εφαρμογή VLC η οποία έχει τα κατάλληλα codecs για την αναπαραγωγή .flv αρχείων.

Έχουμε δημιουργήσει ένα servlet για κάθε βασική λειτουργία της υπηρεσίας μας. Πιο συγκεκριμένα υπάρχουν τα εξής

register: Βάση αυτού γίνεται η εγγραφή νέων χρηστών.

login: Χρησιμοποείται για την είσοδο των χρηστών στην υπηρεσία.

broadcast: Υπεύθυνο για την έναρξη και την λήξη μιας διάλεξης.

view: Υπεύθυνο για την προβολή μιας διάλεξης.

comments: Προσφέρει την δυνατότητα realtime σχολίων.

welcome: Εμφανίζει τις διαθέσιμες διαλέξεις και δίνει την δυνατότητα στον χρήστη δημιουργήσει μία δική του

Ως βάση δεδομένων χρησιμοποιείται η mysql για την καταγραφή των λογιστικών της υπηρεσίας μας, κάνοντας χρήση 3ων απλών tables. Για την ασφάλεια αυτής της βάσης δεδομένων χρησιμοποιούμε την κλάση PreparedStatement για την αποφυγή sql-injection. Αυτό γίνεται στα σημεία που εκτελούμε queries/statements δηλαδή στα εξής servlet:

register

login

comment

broadcast

 

Πηγές για security : http://stackoverflow.com/questions/687787/how-should-i-sanitize-database-input-in-java

 

Παρατηρήσεις

Διαπιστώσαμε πως σε μερικές πλατφόρμες για να γίνει η λήψη του αρχείου που περιέχει τη διάλεξη χρειάζεται ο χρήστης να πατήσει δεξί κλικ στο σύνδεσμο που παρέχεται και να επιλέξει “Αποθήκευση δεσμού ως…”

Κατα τη διάρκεια ανάπτυξης της υπηρεσίας μας είχαμε τη δυνατότητα να αποθηκεύουμε ελληνικούς χαρακτήρες στη βάση δεδομένων χρησιμοποιώντας την κωδικοποίηση utf-8. Αφού ανεβάσαμε το τελικό project στην υπηρεσία Okeanos παρατηρήσαμε ότι οι ελληνικοί χαρακτήρες δεν αποθηκεύοται σωστά. Υποθέτουμε πως αυτό έχει να κάνει με το πακέτο mysql στο CentOS, ότι δηλαδή δεν υποστηρίζονται  unicode χαρακτήρες.

Τέλος, συνιστάται η χρήση του Google Chrome browser.

 

 

Η ομάδα:

Σκρέκα Λαμπρινή, 816

Τάτση Μαρία, 791

Χρυσοβέργης Μάριος, 677

Final project(new)

Η τελική μας εργασία βασίζεται στην ιδέα της εκμάθησης από απόσταση. Στόχος μας είναι να δημιουργήσουμε μία ιστοσελίδα στην οποία ο κάθε ενδιαφερόμενος θα έχει πρόσβαση να παρακολουθήσει live διαλέξεις μαθημάτων του πανεπιστημίου. Ο κάθε καθηγητής θα βιντεοσκοπεί τις διαλέξεις του οι οποίες θα προβάλλονται live στη σελίδα μας.Ο κάθε ενδιαφερόμενος θα έχει τη δυνατότητα να αφήνει σχόλια κάτω από το εκάστοτε video. Ο καθηγητής θα διαβάζει τα σχόλια και θα μπορει είτε live την ώρα του μαθήματος, είτε σχολιάζοντας(όποτε αυτός επιθυμεί),να απαντήσει στις όποιες απορίες του θέσουν. Ο κάθε χρήστης θα μπορεί να παρακολουθήσει τα videos είτε live είτε να τα εντοπίσει μέσα στην ιστοσελίδα μας που θα αποθηκεύονται μετά το πέρας της διάλεξης, καθώς και να τα αποθηκεύσουν στον υπολογιστή τους.

6th weekly assigment

Το site πο μου αρεσε και βρηκα ενδιαφερον ειναι το παρακατω:

http://equametrics.com/

Ειναι ενα site που προσφερει την δυνατοτητα να κατασκευασεις αλγοριθμους για να κανεις trading τις μετοχες σου. Προσφερει ιδιαιτερα ενδιαφεροντα πραγματα για καποιον που ασχολειται με χρηματιστηριακες συναλλαγες.

Ειδικοτερα, δινει την πληρη υποστηριξη ολων τον browsers αλλα και συνδεση απο φορητες συσκευες, ιδιαιτερη χρησιμη λειτουργεια, αφου καποιος που ασχολειται με το αντικειμενο θελει να εχει συνεχη υποστηριξη. Επισης προσφερει κατα τα λεγομενα τις ιστοσελιδας ασφαλεια, οποτε κανει καποιον να εχει μεγαλυτερη εμπιστοσυνη στο site. Το αλλο ενδιαφερον που παρεχει ειναι cloud computing , αφου οι αλγοριθμοι που θα δημιουργησουμε θα τρεχουν στα δικα τους μηχανηματα, τα οποια οπως  αναφερουν στο site τους ειναι ιδιαιτερα δυνατα και εχουν τροποποιηθει με  τετοιον τροπο ετσι ωστε να παρεχουν την μεγαλυτερη δυνατη διευκολυνση και ταχυτητα. Τελος αναφερεται οτι η ολη πλατφορμα και οι μεθοδοι που χρησημοποιει η εταιρια εχουν πατεντα στις ΗΠΑ αλλα και σε 144 χωρες, οποτε δινει ακομη μια αξιοπιστια στον ενδιαφερομενο.

Οπως βλεπουμε το site προσφερει χωρις χρεωσει καποιες πολυ βασικες λειτουργιες, δηλαδη την κατασκευη  ενος μονο αλγοριθμου και το simulation το πολυ 10 φορες τον μηνα και στην συνεχεια μπορουμε να αγορασουμε καποια αλλα πακετα τα οποια προσφερουν περισσοτερους αλγοριθμους και simulations.

Οσοι ασχολουνται με το λεγομενο computational investing γνωριζουν οτι η κατασκευη αλγοριθμων ειναι πολυ βασικο και η επιτυχια τους ειναι μειζονος σημασιας, αφου καποιος μπορει να κερδισει ή ακομη και να χασει πολλα χρηματα. Συνηθως υπαρχουν ατομα που γνωριζουν καλα οικονομικα αλλα δεν εχουν γνωσεις προγραμματισμου. Αυτην λοιπον την αναγκη ερχεται να καλυψη αυτην η ιστοσελιδα, λεγοντας οτι με λειτουργιες drag and drop αλλα και visual programming languages θα καλυψει αυτο το κενο. Επισης προσφερει και πολλες λειτουργιες για να παρακολουθησει κανεις το portfolio του, οπως real time παρακολουθησει των μετοχων, στοιχεια για το κερδος ή την απωλεια που εχει, γενικοτερα στατιστικα για τις κινησεις που εχει καινει και πολλες αλλες λειτουργιες.

Κλεινοντας, αξιζει να αναφερω οτι η ολη ιδεα δημιουργηθηκε απο 3 ατομα, τα οποια ασχολουνται με το online trading και οπως λενε εχουν παθος με την οικονομικη καινοτομα τεχνολογια. Και η 3 τους εχουν σπουδασει πανω σε αυτον τον τομεα και τα γραφεια τους βρισκονται στο financial district του Μανχαταν, πραγμα που δινει μια επιπλεον αξιοπιστια στην εταιρια τους.

Η ιστοσελισα τους ειναι λιτη και οντως σε beta εκδοση δεν μπορεις να πειραματιστεις στις λειτουργιες που υποσχεται. Εχω ηδη εγγραφει και με ενημερωσαν οτι θα μου δωσουν συντομα την δυνατοτητα να χρησιμοποιησω τις λειτουργιες του site.

Εργασια 5

Αυτην την εργασια μπορειται να την δειτε στην σελιδα μου εδω:

http://83.212.100.122:8080/flick/start

Αυτο που εχω κανει ειναι να υλοποιησω εναν listener που μετραει 3 πληροφοριες για τα session. Επειδη ομως το session δεν κλεινει με το κλεισιμο του browser εχω υλοποιησει μια συναρτηση η οποια τερματιζει to session. 

Γενικοτερα λογο αυξημενου φορτου εργασιας και με αλλα μαθηματα, προσπαθησα να κανω καποια βασικα πραγματα που τα βρηκα κυριως στο RoseIndia, ο κωδικας του listener ειναι απο εκει.

Ο κωδικας μου βρισκεται στο github εδω:

https://github.com/mchrisober/Texnologies-WWW/tree/master/flick2

Αξιολογηση της 3ης εργασιας!

Ολοκληρωθηκε η αξιολογηση της 3ης εργασιας:::

Εργασια 3

Μια μικρη περιγραφη του τι ακριβως υλοποιει η εργασια μου αρχικα που θα την βρειτε στην:

http://83.212.100.122:8080/flick/start

Αρχικα να πω οτι θα την δειτε καλυτερα με την χρηση του Chrome.

Η ιστοσελιδα αποθηκευει και τροποποιει τις φωτογραφιες που ανεβαζει ο χρηστης.

Αρχικα ο χρηστης ανεβαζει την φωτογραφια. Στην συνεχεια μπορει να προσθεσει και ενα description στην φωτογραφια του. Μολις ανεβει η φωτο, μπορει να την επεξεργαστει, “πειραζοντας” το υψος, το πλατος και το rotation της φωτογραφιας. Στην συνεχεια πατοντας το κουμπι αποθηκευει τις αλλαγες και μπορει να επιστεψει στην αρχικη σελιδα οπου φαινονται ολες οι φωτογραφιες του.

Να τονισω οτι γινετε ελεγχος για το τι αρχειο ανεβαζει ο χρηστης, και επισης στα καταλληλα πεδια που απαιτειται συμπληρωση(πχ διαστασεις) ετσι ωστε να αποφευγονται αστοχιες και λαθη. Το css ειναι τελειως ενδεικτικο, αφου ο κ.Βαβαλης ειπε να μην δωσουμε ιδιαιτερη σημασια.

Η υλοποιηση ειναι αρκετα ξεκαθαρη και περιγραφεται παρακατω:

Εχουμε δυο servlets με την ονομασια UploadServlet και GetImageServlet.

Την UploadServlet η οποια αναλαμβανει να ανεβασει και να αποθηκευσει την φωτογραφια στον server μου την πηρα και την επεξεργαστηκα απο εδω: http://www.tutorialspoint.com/servlets/servlets-file-uploading.htm

Στην κλαση αυτη, ανεβαζω το αρχειο στον server μου και τον αποθηκευω στον φακελο που εχω ορισει.Εχω την επιλογη να δωσω ή οχι περιγραφη στην φωτογραφια, Επισης δημιουργω xml αρχειο με τα καταλληλα περιεχομενα της φωτογραφιας(αρχικες διαστασεις και πειργραφη).

Στην αλλη κλαση, GetImageServlet, διαβαζω τα στοιχεια του xml αρχειου που αντιστοιχει στην φωτογραφια που επιλεγω για επεξεργασια. Βλεπουμε πολλαπλους ελεγχους για το εαν ο χρηστης εισαγει ή οχι στοιχεια και αφου πατησει να αποθηκευτουν οι αλλαγες στην ουσια ξαναγραφουμε το αρχειο xml με τις νεες τιμες.

Φυσικα υπαρχει και ενα αρχειο web.xml οπου κανω το mapping των servlets.

Τελος μεσα στον φακελο που εχω ανεβασει την εφαρμογη 2 αρχεια jsp που δημιουργουν το περιεχομενο τις σελιδας αλλα και 2 css αρχεια για την μορφωποιηση τους.

Τον κωδικα του project θα τον βρειτε στο παρακατω link:

https://github.com/mchrisober/Texnologies-WWW/tree/master/flick

Προσπαθοντας…

Εχοντας κλεισει πανω απο 3 μερες ολοημερης ενασχολησης και ακομη να τελειωσει η εργασια….

Ενα πολυ ενδιαφερον βιντεακι για το πως λειτουργει ενα data center της Google!!

http://www.youtube.com/watch?feature=player_embedded&v=avP5d16wEp0

Install Tomcat6 on Okeanos

Για να κανουμε install τον Tomacat6 ακολουθουμε τον εξης οδηγο:

http://www.unixmen.com/howto-install-tomcat-in-centos-fedora-the-easy-way/

Αφου τον κανουμε θα πρεπει να ανοιξουμε την πορτα 8080 για να τρεχει ο Tomcat, ακολουθωντας τον εξης οδηγο:

http://serverfault.com/questions/341804/opening-up-port-8080-in-centos

Τελος ο Tomcat ειναι up and running!!!

 

Tip: Για να αλλαξουμε τον password του Tomcat ακολουθουμε τον εξης οδηγο:

http://www.mkyong.com/tomcat/tomcat-default-administrator-password/

Homework 2

Μετα απο 1 ημερα σχεδον καθυστερηση, λογο προβληματος με την υγεια μου, παραθετω την αναφορα για την 2 εργασια στο μαθημα.

http://83.212.100.122/homework2/index.html

Ισως πολλοι παρατηρησετε, το διαπιστωσα κι εγω σε αλλον υπολογιστη περα απ αυτον που προγραμματιζα το css, οτι τα κενα διαφερουν. Εκανα οτι ηταν δυνατον για να διορθωσω αυτα τα προβληματα.

Το Europass CV το πηρα αυτουσιο απο των κωδικα που δημιουργειται απο την παρακατω σελιδα

https://europass.cedefop.europa.eu/en/home

και τον προσαρμοσα στα δικο μου κωδικα. Τοσο το html οσο και το css ειναι ιδια ακριβως με τον παραπανω κωδικα του link.

Στο δευτερο μερος του formal  επεξεργαστηκα πολλα ενδιαφεροντα CV και εφτιαξα οσο το δυνατον καλυτερο. Εδω να τονισω εβαλα και τον μεγαλυτερο φορτο εργασιας, διοτι το θεωρησα σημαντικο.

Στο τριτο μερος προσπαθησα να δωσω εναν πιο χαρουμενο τονο στο βιογραφικο μου, βαζοντας χρωματα, εικονα και γενικα ¨παιζοντας” με την στοιχηση. Ισως πολυ αντιμετωπισουν προβλημα( το παραθυρο εμφανιζετε τελεια σε 13-17 το πολυ οθονη), αλλιως θα παρατηρησετε οτι η στοιχηση ξεφευγει.

Τελος παραθετω τα λινκ με τον κωδικα στο github και κλεινοντας θα ηθελα να προσθεσω οτι δεν υλοποιησα το responsiveness οσο θα ηθελα. Επειδη ειδα αρκετα εντυπωσιακα βιογραφικα στο διαδυκτιο ομολογω οτι βαζοντας πολυ χρονο και μερακι μπορεις να κανεις απιστευτα πραγματα!!

https://github.com/mchrisober/Texnologies-WWW.git

Επισης ο κωδικας εχει να java script για την υλοποιηση των κουμπιων!