Π Τ Υ Χ Ι Α Κ Η / Δ Ι Π Λ Ω Μ ΑΤ Ι Κ Η Ε Ρ ΓΑ Σ Ί Α

Transcript

1 ΑΡΙΣΤΟΤΈΛΕΙΟ ΠΑΝΕΠΙΣΤΉΜΙΟ Θ Ε ΣΣ Α ΛΟ Ν Ί Κ ΗΣ ΣΧΟΛΉ ΘΕΤΙΚΏΝ ΕΠΙΣΤΗΜΏΝ ΤΜΉΜΑ ΠΛΗΡΟΦΟΡΙΚΉΣ Π Τ Υ Χ Ι Α Κ Η / Δ Ι Π Λ Ω Μ ΑΤ Ι Κ Η Ε Ρ ΓΑ Σ Ί Α «ΤΕΧΝΟΛΟΓΙΕΣ ΚΑΤΑΣΚΕΥΗΣ ΔΙΑΔΡΑΣΤΙΚΩΝ ΣΕΛΙΔΩΝ» (Technologies For Creating Interactive Websites) «ΟΙΚΟΝΟΜΟΥ ΑΛΕΞΙΟΣ» ΑΕΜ: 2141 Κατεύθυνση: Πληροφοριακά Συστήματα ΕΠΙΒΛΈΠΩΝ ΚΑΘΗΓΗΤΉΣ: Διονύσιος Πολίτης, Επίκουρος Καθηγητής ΘΕΣΣΑΛΟΝΊΚΗ

2

3

4 ΠΕΡΊΛΗΨΗ Περίληψη Σκοπός της πτυχιακής, ειναι ο σχεδιασμός και η ανάπτυξη διαδραστικής ιστοσελίδα που θα προσφέρει στους επισκέπτες της την δυνατότητα να ενημερώνονται καθώς και να επικοινωνούν άμεσα τον καθηγητή της ιστοσελίδας. Σύγκεκριμένα η υλοποίηση της σελίδας πραγματοποιείται με την χρήση έτοιμου προτύπου (template), στο οποία εφαρμόζονται διάφορες τροποποιήσεις με σκοπό να προσαρμοστούν στις απαιτήσεις μας. Επίσης γίνεται εκτενεί χρήση του Bootstrap (framework) καθώς και JavaScript βιβλιοθήκών για την ευκολότερη παραμετροποίηση της ιστοσελίδας. Τέλος, γίνεται λεπτομερής αναφορά στον τρόπο και τις τεχνολογίες υλοποίησης της ιστοσελίδας καθώς και στο τρόπο με το οποίο μπορούμε να τροποποιήσουμε ή να προσθέσουμε στοιχεία στο πρότυπο (template). VII

5 Abstract This Diploma Thesis presents the implemetation of a interactive website which will provide visitors the opportunity to brief and communicate direct with the professor. The personal website developed using template, in which we applied a number of modifications in order to fit in our specifications. In addition, we use the Bootstrap framework and JavaScript plug-ins for an easier and better implementation of the website. Finally, we briefly mention the tools and the technology used for developing this website and also how to modify or add elements to the template. IX

6 ΕΥΧΑΡΙΣΤΊΕΣ Ευχαριστίες Πριν την παρουσίαση των αποτελεσμάτων της παρούσας εργασίας, αισθάνομαι την υποχρέωση να ευχαριστήσω ορισμένους από τους ανθρώπους που γνώρισα, συνεργάστηκα μαζί τους και έπαιξαν πολύ σημαντικό ρόλο στην πραγματοποίησή της. Θα ήθελα να ευχαριστήσω τους γονείς μου για στήριξη που μου πρόσφεραν καθ' όλη την διάρκεια των σπουδών. Επισής, ενα ευχαριστώ σε όλους τους φίλους που μου στάθηκαν και μου πρόσφεραν απλόχερα τις γνώσεις και την παρέα τους. Τέλος, ένα μεγάλο ευχαριστώ στον επιβλέποντα καθηγητή Διονύσιο Πολίτη για την εμπιστοσύνη και την βοήθεια που μου παρείχε για την υλοποίηση της πτυχιακής. <1/3/2017> Αλέξιος Οικονόμου XI

7 ΠΕΡΙΕΧΌΜΕΝΑ Περιεχόμενα ΠΕΡΊΛΗΨΗ...VII EXECUTIVE SUMMARY... IX ΕΥΧΑΡΙΣΤΊΕΣ... XI ΠΕΡΙΕΧΌΜΕΝΑ...XIII ΛΊΣΤΑ ΣΧΗΜΆΤΩΝ...XV ΚΕΦΑΛΑΙΟ 1: ΕΙΣΑΓΩΓΉ ΠΑΓΚΟΣΜΙΟΣ ΙΣΤΟΣ ΙΣΤΟΣΕΛΙΔΑ ΣΤΑΤΙΚΗ ΙΣΤΟΣΕΛΙΔΑ ΔΥΝΑΜΙΚΗ ΙΣΤΟΣΕΛΙΔΑ ΦΥΛΛΛΟΜΕΤΡΗΤΗΣ (WEB BROWSER) RESPONSIBLE DESIGN ΠΕΡΙΕΧΟΜΕΝΑ ΚΑΙ ΟΡΓΑΝΩΣΗ...27 ΚΕΦΑΛΑΙΟ 2: ΤΕΧΝΟΛΟΓΙΕΣ & ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΙΣΤΟΤΟΠΟΥ HTML ΕΙΣΑΓΩΓΗ ΒΑΣΙΚΕΣ ΕΤΙΚΕΤΕΣ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Νέες Ετικέτες Δομή Video & Audio Τοπική Αποθήκευση Δεδομένων Geolocation CSS ΕΙΣΑΓΩΓΗ ΚΑΝΟΝΕΣ...39 XIII

8 ΠΕΡΙΕΧΌΜΕΝΑ ΔΙΑΦΟΡΑ ΜΕΤΑΞΥ ΙΔΙΟΤΗΤΩΝ & ΚΛΑΣΕΩΝ ΕΠΙΛΟΓΕΙΣ (SELECTORS) ΨΕΥΔΟ-ΚΛΑΣΕΙΣ (PSEUDO-CLASSES) ΨΕΥΔΟ-ΣΤΟΙΧΕΙΑ (PSEUDO-ELEMENTS) ΣΥΝΘΕΤΟΙ ΕΠΙΛΟΓΕΙΣ (ADVANCED SELECTORS) ΙΔΙΟΤΗΤΕΣ (PROPERTIES) ΕΙΣΑΓΩΓΗ ΣΤΗΝ CSS Media Queries Transitions & Animations Border Radius Text & Box Shadow Φόντο Με Πολλαπλές Εικόνες Font Face Gradient PHP ΕΙΣΑΓΩΓΗ BOOTSTRAP ΕΙΣΑΓΩΓΗ ΕΓΚΑΤΑΣΤΑΣΗ ΒΑΣΙΚΟ ΠΡΟΤΥΠΟ (BASIC TEMPLATE) CONTAINERS ΠΛΕΓΜΑ (GRID) MEDIA QUERIES ΕΠΙΛΟΓΕΣ ΠΛΕΓΜΑΤΟΣ (GRID OPTIONS) Παράδειγμα Stacked-to-Horizontal Παράδειγμα Mobile & Desktop Παράδειγμα Mobile & Tablet & Desktop Μεταθέσεις Στηλών Εμφώλευση Στηλών Διάταξη Στηλών FONT AWESOME JAVASCRIPT ΕΙΣΑΓΩΓΗ ΕΙΣΑΓΩΓΗ JAVASCRIPT ΣΕ HTML ΔΗΛΩΣΕΙΣ (STATEMENTS) ΜΕΤΑΒΛΗΤΕΣ ΣΥΝΑΡΤΗΣΕΙΣ JQUERY Εισαγωγή Σύνταξη WOW.JS ADOBE FLASH ΕΙΣΑΓΩΓΗ ΕΝΣΩΜΑΤΩΣΗ FLASH ΣΤΗΝ ΙΣΤΟΣΕΛΙΔΑ...71 ΚΕΦΑΛΑΙΟ 3: ΥΛΟΠΟΙΗΣΗ ΙΣΤΟΣΕΛΙΔΑΣ ΕΙΣΑΓΩΓΗ ΔΟΜΗ ΓΙΑΤΙ ΣΤΑΤΙΚΗ;...75 XIII

9 ΠΕΡΙΕΧΌΜΕΝΑ 3.4 ΕΙΣΑΓΩΓΗ ΚΑΡΤΕΛΑΣ ΠΛΟΗΓΗΣΗΣ ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ ΣΤΟ CAROUSEL ΕΙΣΑΓΩΓΗ VIDEO ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ ΣΤΟ PHOTO TOUR ΕΙΣΑΓΩΓΗ ΒΙΒΛΙΟΥ ΕΙΣΑΓΩΓΗ GOOGLE MAP...78 ΚΕΦΑΛΑΙΟ 4: ΣΥΜΠΕΡΑΣΜΑΤΑ...81 ΠΑΡΑΡΤΗΜΑ I: ΑΝΑΦΟΡΈΣ...83 ΠΑΡΑΡΤΗΜΑ II: ΑΚΡΏΝΥΜΑ...86 XIII

10 ΛΊΣΤΑ ΣΧΗΜΆΤΩΝ Λίστα Σχημάτων Εικόνα 1.1 Ιστορικό λογότυπο του παγκόσμιου ιστού σχεδιασμένο από τον Ρόμπερτ Κάιλιου Εικόνα 1.2 διεύθυνση ιστοσελίδας Εικόνα 1.3 Στατική ιστοσελίδα...22 Εικόνα 1.4 Δυναμικήιστοσελίδα...23 Εικόνα 1.5 Responsible Design...25 Εικόνα 2.1 Ετικέτα <p>...32 Εικόνα 2.2 Ετικέτα <h>...32 Εικόνα 2.3 Ετικέτα <li>...33 Εικόνα 2.4 Ετικέτα <a>...33 Εικόνα 2.5 Ετικέτα <textarea>...33 Εικόνα 2.6 Ετικέτα <input>...34 Εικόνα 2.7 Λογότυπο HTML Εικόνα 2.8 Geolocation...38 Εικόνα 2.9 Λογότυπο CSS...39 Εικόνα 2.10 Λογότυπο CSS Εικόνα 2.11 Παράδειγμα χρήσης Animations...50 Εικόνα 2.12 Παράδειγμα χρήσης Transistion...50 Εικόνα 2.13 Παράδειγμα χρήσης border-radius...51 Εικόνα 2.14 Παράδειγμα χρήσης text-shadow...51 Εικόνα 2.15 Παράδειγμα χρήσης box-shadow...52 Εικόνα 2.16 Παράδειγμα χρήσης multiple backgrounds...52 Εικόνα 2.17 Παράδειγμα face...53 Εικόνα 2.18 Παράδειγμα χρήσης gradient...53 Εικόνα 2.19 Λογότυπο PHP...54 Εικόνα 2.20 Λογότυπο Bootstrap...55 Εικόνα 2.21 Bootstrap CDN...55 Εικόνα 2.22 Δομή αρχείων Bootstrap...56 Εικόνα 2.23 Βασικό Πρότυπο Bootstrap...56 Εικόνα 2.24 Bootstrap Media Queries...58 Εικόνα 2.25 Bootstrap Media Queries Max-width...58 Εικόνα 2.26 Επιλογές Πλέγματος στο Bootstrap...59 Εικόνα 2.27 Πίνακας.col-md-*...59 Εικόνα 2.28 Παράδειγμα Stacked-to-Horizontal...60 Εικόνα 2.29 Πίνακας.col-xs-*...60 Εικόνα 2.30 Παράδειγμα Mobile & Desktop...60 Εικόνα 2.31 Πίνακας.col-sm-*...61 Εικόνα 2.32 Παράδειγμα Mobile,Desktop & Tablet...61 Εικόνα 2.33 Πίνακας.col-md-offset*...61 XV

11 ΛΊΣΤΑ ΣΧΗΜΆΤΩΝ Εικόνα 2.34 Παράδειγμα Μετάθεσεις Στηλών...62 Εικόνα 2.35 Πίνακας Εμφώλευσης Στηλών...62 Εικόνα 2.36 Παράδειγμα Εμφώλευσης Στηλών...62 Εικόνα 2.37 Πίνακας Διάταξης Στηλών...63 Εικόνα 2.38 Παράδειγμα Διάταξης Στηλών...63 Εικόνα 2.39 Παράδειγμα Font Awesome...63 Εικόνα 2.40 Λογότυπο JavaScript...64 Εικόνα 2.41 Παράδειγμα Εσωτερικής Σύνδεσης JavaScript...65 Εικόνα 2.42 Παράδειγμα Εξωτερικής Σύνδεσης JavaScript...66 Εικόνα 2.43 Παράδειγμα Χρήσης Statement Στην JavaScript...66 Εικόνα 2.44 Παράδειγμα Χρήσης Συνάρτησης Στην JavaScript...67 Εικόνα 2.45 Λογότυπο Jquery...67 Εικόνα 2.46 JQuery CDN...68 Εικόνα 2.47 Εγκατάσταση Jquery...68 Εικόνα 2.48 Παράδειγμα Συνάρτησης Jquery...68 Εικόνα 2.49 Βιβλιοθήκη WOW.js...69 Εικόνα 2.50 Εισαγωγή Βιβλιοθήκης Animate.css...69 Εικόνα 2.51 Εισαγωγή WOW.js...69 Εικόνα 2.52 Παράδειγμα Εφαρμογής Εφέ WOW.js...70 Εικόνα 2.53 Παράδειγμα Εφαρμογής Ιδιοτήτων Εφέ WOW.js...70 Εικόνα 2.54 Λογότυπο Adobe Flash...70 Εικόνα 2.55 Ενσωμάτωση αρχείων Adobe Flash...71 Εικόνα 3.1 Πρότυπο της Toolplate...74 Εικόνα 3.2 Εισαγωγή Απλής Καρτέλας...75 Εικόνα 3.3 Εισαγωγή Σύνθετης Καρτέλας...76 Εικόνα 3.4 Εισαγωγή Εικόνας Στο Carousel...76 Εικόνα 3.5 Εισαγωγή Video...77 Εικόνα 3.6 Εισαγωγή Εικόνας Στο Photo Tour...77 Εικόνα 3.7 Εισαγωγή Βιβλίου στο owl-carousel...78 Εικόνα 3.8 Ενσωμάτωση Χάρτη Google Map...78 Εικόνα 3.9 Ενσωμάτωση Χάρτη Ετικέτα <iframe>...79 XV

12

13 ΚΕΦΑΛΑΙΟ 1: Εισαγωγή 20

14 ΕΙΣΑΓΩΓΉ 1.1 Παγκόσμιος Ιστός Εικόνα 1.1 Ιστορικό λογότυπο του παγκόσμιου ιστού σχεδιασμένο από τον Ρόμπερτ Κάιλιου Ο Παγκόσμιος ιστός είναι ένα ανοιχτό σύστημα διασυνδεδεμένων πληροφοριών και πολυμεσικού περιεχομένου, που επιτρέπει στους χρήστες του Διαδικτύου να αναζητήσουν πληροφορίες μεταβαίνοντας από ένα έγγραφο στο άλλο. Κάθε δίκτυο-δομική μονάδα του διαδικτύου αποτελείται από συνδεδεμένους υπολογιστές σε τοπικό επίπεδο, για παράδειγμα το δίκτυο υπολογιστών των κεντρικών γραφείων μιας εταιρίας. Αυτά τα δίκτυα με τη σειρά τους συνδέονται σε ευρύτερα δίκτυα, όπως εθνικά και υπερεθνικά. Το ευρύτερο δίκτυο στον κόσμο λέγεται παγκόσμιος ιστός το οποίο είναι μοναδικό (δηλαδή δεν υπάρχουν παραπάνω από ένα δίκτυα υπολογιστών παγκόσμιας κλίμακας), και συμπεριλαμβάνεται τόσο τα γήινα δίκτυα, όσο και τα δίκτυα των δορυφόρων της και άλλων διαστημικών συσκευών που είναι συνδεδεμένα σε αυτό. Η τεχνολογία του ιστού δημιουργήθηκε το 1989 από τον Βρετανό Τίμ Μπέρνερς Λή, που εκείνη την εποχή εργαζόταν στον Ευρωπαικό Οργανισμό Πυρηνικών Ερευνών (CERN) στην Γενεύη της Ελβετίας. Το όνομα που έδωσε στην εφεύρεσή του ο ίδιος ο Lee είναι World Wide Web όρος γνωστός στους περισσότερους από το "www". Αυτό που οδήγησε τον Lee στην εφεύρεση του Παγκόσμιου ιστού ήταν το όραμά του για ένα κόσμο όπου ο καθένας θα μπορούσε να ανταλλάσσει πληροφορίες και ιδέες άμεσα προσβάσιμες από τους υπολοίπους. Το σημείο στο οποίο έδωσε ιδιαίτερο βάρος ήταν η μη ιεράρχηση των διασυνδεδεμένων στοιχείων. Οραματίστηκε κάθε στοιχείο, κάθε κόμβο του ιστού ίσο ως προς την προσβασιμότητα με τα υπόλοιπα. Αν σκεφτεί, όμως, κανείς τον βαθμό ιεράρχησης με τον οποίο λειτουργούν οι μηχανές αναζήτησης του ιστού, όπως για παράδειγμα το google, γίνεται εύκολα κατανοητό ότι στην πράξη κάτι τέτοιο δεν συμβαίνει, τουλάχιστον στον βαθμό που το είχε οραματιστεί ο Lee. 1.2 Ιστοσελίδα Ιστοσελίδα (web page) είναι ένα είδος εγγράφου του παγκόσμιου ιστού (WWW) που περιλαμβάνει πληροφορίες με την μορφή κειμένου, υπερκειμένου, εικόνας, βίντεο και ήχου. Πολλές ιστοσελίδες μαζί συνθέτουν έναν ιστότοπο (ιστοχώρος ή δικτυακός τόπος). Οι σελίδες ενός ιστοτόπου εμφανίζονται κάτω από το ίδιο όνομα χώρου (domain) π.χ. microsoft.com. Οι ιστοσελίδες αλληλοσυνδέονται και μπορεί ο χρήστης να μεταβεί από τη μία στην άλλη κάνοντας «κλικ», επιλέγοντας δηλαδή συνδέσμους που υπάρχουν στο κείμενο ή στις φωτογραφίες της ιστοσελίδας. Οι σύνδεσμοι προς άλλες σελίδες εμφανίζονται συνήθως υπογραμμισμένοι και με μπλε χρώμα για να είναι γρήγορα ξεκάθαρο στον επισκέπτη ότι πρόκειται για σύνδεσμο προς άλλη ιστοσελίδα, χωρίς όμως πάντα να είναι αυτό απαραίτητο. 21

15 Κάθε ιστοσελίδα που περιέχεται σε δικτυακό τόπο, έχει τη δική της διεύθυνση στον Παγκόσμιο Ιστό, και αν θέλουμε να «επισκεφτούμε» μία ιστοσελίδα, πρέπει να ξέρουμε τη διεύθυνσή της. Η διεύθυνση αυτή καλείται URL (Uniform Resource Locator) Ενιαίος Προσδιοριστής Πόρου ή απλούστερα διεύθυνση ιστοσελίδας. Μία διεύθυνση ιστοσελίδας είναι μοναδική και έχει συνήθως την εξής μορφή : Εικόνα 1.2 διεύθυνση ιστοσελίδας Η κατασκευή ιστοσελίδων είναι κάτι που μπορεί να γίνει πολύ εύκολα με προγράμματα που κυκλοφορούν ελεύθερα, αλλά υπάρχουν και αυτοματοποιημένοι μηχανισμοί κατασκευής ιστοσελίδων που επιτρέπουν σε απλούς χρήστες να δημιουργήσουν εύκολα και γρήγορα προσωπικές ή και εμπορικές ιστοσελίδες. Από την άλλη μεριά υπάρχουν και πολλές εταιρίες, που εξειδικεύονται στη δημιουργία ελκυστικών και λειτουργικών ιστοσελίδων που έχουν σαν στόχο να οδηγήσουν τους επισκέπτες στην αγορά κάποιου προϊόντος, στην επικοινωνία με τον ιδιοκτήτη του ιστοτόπου ή απλά στο ανέβασμα του εταιρικού προφίλ μιας επιχείρησης Στατική Ιστοσελίδα Εικόνα 1.3 Στατική ιστοσελίδα Στατική ιστοσελίδα (static web-page ή flat web-page) ονομάζεται μια ιστοσελίδα της οποίας το περιεχόμενο μεταφέρεται στον χρήστη ακριβώς στην μορφή που είναι αποθηκευμένο στον εξυπηρετητή ιστοσελίδων (web server), σε αντίθεση με τις δυναμική ιστοσελίδα όπου το περιεχόμενο δημιουργείται από μια εφαρμογή η οποία εκτελείται στον εξυπηρετητή ιστοσελίδων. Οι στατικές ιστοσελίδες χαρακτηρίζονται από την μονιμότητα του περιεχομένου τους και της διάταξής τους (layout), τα οποία μπορούν να αλλάξουν/να τροποποιηθούν μόνο με αίτημα για αναβάθμιση (update) από τον προγραμματιστή/διαχειριστή της σελίδας αυτης. Πλεονεκτήματα: χαμηλό κόστος κατασκευής και συντήρησης, γιατί μια στατική σελίδα, δεν απαιτεί μεγάλο χώρο σε φιλοξενία από webserver. 22

16 Δεν χρειάζονται προγραμματιστικές δεξιότητες για να δημιουργήσει κάποιος μια στατική σελίδα. Η σελίδα μπορεί να βρίσκεται με περισσότερους από έναν εξυπηρετητές. Δεν χρειάζεται ειδικό λογισμικό στον εξυπηρετητή ιστοσελίδων για την δημοσίευση στατικών σελίδων. Αναπτύσσεται/σχεδιάζεται γρηγορότερα από ότι μια δυναμική. Οι σελίδες φορτώνουν πιο γρήγορα από ότι οι δυναμικές. Είναι Seo SEO friendly. Μεγαλύτερη Ασφάλεια Δεδομένων. εύκολο τρόπο κλωνοποιημένη σε Μειονεκτήματα: Δεν είναι εύκολη η διαδραστικότητα με τον χρήστη. Η διαχείριση μεγάλου αριθμού στατικών ιστοσελίδων δεν είναι εύκολη χωρίς αυτόματα εργαλεία Δυναμική Ιστοσελίδα Εικόνα 1.4 Δυναμικήιστοσελίδα Δυναμική ιστοσελίδα (dynamic web page) είναι μια ιστοσελίδα η οποία δημιουργείται δυναμικά την στιγμή της πρόσβασης σε αυτή ή την στιγμή που ο χρήστης αλληλεπιδρά με τον εξυπηρετητή ιστοσελίδων. Οι δυναμικές ιστοσελίδες θεωρούνται δομικό στοιχείο της νέας γενιάς του παγκόσμιου ιστού (Web 2.0) όπου η πληροφορία διαμοιράζεται σε πολλαπλές ιστοσελίδες. Οι δυναμικές ιστοσελίδες προσαρμόζουν το περιεχόμενο τους και την εμφάνισή τους σύμφωνα με την καταχώρηση/αλληλεπίδραση ή τις αλλαγές του τελικού χρήστη στο περιβάλλον προγραμματισμού (χρήστης, ώρα, τροποποιήσεις στη βάση δεδομένων κτλ.). Το περιεχόμενο μπορεί να αλλάζει στον υπολογιστή του τελικού-χρήστη με τη χρήση των γλωσσών προγραμματισμού που εκτελούνται στον υπολογιστή του χρήστη (JavaScript, VBScript, Actionscript, etc.). Το περιεχόμενο στις δυναμικές σελίδες συχνά μεταφράζεται στον εξυπηρετητή (server), που εκεί αποστέλνεται μέσω του διακομιστή (Apache), μέσω γλωσσών προγραμματισμού που εκτελούνται στον εξυπηρετητή (Perl, PHP, ASP, JSP, ColdFusion,.NET κτλ). Πίσω από δυναμικά websites κρύβονται πάντα βάσεις δεδομένων (databases) οπού εκεί αποθηκεύονται δεδομένα και πληροφορίες του εν λόγω website. Και με εντολή του χρήστη, το website επικοινωνεί με την database, από όπου θα αντλήσει το περιεχόμενο που απαίτησε να δει ο χρήστης. Λόγω των databases καθιστάται εύκολη η προσθαφαίρεση περιεχομένου στις δυναμικές ιστοσελίδες, ακόμα και από τον πιο άσχετο (σε γνώσεις προγραμματισμού) χρήστη-επισκέπτη της σελίδας. 23

17 Πλεονεκτήματα: Δεν απαιτείται η βοήθεια ειδικού προγραμματιστή για τη διαχείριση της ιστοσελίδας Παρέχουν πολλές δυνατότητες απο ότι οι στατικές σελίδες. Πολύ πιο εύκολη η ενημέρωσή της Πολύ φιλικές ως προς τις μηχανές αναζήτηση Μειονεκτήματα: Υψηλό κόστος Κατασκευής. Μικρότερη ασφάλεια δεδομένων (online Βάση Δεδομένων) Φυλλομετρητής (Web browser) Ένας Web browser (φυλλομετρητής ιστοσελίδων, πλοηγός Web, πρόγραμμα περιήγησης Web ή περιηγητής Ιστού) είναι ένα λογισμικό που επιτρέπει στον χρήστη του να προβάλλει, και να αλληλεπιδρά με, κείμενα, εικόνες, βίντεο, μουσική, παιχνίδια και άλλες πληροφορίες συνήθως αναρτημένες σε μια ιστοσελίδα ενός ιστότοπου στον Παγκόσμιο Ιστό ή σε ένα τοπικό δίκτυο. Το κείμενο και οι εικόνες σε μια ιστοσελίδα μπορεί να περιέχουν υπερσυνδέσμους προς άλλες ιστοσελίδες του ίδιου ή διαφορετικού ιστότοπου. Ο Web browser επιτρέπει στον χρήστη την γρήγορη και εύκολη πρόσβαση σε πληροφορίες που βρίσκονται σε διάφορες ιστοσελίδες και ιστότοπους εναλλάσσοντας τις ιστοσελίδες μέσω των υπερσυνδέσμων. Οι φυλλομετρητές χρησιμοποιούν τη γλώσσα μορφοποίησης HTML για την προβολή των ιστοσελίδων, για αυτό η εμφάνιση μιας ιστοσελίδας μπορεί να διαφέρει ανάλογα με τον browser. Οι πλοηγοί Web ουσιαστικά αποτελούν λογισμικό Πελάτη του δικτυακού πρωτοκόλλου επιπέδου εφαρμογών HTTP. Για κάθε browser διατίθενται, επίσης, και αρκετά πρόσθετα στοιχεία («add-ons» ή «plug-ins»), με στόχο την επαύξηση των δυνατοτήτων τους, τη βελτίωση της χρηστικότητάς τους και την προστασία του χρήστη σε θέματα ασφαλείας Responsible Design Το Responsive Web Design πήρε την ονομασία του από την λέξη "Respond" και σημαίνει ότι μια ιστοσελίδα ανταποκρίνεται & διαμορφώνεται ανάλογα με την ανάλυση της οθόνης στην οποία εμφανίζεται η ιστοσελίδα. Στο web, θα ορίζαμε το responsive web design ως τη διαδικασία σχεδιασμού και κατασκευής ιστοσελίδων οι οποίες ανιχνεύουν διάφορες μεταβλητές από το εξωτερικό και εσωτερικό περιβάλλον και ανταποκρίνονται ανάλογα προς τον επισκέπτη. Στόχος είναι η δημιουργία μίας «έξυπνης» ιστοσελίδας η όποια θα προσαρμόζει το μέγεθος και τα βασικά χαρακτηριστικά της (μενού, εικόνες, κείμενο) ανάλογα με τις διαστάσεις της οθόνης της συσκευής του χρήστη. Αυτό σημαίνει ότι αν κάποιος ανοίξει μια ιστοσελίδα η οποία είναι Responsive από ένα smartphone, η ιστοσελίδα θα διαμορφωθεί με τέτοιο τρόπο ώστε να μην χρειάζεται να κάνει μεγέθυνση ή να κάνει πλάγιο σκρολ για να διαβάσει με ευκολία το περιεχόμενο της εκάστοτε ιστοσελίδας. 24

18 Εικόνα 1.5 Responsible Design Αυτό που γίνεται συνήθως, είναι η ιστοσελίδα να ανιχνεύει τη συσκευή του επισκέπτη, καθώς και τις διαστάσεις της οθόνης. Όταν ο επισκέπτης χρησιμοποιεί οθόνη με σχετικά μεγάλες διαστάσεις (π.χ. πάνω από 1000px), η προβολή της σελίδας γίνεται υπό κανονικές συνθήκες εμφανίζοντας όσον το δυνατόν περισσότερα αντικείμενα. Σε οθόνες με μικρότερες διαστάσεις, τα αντικείμενα τοποθετούνται συνήθως το ένα κάτω από το άλλο και μερικές φορές αποκρύπτονται εντελώς. Η παρούσα ιστοσελίδα εχει δημιουργηθεί λαμβάνοντας υπόψιν τις αρχές του Responsible Design. Παρακάτω παρουσιάζεται στιγμιότυπο του κώδικα : /* Small devices (tablets, 768px and up) (min-width : 768px) and (max-width : 991px) {.navbar-custom.navbar-brand{ padding: 10px 15px; }.navbar-custom.navbar-nav > li > a,.navbar-custom.navbar-nav.dropdown-menu > li > a{ font-size: 12px; padding: 15px; } /*about me section*/.biography { margin-top: 20px; margin-bottom: 45px; } /*resume*/.resume:before,.resume:after{ left:0px; } /*skill section*/.skill-title h3 { font-size: 14px; } 25

19 /*blog section*/.blog-post-wrapper { margin-bottom: 40px; }.entry-meta ul li{ padding: 0 5px; } /*contact section*/.contact-form { margin-bottom: 40px; }.contact-section.map-icon,.contact-section.mobile-icon { float: left; }.center-xs { text-align: left; }.portfolio-item{ min-height: 162px; } /*service*/.service-wrap > div{ margin-bottom:100px; }.service-wrap > div:nth-child(3),.service-wrap > div:nth-child(4){ margin-bottom:0; } /*HOME TWO*/ #hometwo:before{ width:100%; }.personal-info{ text-align: center; padding:0 15px; } } /* Medium devices (desktops, 992px and up) (min-width : 992px) and (max-width : 1199px) {.portfolio-item{ min-height: 150px; }.download-button a{ margin-right: 10px; 26

20 } } /* Large devices (large desktops, 1200px and up) (min-width : 1200px) and (max-width : 1279px) { } /* Large devices (large desktops, 1280px and up) screen and (min-width:1280px) and (max-width:1599px) { } /* Extra Large devices (large desktops, 1600px and up) screen and (min-width:1600px) and (max-width:1920px) {.personal-info{ padding-right:180px; } } Πλεονεκτήματα: Το πιο βασικό πλεονέκτημα είναι ότι έχουμε μια ιστοσελίδα η οποία συμπεριφέρεται σαν 2 σε 1. Μπορούμε να επισκεφθούμε μια ιστοσελίδα χωρίς πρόβλημα είτε από έναν προσωπικό υπολογιστή είτε από μια κινητή συσκευή έχοντας την καλύτερη δυνατή εμπειρία πλοήγησης. Analytics: Μπορούμε να έχουμε μια πλήρη αναφορά των επισκέψεων της ιστοσελίδας μας για διαφορετικού είδους συσκευές. Σύνδεσμοι: Κοινοί σύνδεσμοι (links) που έχουμε στην ιστοσελίδα ανεξάρτητα από το είδος της συσκευής. SEO: Ένα url συμπεριλαμβάνει όλα τα links που θέλουμε να έχουμε. Μεγαλύτερη ευκολία στη συντήρηση και μείωση των σφαλμάτων. Είναι καλύτερα να συντηρείς μία ιστοσελίδα, παρά τρεις (μία για προσωπικό υπολογιστή, μία για tablet και μία για κινητό τηλέφωνο). Μείωση του χρόνου σχεδίασης της δομής της ιστοσελίδας για όσον αφορά διαφορετικές συσκευές. Διευκόλυνση του επισκέπτη της ιστοσελίδας: Καθώς ο επισκέπτης της ιστοσελίδας δεν χρειάζεται να κάνει συνεχώς μεγέθυνση για να διαβάζει το περιεχόμενο της ιστοσελίδας, του προσφέρεται ένα πιο ευχάριστο, καλαίσθητο και γρήγορο περιβάλλον για να την εξερευνήσει. 1.3 Περιεχόμενα και Οργάνωση Η εργασία αυτή αποτελείται απο 4 κεφάλαια. Στο πρώτο κεφάλαιο γίνεται αναφορά στις γενικές έννοιες της πτυχιακής εργασίας όπως ο παγκοσμιος ιστος και η ιστοσελίδα καθως και παρουσιάζεται επιγραμματικά το περιεχόμενο των υπολοίπων κεφαλαίων. Στο κεφάλαιο 2 παρουσιάζονται τα εργαλεία και οι τεχνολογίες που χρησιμοποιήθηκαν για την υλοποίηση της ιστοσελίδας με το οποίο ασχολείται η παρούσα εργασία. 27

21 Συγκεκριμένα αναφέρεται στις τεχνολογίες HTML, CSS, PHP, JavaScript και Bootstrap κάνοντας λεπτομερή αναφορά στις ιδιότητες της κάθε τεχνολογίας καθώς και την εξέλιξή τους παρουσιάζοντας τις νέες καινοτομίες που φέρουν. Στο κεφάλαιο 3 αναφέρεται στην υλοποίηση της ιστοσελίδας. Παρουσιάζει τον τρόπο με το οποίο υλοποιήθηκε η παρούσα εργασία τις διάφορες τροποποιήσεις που εφαρμόστηκαν στο Πρότυπο (template) καθώς και στην συγγραφή κώδικα. Παράλληλα παρουσιάζονται στιγμιότυπα κώδικα ωστε να γινει σαφές στον αναγνώστη ο τρόπος με τον οποίο εισάγωνται νέα στοιχεία στην ιστοσελίδα οπως νέα εικόνες, video, καρτέλες κτλ. Στο κεφάλαιο 4 δίνονται τα συμπεράσματα της παρόυσας εργασίας. Επίσης παρουσιάζονται κάποιες μελλοντικές βελτιώσεις και προσθήκες που μπορούν να υλοποιηθούν. 28

22 Κ Ε Φ Α Λ Α Ι Ο 2 : Τε χ ν ο λ ο γ ί ε ς & Ε ρ γ α λ ε ί α Αν ά π τ υ ξ η ς Ιστοτόπου 29

23 ΤΕΧΝΟΛΟΓΙΕΣ & ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΙΣΤΟΤΟΠΟΥ 2.1 HTML Εισαγωγή Η HTML (Hypertext Markup Language) είναι μια απλή γλώσσα περιγραφής, η οποία χρησιμοποιείται για τη δημιουργία εγγράφων υπερκειμένου (hypertext), τα οποία είναι δυνατόν να μεταφέρονται σε διαφορετικές πλατφόρμες λειτουργικών συστημάτων. Η HTML δεν είναι γλώσσα προγραμματισμού αλλά γλώσσα μορφοποίησης (markup language) και έχει τυποποιηθεί από τον παγκόσμιο οργανισμό τυποποίησης τεχνολογιών του Web, τον World Wide Web Consortium (W3C) Χρησιμοποιεί ένα αριθμό από tags για την μορφοποίηση κειμένου, για την δημιουργία συνδέσμων (links) μετάβασης ανάμεσα των σελίδα, για την εισαγωγή εικόνων, ήχου κ.α. Όταν ένας Web Browser ανοίγει ένα αρχείο HTML τα στοιχεία (tags) μεταφράζονται σε κατάλληλα χαρακτηριστικά με αποτελέσματα στην εμφάνιση και στην λειτουργικότητα της συγκεκριμένης σελίδας. Για να γραψουμε κωδικα Html χρειαζόμαστε εναν οποιονδήποτε editor οπως πχ. Notepad και δίνοντας κατάληξη.html Οι σελίδες στο Internet πιθανώς να έχουν διαφορετικές καταλήξης όπως.htm, η οποία είναι επίσης μια αποδεκτή επέκταση καθώς και άλλες επεκτάσεις όπως.jps (Java Server Pages),.asp (Microsoft Active Server Pages) ή.php (PHP) οι οποίες μεταγλωτίζονται στο διακομηστή και παράγεται στην έξοδο κώδικας Html. Δείγμα Κώδικα HTML <html> <head> <title>page Title</title> </head> <body> <h1>this is a Heading</h1> <p>this is a paragraph.</p> </body> </html> Βασικές Ετικέτες 30

24 Οπως αναφέραμε και πιο πάνω η HTML χρησιμοποιεί ειδικές ετικέτες (tags) για να δώσει τις απαραίτητες οδηγίες στον περιηγητή Ιστού (Web browser) για τον τρόπο εμφάνισης του κειμένου και για την εμφάνιση πολυμεσικού περιεχομένου (εικόνες, video, ήχος). Οι περισσότερες ετικέτες αποτελούνται απο δύο μέρη, μια: Ετικέτα ανοίγματος: είναι μια ετικέτα HTML η οποία υποδεικνύει την αρχή μιας εντολής HTML. Οι ετικέτες ανοίγματος ξεκινούν πάντα με < και τελειώνουν με > όπως στο <html> Ετικέτα κλεισίματος: είναι μια ετικέτα HTML η οποία υποδυκνύει τη τέλος μια εντολής HTML. Οι ετικέτες κλεισίματος ξεκινούν πάντα με </ και τελειώνουν με > όπως στο </html> Ετικέτα <html> Η ετικέτα αυτή περικλείει όλο των κώδικα της σελίδας και δηλώνει στον φυλλομετρητή οτι ο κώδικας αυτος ειναι γραμμένος σε HTML. Ετικέτα <head> Η ετικέτα αυτή περιλαμβάνει διάφορες πλήροφορίες σχετικά με το έγγραφο HTML όπως το τίτλο της σελίδας καθώς και συνδέσμους (links) για την εισαγωγή CSS, JavaScript και άλλων αρχείων που είναι απαραίτητα για την μορφοποίση της ιστοσελίδας. Το κομμάτι του κώδικα αυτού παραμένει κρυφό και δεν εμφανίζεται απο το φυλλομετρητη (Web Browser). Ετικέτα <title> Η ετικέτα αυτή αποτελεί το τίτλο του εγγράφου HTML και περιλαμβάνεται στην ετικέτα <head>. Ετικέτα <body> Η ετικέτα αυτή αποτελεί το σώμα του εγγράφου HTML και περιλαμβάνει όλο το κέιμενο, τους συνδέσμους τις εικόνες κ.α, δηλαδή όλο των κώδικα που περικλείει η ετικέτα <html> χωρίς την ετικέτα <head>. Ετικέτα <div> Η ετικέτα <div> ορίζει ένα τμήμα στο HTML έγγραφο. Ένα τμήμα ομαδοποιεί τα περιεχόμενα που είναι μέσα στις ετικέτες <div>...</div> ώστε να μπορούμε να ορίζουμε ένα ενιαίο στυλ (χρώμα, γραμματοσειρά, στοίχιση) με την ιδιότητα style. Συνήθως πριν και μετά το τμήμα div ο browser αφήνει μια γραμμή κενή. Ετικέτα <p> Η ετικέτα <p> ομαδοποιεί το κείμενο σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετα το τέλος αυτής. Καλό είναι να αποφεύγουμε να χρησιμοποιούμε την ετικέτα αυτή όταν μπορούμε να ομαδοποιείσουμε το κείμενο με άλλες ετικέτες. 31

25 Εικόνα 2.1 Ετικέτα <p> Ετικέτα <br> Η ετικέτα <br> αναγκάζει τον browser να σταματήσει να τυπώνει στην τρέχουσα γραμμή και έτσι το αμέσως επόμενο κείμενο ξεκινά από το αριστερό περιθώριο της επόμενης γραμμής. Επισης, δεν προσθέτει επιπλέον χώρο πάνω ή κάτω από τη νέα γραμμή και δεν αλλάζει τη γραμματοσειρά ή το στυλ του κειμένου. Ετικέτα <h1...h6> Η ετικέτα αυτή αποτελεί την επικεφαλίδα της ιστοσελίδας και εμφανίζεται με κεφαλαία γράμματα στην HTML. Οι επικεφαλίδες χωρίζονται σε επίπεδα με βάση την αξία τους με την ετικέτα <h1> να αποτελεί ετικέτα πρώτου επιπέδου, <h2> ετικέτα δευτέρου επιπέδου κτλ. Εικόνα 2.2 Ετικέτα <h> Ετικέτα <li> Με την ετικέτα <li> δημιουργούμε στοιχεία (items) σε μία λίστα η οποία μπορει να είναι ταξινομημένη <οl> (order lists) ή όχι <ul> (unorder lists). 32

26 Εικόνα 2.3 Ετικέτα <li> Ετικέτα <link> Με την ετικέτα <link> ορίζουμε την σχέση μεταξύ του τρέχον εγγράφου με ένα εξωτερικό αρχείο, το οποίο συνήθως είναι αρχείο CSS ή JavaScript. Περιλαβάνεται στην ετικέτα <head> Ετικέτα <a> Η ετικέτα <a> περιλαμβάνει συνδέσμους προς άλλες σελίδες χρησιμοποιώντας την ιδιότητα href.οι πιο σημαντικές ιδιότητες της ετικέτας είναι η href η οποία ορίζει το URL του συνδέσμου και η target η οποία ορίζει που θα ανοίξει το URL (στο ίδιο tab ή σε νέο tab). Επίσης οι σύνδεσμοι μπορούν να είναι είτε εσωτερικοί (αρχική σελίδα, νεα, επικοινωνία), είτε εξωτερικοί προς άλλες σελίδες όπως Εικόνα 2.4 Ετικέτα <a> Ετικέτα <textarea> Με την ετικέτα <textarea> εισάγουμε Περιοχή Κειμένου στην Φόρμα μας. Στην Περιοχή Κειμένου ο επισκέπτης μπορεί να γράψει κείμενο χωρίς περιορισμό στον αριθμό των χαρακτήρων. Επίσης μπορούμε να ορίσουμε τις διαστάσεις της περιοχής κειμένου είτε με τις ιδιότητες cols και rows, είτε με CSS. Εικόνα 2.5 Ετικέτα <textarea> 33

27 Ετικέτα <input> Με την ετικέτα <input> εισάγουμε ένα πεδίο φόρμας στο οποίο ο χρήστης μπορεί να πληκτρολογήσει δεδομένα Εικόνα 2.6 Ετικέτα <input> Εισαγωγή Στην HTML5 Εικόνα 2.7 Λογότυπο HTML5 H ΗΤML5 είναι η τελευταία έκδοση της ΗΤML (Hypertext Markup Language) που χρησιμοποιείται για την κατασκευή ιστοσελίδων. Σε αυτήν την έκδοση δίνεται μεγάλη έμφαση στην δημιουργία responsible ιστοσελίδων,σελίδων που προσαμόζονται σε διαφορετικές συσκευές. Για τους χρήστες κινητών συσκευών (smartphones), που πιθανόν πλοηγούνται στην ιστοσελίδα με περιορισμένο bandwidth και είναι αυτοί στους οποίους απευθύνεται κυρίως η τεχνική της responsive σχεδίασης, θα πρέπει η ιστοσελίδα όχι μόνο να ανταποκρίνεται στον περιορισμένο «χώρο» της οθόνης τους, αλλά και να την φορτώνει όσο το δυνατόν ταχύτερα. Επίσης, προσφέρει πληθώρα απο νέες δυνατότητες που απλοποιούν και διευκολύνουν στην ανάπτυξη ενός ιστοτόπου. Προστήθενται νέες ετικέτες (tags) που προσφέρουν πιο ουσιαστικό κώδικα στις μηχανές αναζήτησης και νέες καινοτομίες που απλοποιούν την υλοποίηση διαφορων εργασιών αναιρώντας την χρήση κώδικα JavaScript και plug-ins 34

28 όπως Adobe Flash κτλ. Σκοπός είναι η δημιουργία περισσότερο λιτού, απλοποιημένου και γρήγορου στη φόρτωση, κώδικα Νέες Ετικέτες Οι προδιαγραφές HTML5 περιλαμβάνουν μια σειρά νέων σημασιολογικών στοιχείων, η αξιοποίηση των οποίων προσφέρει συγκεκριμένο νόημα στα διάφορα τμήματα μιας ιστοσελίδας, όπως μια κεφαλίδα (header), ένα υποσέλιδο (footer), γραμμές εργαλείων πλοήγησης κ.τ.λ. Σε προηγούμενες εκδόσεις της HTML, για τη δημιουργία τέτοιων στοιχείων χρησιμοποιούνταν ετικέτες <div> και με κατάλληλη χρήση ιδιοτήτων id ή/και class γινόταν η διάκριση μεταξύ τους. Το πρόβλημα που προκύπτει είναι ότι οι ετικέτες <div> δεν έχουν καμία σημασιολογική έννοια καθώς δεν υπάρχουν αυστηροί κανόνες που να ορίζουν πως και που χρησιμοποιούνται οι ιδιότητες id και class, γεγονός που καθιστά εξαιρετικά δύσκολο για τον περιηγητή να προσδιορίσει και να αναλύσει τη σημασιολογική δομή του κώδικα της ιστοσελίδας. Στη συνέχεια, παρουσιάζονται ενδεικτικά οι σημαντικότερες νέες ετικέτες με μια σύντομη περιγραφή της χρήσης τους: <header>: Η ετικέτα «header» ορίζει την επικεφαλίδα ενός εγγράφου. Το περιεχόμενο της επικεφαλίδας αποτελείται συνήθως από γραφικά (πχ. Λογότυπο), κείμενο ή μενού πλοήγησης. <footer>: Η ετικέτα «footer» ορίζει το υποσέλιδο ενός εγγράφου. Το υποσέλιδο, χρησιμοποιείται συνήθως για την παροχή πληροφοριών, στοιχείων επικοινωνίας, copyrights κ.τ.λ. <nav>: Η ετικέτα «nav» ορίζει μια περιοχή που περιέχει το μενού πλοήγησης του εγγράφου (navigation menu). <section>: Η ετικέτα «section» χρησιμοποιείται για την θεματική ομαδοποίηση ίδιου περιεχόμενου, συνήθως κάτω από μία κεφαλίδα. <article>: Η ετικέτα «article» ορίζει ένα αυτοτελές μέρος του εγγράφου (πχ. ένα άρθρο), το οποίο μπορεί να ξαναχρησιμοποιηθεί μόνο του. <aside>: Η ετικέτα «aside» ορίζει ένα τμήμα με μικρότερη σχέση με το υπόλοιπο έγγραφο και διαφορετική ροή. Το περιεχόμενο του μπορεί να τοποθετηθεί για παράδειγμα σαν πλάγια μπάρα. <hgroup>: H ετικέτα «hgroup» ομαδοποιεί ένα σύνολο από επικεφαλίδες ενός εγγράφου. Συχνά, ερχόμαστε αντιμέτωποι με μια επικεφαλίδα κάτω από την οποία εμφανίζεται μια άλλη με μικρότερα γράμματα για να δηλώσει ότι είναι υποσύνολο ή παιδί της πρώτης. <details>: Η ετικέτα «details» ορίζει επιπλέον πληροφορίες για ένα έγγραφο, τις οποίες ο επισκέπτης μπορεί να τις εμφανίζει ή να τις αποκρύπτει. Η επικεφαλίδα είναι πάντα ορατή, ενώ το κείμενο που βρίσκεται μέσα στην ετικέτα «details» εμφανίζεται μόνο όταν ο χρήστης πατήσει πάνω στην επικεφαλίδα. <figure>: Η ετικέτα «figure» αναπαριστά ένα αυτοδύναμο κομμάτι κειμένου που αντιμετωπίζετε ως ένα κομμάτι στη ροή του εγγράφου. <canvas>: Η ετικέτα «canvas«χρησιμοποιείται για την απεικόνιση γραφικών με την χρήση scripts, για την απεικόνιση γραφημάτων κ.α. <video>, <audio>: Οι ετικέτες «video» και «audio» χρησιμοποιούνται για την αναπαραγωγή των αντίστοιχων πολυμέσων, χωρίς την χρήση βοηθητικών προγραμμάτων (plug-ins). 35

29 Δομή Οπως αναφέραμε και παραπάνω στην HTML5 εισάγωνται νέες ετικέτες (tags) που απλοποιούν την σύνταξη του κώδικα. Παρακάτω παρουσιάζεται η διαφορά στην δομή της HTML5. Ο κώδικας πρίν: Ο κώδικας μετά: 36

30 Video & Audio Μέχρι τώρα για να εισάγουμε video & audio στον Browser χρειαζόμασταν plug-ins (πρόσθετα) όπως Adobe Flash, Μedia player. Πλέον στην HTML5 η εισαγωγή τους αποτελεί απλή διαδικασία η οποία επιτυγχάνεται με την χρήση ετικετών <video> και <audio> Για εισαγωγή audio : <audio src="audio.ogg" controls autoplay loop preload="auto"></audio> controls: Εμφανίζει τα κουμπία για την αναπαραγωγή του ήχου autoplay: Για αυτόματη αναπαραγωγή ήχου Loop: Το κλίπ αναπαράγεται ξανά μετα το τέλος του preload: Φορτώνει το κλιπ μαζί με την σελίδα Για εισαγωγή video : <video width:"320" height:"240" controls autoplay loop preload="auto"> <source src="movie.mp4" type="video/mp4"> </video> controls: Εμφανίζει τα κουμπία για την αναπαραγωγή του βίντεο autoplay: Για αυτόματη αναπαραγωγή του βίντεο width: Το πλάτος σε pixels height: Το ύψος σε pixels Loop: Το κλίπ αναπαράγεται ξανά μετα το τέλος του preload: Φορτώνει το κλιπ μαζί με την σελίδα Τοπική Αποθήκευση Δεδομένων Ενα άλλο Πλεονέκτημα της HTML5 είναι η τοπική (offline) αποθήκευση δεδομένων. Μεχρι τώρα η αποθήκευση των δεδομένων γινόταν μέσω των cookies τα οποία ο browser έπρεπε να φορτώνει σε κάθε αίτηση προσβασης στην συγκεκριμένη ιστοσελίδα κάνοντας αρκετα αργή την πλοήγηση στην περίπτωση μεγάλου όγκου δεδομένων. Πλέον με την τοπική αποθήκευση τα δεδομένα δεν σαρώνονται μετά από κάθε αίτηση του server, αλλά μόνο όταν απαιτείται. Αυτό μας δίνει την δυνατότητα να αποθηκεύουμε μεγάλο όγκο δεδομένων και να έχουμε καλύτερη απόδοση και εμπειρία χρήσης. Επιπλέον τα δεδομένα αποθηκεύονται σε διαφορετικές τοποθεσίες στην κρυφή μνήμη του υπολογιστή ώστε η κάθε ιστοσελίδα να έχει προσβαση μόνο στα δικά της δεδομένα. Τα δεδομένα αυτά παραμένουν κρυφά και ο χρήστης δεν έχει την δυνατότητα πρόσβασης σε αυτά ή αν έχει είναι αρκετά περιορισμένη. Η ανάκτηση των δεδομένων απο τον φυλλομετρητη (Browser) γίνεται με την χρήση JavaScript APIs. 37

31 Geolocation Πρόκειται για υπηρεσία εντοπισμού της τοποθέσίας του χρήστη με την χρήση JavaScript. Η ενσωματωση της υπηρεσίας γίνεται με την χρήση ετικετας <script> στο HTML5 κώδικα. Εικόνα 2.8 Geolocation 38

32 2.2 CSS Εισαγωγή Εικόνα 2.9 Λογότυπο CSS Η CSS (Cascading Style Sheets) είναι μια γλώσσα υπολογιστή που ανήκει στην κατηγορία γλωσσών φύλλων στύλ που χρησιμοποείται για την διαμόρφωση ή μορφοποίηση του κώδικα μια γλώσσας σήμανσης (HTML). Αποτελεί ενα χρήσιμο εργαλείο που μας επιτρέπει να αλλάζουμε την εμφανιση και την διάταξη (layout) των ιστοσελίδων, προσφέροντας πληθώρα απο νέες δυνατότητες που δεν ήταν εφικτές με την χρήση της HTML. Η χρήση της CSS πραγματοποείται με την εφαρμογή κανόνων στο περιεχόμενο της HTML,προσφέροντας έναν ποιο δομημένο και ευανάγνωστο κώδικα. Ενα σημαντικό πλεονέκτημα της, είναι παροχή κανόνων που εφαρμόζονται σε ομάδα-ες στοιχείων της HTML και έτσι οι τυχών αλλαγές εφαρμόζονται σε όλη ομάδα και δέν χρειάζεται να πηγαίνουμε σε κάθε στοιχείο ξεχωριστά. Επίπλέον, μας δίνεται η δυνατότητα της χρήσης ενός αρχείου CSS σε πολλαπλες ιστοσελίδες γλυτώνοντας πολλες ώρες συγγραφής κώδικα. Τα αρχεία css φορτώνονται μόνο μια φορά απο τον browser και διατηρούνται καθόλη την διάρκεια της πλοήγησης μειώνοντας παράλληλα τον όγκο των δεδομένων που ένας φυλλομετρητής (browser) καλείται να κατεβάσει. Η σύνδεση ενός αρχείου css επιτυνχάνεται με την χρήση της παρακάτω εντολής στην <head> ετικέτα του HTML κώδικά μας: <link rel="stylesheet" href="css/style.css"> Κανόνες 39

33 Η δομή ενός αρχείου CSS αποτελείται απο έναν αριθμό κανόνων που εργαρμόζονται για να μορφοποιήσουν το περιεχόμενο της ιστοσελίδας. Οι κανόνες αποτελούναι απο 2 μέρη: τον επιλογέα (selector) ο οποίος αφορά στο τι θα μορφοποιηθεί και τις ιδιότητες (properties) οι οποίες αφορούν το πως θα μορφοποιηθεί. Η σύνταξη είναι η εξής: επιλογέας { ιδιότητα1: τιμή1; ιδιότητα2: τιμή2; ιδιότητα3: τιμή3;... } Διαφορά Μεταξύ Ιδιοτήτων & Κλάσεων Πρίν ξεκινήσουμε να αναλύουμε τους κανόνες της CSS είναι σημαντικό να κατανοήσουμε την διαφορά των ιδιοτήτων (ids) και των κλάσεων (Classes). Οπως αναφέραμε οι κανόνες αποτελούνται απο επιλογείς (selectors). Οι επιλογείς προσδιορίζουν το τι θα αλλάζει σε ένα HTML αρχείο. Το περιεχόμενο ενος HTML αρχείου αποτελείται απο ετικέτες (tags) που χρησιμοποιούνται για την δόμηση του περιεχομένου. Αυτές οι ετικέτες (tags) αποτελούν τους επιλογείς (selectors) της CSS, η οποία καλείται για να μορφοποιήση το περιεχόμενο. Οι δυνατότητες όμως των ετικετών είναι περιορισμένες και δεν μπορούν να καλύψουν ολές τις δυνατές κατηγορίες περιεχομένου της οποίες επιθυμούμε να μορφοποιήσουμε. Ετσι, εισάγεται η έννοια των ιδιοτήτων (ids) και κλάσεων (Classes) οι οποίες εχουν ως στόχο να διαφοροποιήσουν ίδιες ετικέτες (tags) μεταξύ τους. Για παράδειγμα, μπορουμε να έχουμε <div class= main content > και <diν class= sidebar content > για να εφαρμόσουμε μεσω CSS διαφορετική μορφοποίηση. Επισης, μπορούμε να έχουμε και <div id= footer > για να ομαδοποιήσουμε μια ετικέτα που έχει ενα χαρακτηριστικό περιεχόμενο. Επομένως, χρησιμοποιούνται ως επιλογείς (selectors) απο την CSS. Παρακάτω παρουσιάζεται η διαφορά μεταξύ τους: Οι ιδιότητες (ID's) είναι μοναδικά: κάθε ετικέτα (tag) μπορει να έχει ΜΟΝΟ ενα id κάθε σελίδα έχει ΜΟΝΟ μια ετκέτα με το συγκεκριμένο id Οι Κλάσεις (Classes) δεν είναι μοναδικές: Πολλές ετικέτες (tags) μπορούν να ανήκουν στην ίδια κλάση Κάθε ετικέτα μπορει να ανήκει σε περισσότερες απο μια κλάσεις Επιλογείς (Selectors) 40

34 * Όταν ο επιλογέας είναι ένας χαρακτήρας αστερίσκου, τότε οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS εφαρμόζονται σε κάθε στοιχείο της σελίδας μας. Όπως είναι κατανοητό, συνήθως δεν είναι και πολύ χρήσιμος επιλογέας από μόνος του, και χρησιμοποιείται κυρίως σε συνδυασμό με άλλους. στοιχείο Όταν ο επιλογέας αποτελείται απλά από το όνομα ενός html tag, τότε οι ιδιότητες που θα γράψουμε σε αυτόν τον κανόνα CSS εφαρμόζονται σε κάθε τέτοιο στοιχείο html. Για παράδειγμα, ο επιλογέας p θα εφαρμοστεί σε οτιδήποτε στη σελίδα μας περιλαμβάνεται εντός των tags <p>...</p>, ο επιλογέας table θα εφαρμοστεί σε όλους τους πίνακες στη σελίδα μας, ο επιλογέας img θα αφορά όλες τις εικόνες στη σελίδα κοκ. Προφανώς όταν θέλουμε να εφαρμόσουμε κάποιες ιδιότητες CSS σε ολόκληρη τη σελίδα, χρησιμοποιούμε ως επιλογέα body μιας και όλο το ορατό τμήμα της σελίδας περιέχεται εντός των tags <body>...</body>..όνομα_κλάσης Όταν ο επιλογέας μας περιλαμβάνει μια τελεία (.) στην αρχή του, τότε ο browser ψάχνει όσα στοιχεία στη σελίδα μας περιλαμβάνουν την ιδιότητα class και εφαρμόζει τις ιδιότητες που θα γράψουμε στον κανόνα CSS αυτό σε οποιοδήποτε στοιχείο περιλαμβάνει την κλάση «όνομα_κλάσης» στην ιδιότητα class του. Φυσικά ως όνομα_κλάσης μπορούμε να γράψουμε οτιδήποτε αποτελείται από γράμματα, αριθμούς, παύλες και χαρακτήρες underscore (_) και να ξεκινάει με γράμμα. Αξίζει να σημειωθεί ότι μπορεί το ίδιο στοιχείο να ανήκει σε περισσότερες από μια κλάσεις, διαχωρισμένες με κενά μέσα στην class html attribute του. Πχ <p class= emphasis bodytext >...</p>. Για παράδειγμα, ο παρακάτω κανόνας CSS:.emphasis { color: red; } θα κάνει κόκκινα τα γράμματα και στο στοιχείο <p class= emphasis>blah blah</p>, και στο στοιχείο <div class= emphasis otherclass >blah blah</div>αλλά όχι στο στοιχείο <h1 class= otherclass >blah blah</h1>. #όνομα_id Όταν ο επιλογέας μας περιλαμβάνει ένα χαρακτήρα δίεσης (#) στην αρχή του, τότε ο browser εφαρμόζει τις ιδιότητες που θα γράψουμε στο στοιχείο το οποίο περιλαμβάνει την ιδιότητα id= όνομα_id. στοιχείο[attribute= value ] Αποτελεί ουσιαστικά μια «επέκταση» του επιλογέα στοιχείο που αναλύθηκε πρώτος. Ο εν λόγω επιλογέας,κάνει τον browser να εφαρμόζει τις ιδιότητες που θα γράψουμε σε αυτόν σε κάθε στοιχείο με tag <στοιχείο> το οποίο επιπροσθέτως έχει την τιμή value στην html ιδιότητα attribute. Παραδείγματος χάριν, ο επιλογέας input[type= submit ] αφορά όλα τα κουμπιά υποβολής φόρμας που υπάρχουν στη σελίδα μας, χωρίς ωστόσο να 41

35 εφαρμόζεται σε άλλα στοιχεία φορμών όπως τα πεδία κειμένου (στα οποία η ιδιότητα type είναι text). Άλλο ένα παράδειγμα: Έστω ότι θέλουμε να μορφοποιήσουμε μόνο όσους πίνακες στη σελίδα μας είναι κεντραρισμένοι. Αν χρησιμοποιούσαμε ως επιλογέα table, τότε οι ιδιότητες που θα γράφαμε σε αυτόν τον επιλογέα θα εφαρμόζονταν σε όλους τους πίνακες ανεξαιρέτως. Ενώ αν χρησιμοποιήσουμε τον επιλογέα table[align= center ] τότε ο κανόνας CSS που θα γράψουμε θα εφαρμοστεί μόνο σε όσους πίνακες έχουν την ιδιότητα align= center Ψευδο-κλάσεις (pseudo-classes) Ορισμένες φορές χρησιμοποιούμε τις λεγόμενες ψευδό κλάσεις (pseudo classes), τα οποία μας επιτρέπουν να επιλέγουμε στοιχεία τα οποία δεν αποτελούν html elements, αλλά κομμάτια τους ή συγκεκριμένες καταστάσεις τους. Ουσιαστικά αποτελούν κάποιες λέξεις κλειδιά που γράφουμε μετά από έναν επιλογέα του τύπου στοιχείο και ξεκινούν με :. a:link Χρησιμοποιείται αποκλειστικά για στοιχεία a (Δηλαδή ως εξής: a:link) και αφορά τους συνδέσμους που ο χρήστης δεν έχει ακόμη επισκεφθεί. a:visited Επίσης χρησιμοποιείται αποκλειστικά για στοιχεία a (Δηλαδή ως εξής: a:visited) και αφορά τους συνδέσμους που ο χρήστης έχει επισκεφθεί. στοιχείο:active Αφορά τα στοιχεία τύπου <στοιχείο> τη στιγμή που ο χρήστης έχει πατημένο το ποντίκι πάνω σε αυτά. Πχ ο επιλογέας a:active εφαρμόζεται σε συνδέσμους την ώρα που ο χρήστης έχει πατημένο το ποντίκι πάνω τους. στοιχείο:hover Από τις πιο συχνά χρησιμοποιούμενες ψευδό κλάσεις. Αφορά τα στοιχεία τύπου <στοιχείο> τη στιγμή που ο χρήστης έχει το δείκτη του ποντικιού πάνω σε κάποιο από αυτά (χωρίς να πατάει κάποιο πλήκτρο). Μπορεί να μας βοηθήσει να δημιουργήσουμε διάφορα όμορφα εφέ, τα οποία παλιότερα ήταν εφικτά μόνο με javascript. στοιχείο:focus Χρησιμοποιείται κυρίως για στοιχεία φορμών και εφαρμόζεται στα στοιχεία τύπου <στοιχείο> που εκείνη τη στιγμή έχουν «focus», παραδείγματος χάριν, ένα πεδίο κειμένου στο οποίο ο χρήστης έκανε κλικ για να εισάγει κείμενο Ψευδο-στοιχεία (pseudo-elements) Ομοίως, τα ψευδο-στοιχεία αποτελούν κάποιες λέξεις κλειδιά που γράφουμε μετά από έναν επιλογέα του τύπου στοιχείο και ξεκινούν με :: στοιχείο:first letter Αφορά το πρώτο γράμμα του κειμένου εντός κάποιου στοιχείου τύπου <στοιχείο>. Το ψευδό στοιχείο αυτό μπορεί να μας βοηθήσει να δημιουργήσουμε αρχιγράμματα. Πχ ο επιλογέας p:first letter αφορά το πρώτο γράμμα κάθε παραγράφου. 42

36 στοιχείο:first line Ψευδό στοιχείο παρόμοιο με το παραπάνω, μόνο που αντί να αφορά μόνο το πρώτο γράμμα του κειμένου μέσα στο στοιχείο τύπου <στοιχείο>, αφορά ολόκληρη την πρώτη γραμμή. στοιχείο::after Ψευδό στοιχείο που χρησιμοποιείται για την εισαγωγή κειμένου μετά απο το το περιεχόμενο που υπάρχει μέσα στο στοιχείο τύπου <στοιχείο>. στοιχείο::before Ψευδό στοιχείο που χρησιμοποιείται για την εισαγωγή κειμένου πρίν απο το το περιεχόμενο που υπάρχει μέσα στο στοιχείο τύπου <στοιχείο>. στοιχείο::selection Ψευδό στοιχείο που χρησιμοποιείται για την εισαγωγή χρώματος γραμματοσειράς και φόντου του κειμένου που υπάρχει μεσα στο στοιχείο τύπου <στοιχείο>, όταν το ποντίκι κάνει <<κλίκ>> επιλογής στο κείμενο Σύνθετοι Επιλογείς (Advanced Selectors) Εκτός απο τους κλασσικούς επιλογείς η CSS μας παρέχει μια σειρά απο σύνθετους επιλογείς που μας επιτρέπουν να απομονώνουμε κείμενο και να δημιουργούμε ενδιαφέρουσες μορφοποιησεις. Παρακάτω παρουσιάζεται μια σειρά απο τους βασικούς σύνθετους επιλογείς: στοιχείο1, στοιχείο2 Χρησιμοποείται όταν θέλουμε να εφαρμόσουμε την ίδια μορφοποίηση σε περισσότερα απο ένα στοιχεία. πχ. a, p, h1 { color: blue; } στοιχείο1 στοιχείο2... στοιχέιοn Χρησιμοποείται για την εφαρμογή μορφοποίησης στο στοιχείοn που είναι <<παιδί>> του στοιχείου(n-1), που είναι <<παιδί>> του στοιχείου(n-2) κ.ο.κ πχ. li a { color: red; } δίνει κόκκινο χρώμα γραμματοσειράς σε όλες τις ετικέτες (tag) a τα οποία ανήκουν στην ετικέτα (tag) li και αποτελούν απογονοί του. στοιχείο1 > στοιχείο2 43

37 Χρησιμοποιείται για την ερφαρμογή μορφοποίησης στο στοιχείο2 το οποίο είναι ο πρώτος απόγονος του στοιχείου1. πχ. <div class='a'> <div> <div>...</div> </div> </div> και εφαρμόσουμε τον κανόνα:.a > div { color:red; } θα εφαρμοστεί ο κανόνας μόνο στο αμέσως επόμενο <div> και όχι στους επόμενους απογόνους. στοιχείο1 + στοιχείο2 Οταν χρησιμοποιείται, η μορφοποίηση εφαρμόζεται μόνο στο πρώτο στοιχείο2 του κάθε στοιχείου1 στο html κώδικα. πχ. li + p { color: red; } δίνει κόκκινο χρώμα γραμματοσειράς στην πρώτη και μόνο παράγραφο p κάθε λίστας li στοιχείο1 ~ στοιχείο2 Οταν χρησιμοποιείται, η μορφοποίηση εφαρμόζεται σε όλα τα στοιχείο2 του κάθε στοιχείου1 στο html κώδικα. πχ. li ~ p { color: red; } δίνει κόκκινο χρώμα γραμματοσειράς σε όλες τις παραγράφους p κάθε λίστας li Ιδιότητες (Properties) color Αφορά το χρώμα του κειμένου, αλλά αν δεν οριστεί χρώμα περιγράμματος (μέσω της ιδιότητας border color), ο browser χρησιμοποιεί αυτό που ορίστηκε στην ιδιότητα color. Τα χρώματα μπορούν να εισαχθούν είτε σε μορφή RGB (πχ color: rgb(255,128,30);), είτε σε μορφή hex (πχ color: #ff801e;) είτε με τη μορφή κάποιου keyword (πχ color:orange;). font size Αφορά το μέγεθος της γραμματοσειράς. Οι τιμές που δέχεται μπορούν να είναι εκφρασμένες σε ένα μεγάλο πλήθος μονάδων μεγέθους, από τις οποίες οι πιο ευρέως διαδεδομένες είναι τα pixels (πχ font-size: 12px;) και οι στιγμές (πχ font-size:10pt). 44

38 font family Η ιδιότητα αυτή μας επιτρέπει να ορίσουμε ένα πλήθος γραμματοσειρών που θα χρησιμοποιηθούν για το κείμενο, κατά σειρά προτίμησης. Ουσιαστικά μέσω αυτής ορίζουμε τη γραμματοσειρά του κειμένου, απλά μας επιτρέπει να ορίσουμε και εναλλακτικές επιλογές, ώστε αν η γραμματοσειρά που ορίσαμε δεν υπάρχει στον υπολογιστή του χρήστη, να μην μας καταστρέψει ο browser την εμφάνιση της σελίδας επιλέγοντας όποια αυτός νομίζει, απλά την επόμενη επιλογή μας. Παράδειγμα χρήσης της ιδιότητας: font-family: Calibri, Trebuchet MS, Verdana, sansserif; font style Σε αντίθεση με αυτό που θα περίμενε κανείς από μια ιδιότητα με αυτό το όνομα, δηλαδή την εφαρμογή πολλών και διαφόρων «εφέ» στο κείμενο, στην πραγματικότητα αφορά μόνο την περίπτωση όπου το κείμενο θα είναι πλάγιο. Για άλλα εφέ, χρησιμοποιούνται άλλες ιδιότητες, οι οποίες θα εξεταστούν παρακάτω. Οι πιθανές τιμές της είναι normal, italic και oblique. font weight Αφορά το «βάρος» της γραμματοσειράς και στην πράξη χρησιμοποιείται για να ορίσει αν το κείμενο μας θα είναι έντονο ή όχι, μιας και οι περισσότερες γραμματοσειρές που χρησιμοποιούνται στο web διατίθενται μόνο σε δύο βάρη: Κανονικό και έντονο, σε αντίθεση με πιο εξειδικευμένες γραμματοσειρές που χρησιμοποιούνται από γραφίστες, οι οποίες πολλές φορές διατίθενται σε διάφορα βάρη. Οπότε οι τιμές που συνήθως χρησιμοποιούνται σε αυτή την ιδιότητα είναι οι normal και bold, η λειτουργία των οποίων είναι προφανής. text decoration Μας επιτρέπει να εφαρμόσουμε στο κείμενο μας διάφορα εφέ, συμπεριλαμβανόμενης και της υπογράμμισης. Οι τιμές που δέχεται είναι οι εξής: none: Καμία διακόσμηση underline: Υπογράμμιση overline: Γραμμή πάνω από το κείμενο (ουσιαστικά το αντίθετο της υπογράμμισης) line through: Διαγράμμιση Οι παραπάνω τιμές μπορούν να χρησιμοποιηθούν και συνδυαστικά, όταν επιθυμούμε να εφαρμόσουμε πάνω από ένα τέτοιο εφέ στο κείμενο μας. Παραδείγματος χάριν textdecoration: underline overline; text align Μας επιτρέπει να καθορίσουμε τη στοίχιση του κειμένου μας. Οι πιθανές τιμές είναι left, center, right και justify. font 45

39 Μας επιτρέπει να καθορίσουμε αρκετές ιδιότητες κειμένου με μια μόνο ιδιότητα (συγκεκριμένα τις font size, font family, font weight και font style από όσες αναφέρθηκαν παραπάνω, καθώς και κάποιες άλλες που δεν αναφέρθηκαν). Αν κάποια ιδιότητα δεν συμπεριληφθεί, ο browser θα «υποθέσει» την προεπιλεγμένη τιμή της. background color Χρησιμοποιείται για να ορίσει χρώμα φόντου στα στοιχεία που αφορά ο επιλογέας. Το χρώμα μπορεί να γραφεί σε οποιαδήποτε από τις μορφές που περιγράφηκαν για την ιδιότητα color. background image Χρησιμοποιείται για να ορίσει μια εικόνα φόντου. background position Η ιδιότητα αυτή μας επιτρέπει να ορίσουμε τη θέση που θα τοποθετηθεί η εικόνα φόντου που ορίσαμε με την ιδιότητα background image τόσο κάθετα, όσο και οριζόντια. Συνήθως ως τιμές της χρησιμοποιούμε κάποια keywords, τα οποία είναι τα εξής: left, center, right : όσον αφορά την οριζόντια θέση της εικόνας top, center, bottom : όσον αφορά την κάθετη θέση της εικόνας border color Ρυθμίζει το χρώμα περιγράμματος. Το χρώμα μπορεί να γραφεί σε οποιαδήποτε από τις μορφές που περιγράφηκαν για την ιδιότητα color. Αν δεν οριστεί αυτή η ιδιότητα, χρησιμοποιείται το χρώμα που ορίστηκε στην ιδιότητα color. border width Ρυθμίζει το πάχος του περιγράμματος σε κάποια από τις μονάδες μέτρησης που μπορούν να χρησιμοποιηθούν στο CSS, συνηθέστερα σε pixels. Παράδειγμα: border width: 10px; border style Ορίζει το στυλ του περιγράμματος. Οι τιμές που χρησιμοποιούνται συνήθως για την ιδιότητα αυτή είναι οι εξής: solid: «Συμπαγές» περίγραμμα, δηλαδή χωρίς κάποια διακόσμηση, μια ενιαία γραμμή. dashed: Περίγραμμα που αποτελείται από παύλες. dotted: Περίγραμμα που αποτελείται από τελείες. Αξίζει να σημειωθεί ότι τα αποτελέσματα της χρήσης της τιμής αυτής διαφέρουν ελαφρώς ανά τους browsers. Για παράδειγμα ο Internet Explorer εμφανίζει τα dotted περιγράμματα ως αποτελούμενα από μικρούς κύκλους, ενώ ο Mozilla Firefox τα εμφανίζει ως αποτελούμενα από μικρά τετράγωνα. double: Σαν την τιμή solid, μόνο που δημιουργεί δύο περιγράμματα, η απόσταση και το πάχος των οποίων δεν μπορούν να ρυθμιστούν χωριστά 46

40 αλλά ρυθμίζονται αυτόματα ώστε το πάχος τους να είναι συνολικά όσο η τιμή που ορίσαμε στην ιδιότητα border width. Συνήθως χρησιμοποιείται σε συνδυασμό με πάχος περιγράμματος 3px, για το οποίο δίνει ένα αρκετά καλαίσθητο αποτέλεσμα. border Η ιδιότητα αυτή αποτελεί ουσιαστικά συντόμευση για να ορίσουμε με μία μόνο ιδιότητα όλες τις παραπάνω (όπως είναι η ιδιότητα font για τα χαρακτηριστικά κειμένου). Παραδείγματα χρήσης: border: 10px solid #999999; border: 2px dashed; padding Ορίζει το κενό που θα υπάρχει μεταξύ των ορίων ενός στοιχείου και των περιεχομένων του. Είναι πολύ σημαντικό να ορίζουμε padding σε στοιχεία στα οποία έχουμε ορίσει κάποιο περίγραμμα, ώστε να μην «κολλάνε» τα περιεχόμενα τους με το περίγραμμα, κάτι που φαίνεται ιδιαίτερα άσχημο και ερασιτεχνικό. Επίσης, καλό είναι να μην είστε ιδιαίτερα φειδωλοί με το padding. Περισσότερο padding δίνει πιο επαγγελματική εμφάνιση (μέχρι κάποιων ορίων φυσικά). Για να ορίσουμε διαφορετικό padding ανά πλευρά, μπορούμε ομοίως με το border, είτε να χρησιμοποιήσουμε τις ιδιότητες padding top, padding right, padding bottom, padding left, είτε να εισάγουμε και τις τέσσερις τιμές στην ιδιότητα padding με τη σειρά [top] [right] [bottom] [left], είτε [top,bottom] [right,left]. Παραδείγματα: padding: 8px; padding: 2px 6px; padding: 0px 6px 6px 6px; margin Το αντίθετο ουσιαστικά του padding. Ορίζει τον χώρο μεταξύ των ορίων ενός στοιχείου και όσων το περιβάλλουν. Είναι ιδιαίτερα σημαντικό να ορίζουμε margin σε εικόνες, ώστε να έχουν απόσταση από τα περιεχόμενα τους, μιας και είναι ιδιαίτερα αντιαισθητικό να «κολλάνε» με το κείμενο. Φυσικά και εδώ μπορούμε να χρησιμοποιήσουμε είτε τις ιδιότητες margin top, margin right, margin bottom, margin left για να ορίσουμε διαφορετικές τιμές margin ανά πλευρά, είτε να εισάγουμε τις τέσσερις διαφορετικές τιμές margin με τη σειρά [top] [right] [bottom] [left], ή [top,bottom] [right,left]. Παραδείγματα: margin: 4px; margin: 2px 4px; margin: 0px 8px 2px 2px; width, height Όπως είναι προφανές, οι δύο αυτές ιδιότητες ορίζουν το πλάτος και το ύψος ενός στοιχείου, είτε σε ποσοστό (το οποίο υπολογίζεται βάσει του στοιχείου που το περιέχει), είτε σε κάποια μονάδα μήκους. Παραδείγματα: width: 100px; width: 90%; height: 300px; height: 100%; 47

41 Υπάρχουν και οι ιδιότητες min width, min height, max width, max height οι οποίες ορίζουν τα όρια στα οποία μπορούν να κινούνται οι διαστάσεις ενός στοιχείου, όταν δεν θέλουμε να ορίσουμε συγκεκριμένες διαστάσεις. float H ιδιότητα αυτή είναι ανεκτίμητης χρησιμότητας στο όταν χρησιμοποιούμε CSS και για το layout της σελίδας μας, αν και είναι η δυσκολότερη στην κατανόηση από όσες αναφέρθηκαν. Δέχεται τις τιμές right, left και none και επιτρέπει τα στοιχεία που περιβάλλουν το στοιχείο εκείνο στο οποίο εφαρμόζουμε την ιδιότητα αυτή να «ρέουν» τριγύρω του. Μια συνηθισμένη χρήση της ιδιότητας είναι στις εικόνες που συνοδεύουν ένα άρθρο. Πολλές φορές χρησιμοποιούμε μετά από floated στοιχεία κάποιο στοιχείο (συνήθως ένα άδειο div) με την ιδιότητα clear: both; για να «καθαρίσει» τα floats για το μετέπειτα περιεχόμενο Εισαγωγή στην CSS3 Εικόνα 2.10 Λογότυπο CSS3 Η CSS3 αποτελεί την πιο πρόσφατη έκδοση της CSS (Cascading Style Sheets). Προσφέρει πληθώρα απο νέα χαρακτηριστικά και δυνατότητες μορφοποίσης που πριν δεν ήταν δυνατόν να υλοποιηθούν χωρίς την χρήση JavaScript ή άλλων γλωσσών προγραμματισμού. Ενα απο τα σημαντικότερα πλεονεκτήματά της είναι η δυνατότητα δημιουργίας responsible ιστοσελίδων, ιστοσελίδων που προσαρμόζονται σε διαφορετικά περιβάλλοντα με την συγραφή μιας και μόνο σελίδας. Αυτό έχει ως αποτέλεσμα να μειώνεται εσθητά ο χρόνος κατασκευής καθώς παράγεται λιγότερος και πιο κατανοητός κώδικας. Επιπλεόν, στην CSS3 μας δίνεται η δυνατότητα δημιουργίας 3D γραφικών που εώς τώρα εμφανιζόντουσαν σαν εικόνες και την εφαρμογή δίαφορων <<εφέ>> δημιουργόντας ενα πιο ευχάριστο περιβάλλον πλοήγησης Media Queries Οπως αναφέραμε και μια απο τις σημαντικότερες καινοτομίες της CSS3 είναι η κατασκευή responsible ιστοσελίδων. Αυτό επιτυγχάνεται με την χρήση των Media queries, όπου μας δίνεται η δυνατότητα να προσαρμόζουμε την ιστοσελίδα στο μέγεθος του περιβάλλοντος που βρισκόμαστε χωρίς να αλλάζουμε το περιεχόμενο του CSS3 αρχείου που συγγράψαμε. 48

42 Η δομή των media queries not only mediatype and (media feature) { CSS code; } Η σύνδεση τους στο HTML κώδικα πραγματοποιείται ως εξής: Να επισημάνουμε πως έχουμε την δυνατότητα να χρησιμοποιήσουμε διαφορετικά αρχεία CSS για κάθε συσκευή. <link rel= stylesheet href= mystylesheet.css > media= mediatype and not only (media feature) Παρακάτω δίνονται πραδείγματα της χρήσης των media queries: Max-width Ο ακόλουθος κώδικας εφαρμόζεται για συσκευές με μέγιστη γωνία θέασης screen and (max-width: 600px) {.class { background: #ccc; } } Παρατηρούμε πως μέσα στα media queries εισάγουμε κώδικα για να προσαρμόσουμε κατάλληλα τα στοιχεία στο νέο περιβάλλον. Min-width Ο ακόλουθος κώδικας εφαρμόζεται για συσκευές με γωνία θέασης μεγαλύτερη των screen and (min-width: 600px) {.class { background: #666; } } Συνδιασμός των media queries (multiple screen and (min-width: 600px) and (max-width: 900px) {.class { background: #333; } } Transitions & Animations Χρησιμοποιούνται για να εφαρμόσουμε διάφορα εφέ στο περιεχόμενο της ιστοσελίδας. 49

43 Συσκεκριμένα τα animations εισάγουν την έννοια μια σειρά κανόνων τα οποία καλούνται απο την ιδιότητα animation για την εφαρμογή των διάφορων εφέ. Εικόνα 2.11 Παράδειγμα χρήσης Animations Τα transistions εφαρμόζουν διάφορα εφέ για ένα συγκεκριμένο χρονικό διάστημα που ορίζουμε. Εικόνα 2.12 Παράδειγμα χρήσης Transistion Border Radius Η νέα ιδιότητα αυτή μας δίνει την δυνατότητα να δημιουργούμε εύκολα στρογγυλεμένες γωνίες στα στοιχεία του HTML κωδικά μας χωρίς την χρήση εικόνων και πολλαπλών ετικετών (tags). Επιπλέον, μπορούμε να δημιουγήσουμε και διάφορα αλλα σχήματα ακόμα και κύκλους. -moz-border-radius: 50px; -webkit-border-radius: 50px; 50

44 border-radius: 50px; Εικόνα 2.13 Παράδειγμα χρήσης border-radius Text & Box Shadow Χρησιμοποιείται για την εφαρμογή σκίασης τόσο σε κέιμενο με την χρήση της ιδιότητας text-shadow καθώς και επίσης και σε άλλα στοιχεία όπως εικόνες, κουμπιά κ.α μέσω στης ιδιότητας box-shadow. Εικόνα 2.14 Παράδειγμα χρήσης text-shadow 51

45 Εικόνα 2.15 Παράδειγμα χρήσης box-shadow Φόντο Με πολλαπλές Εικόνες Η ιδιότητα αυτή μας επιτρέπει να ορίζουμε ως φόντο περισσότερες απο μία εικόνες. Εικόνα 2.16 Παράδειγμα χρήσης multiple backgrounds 52

46 Font Face face μας δίνει την δυνατότητα να δώσουμε μια ξεχωριστή εμφάνιση στην γραμματοσειρά του κειμένου. Το μόνο που έχουμε να κάνουμε είναι να κατεβάσουμε και να φορτώσουμε την γραμματοσειρά που επιθυμούμε. Εικόνα 2.17 Παράδειγμα face Gradients Μια ακόμη νέα καινοτομία της CSS3 είναι η δυνατότητα μίξης των χρωμμάτων δυναμικά μέσω της ιδιότητας gradient. Ακόμα με την χρήση διαφορων ιδιοτήτων (to right, to left, to top right) της gradient μπορούμε να ορίσουμε και την φορά της μίξης. Εικόνα 2.18 Παράδειγμα χρήσης gradient 2.3 PHP Εισαγωγή 53

47 Εικόνα 2.19 Λογότυπο PHP Η PHP (Hypertext Preprocessor) είναι μια γλώσσα προγραμματισμού που σχεδιάστηκε για τη δημιουργία δυναμικών και διαδραστικών εφαρμογών στο δυαδίκτυο. Είναι μια server-side (εκτελείτε στον διακομιστή) scripting γλώσσα που γράφεται συνήθως πλαισιωμένη από HTML, για μορφοποίηση των αποτελεσμάτων. Αντίθετα από μια συνηθισμένη HTML σελίδα η σελίδα PHP δεν στέλνεται άμεσα σε έναν πελάτη (client), αντ' αυτού πρώτα αναλύεται και μετά αποστέλλεται το παραγόμενο αποτέλεσμα. Τα στοιχεία HTML στον πηγαίο κώδικα μένουν ως έχουν, αλλά ο PHP κώδικας ερμηνεύεται και εκτελείται. Ο κώδικας PHP μπορεί να θέσει ερωτήματα σε βάσεις δεδομένων, να δημιουργήσει εικόνες, να διαβάσει και να γράψει αρχεία, να συνδεθεί με απομακρυσμένους υπολογιστές, κ.ο.κ. Σε γενικές γραμμές οι δυνατότητες που μας δίνει είναι απεριόριστες. Πλεονεκτήματα: Μπορεί να τρέξει σε διαφορετικές πλατφόρμες (Windows, Linux, Unix, κλπ.) Είναι συμβατή με του περισσότερους διακομιστές (Apache, IIS, κλπ.) Είναι δωρεάν και ανοικτού κώδικα. Είναι εύκολη ως γλώσσα για να τη μάθει κάποιος και αποδοτική όταν τρέχει σε ένα διακομιστή. Διαθέτει μεγάλο αριθμό βιβλιοθηκών που της δίνει πολλές δυνατότητες. 2.4 Bootstrap Εισαγωγή 54

48 Εικόνα 2.20 Λογότυπο Bootstrap Το Bootstrap είναι ένα front end Framework που χρησιμοποιείται για γρήγορη και ευκολότερη ανάπτυξη ιστοσελίδων. Περιλαμβάνει πληθώρα απο υλοποιημένα στοιχεία χρησιμοποιώντας HTML,CSS και JavaScript όπως μενού πλοήγησης, κουμπιά κ.α. Και υποστηρίζεται απο όλους τους φυλλομετρητές (browsers). Το Bootstrap αναπτύχθηκε από τους Mark Otto και Jacob Thornton στα μέσα του 2010 για λογαριασμό του Twitter ως ένα Framework για την εξασφάληση μιας ενιαίας αισθητικής στις διάφορες λειτουργίες του. Το Αύγουστο του 2011 εκδόθηκε σαν έργο ανοικτού κώδικα (open source project) και το φεβρουάριο του 2011 έγινε το πιο δημοφιλές έργο στο GitHub Εγκατάσταση Το Bootstrap διαθέτει διάφορους τρόπους χρήσης ανάλογα με επίπεδο του χρήστη. Μπορεί να χρησιμοποιήση τα ηδη έτοιμα στοιχεία που παρέχει το bootstrap έιτε να χρησιμοποιήση τα κατάλληλα tags στο κώδικα HTML για την μορφοποίηση της ιστοσελίδας.επίσης, το Bootstrap είναι full customazable το οποίο δίνει την δυνατότητα στον χρήστη να παραμετροποιήση και να δημιουργήση δικία του έκδοση. Η εγκατάσταση του Bootstrap μπορει να πραγματοποιηθεί με δύο τρόπους, είτε κατεβάζοντας τις precompiled και minified εκδόσεις των CSS, JavaScript και fonts είτε με την χρήση του Bootstrap CDN. Εικόνα 2.21 Bootstrap CDN 55

49 Tο Bootstrap είναι διαθέσιμο για κατέβασμα σε δύο μορφές που αποτελούνται απο φακέλους και αρχεία σε compiled και minified εκδόσεις. Παρακάτω παρουσιάζεται η δομή των αρχείων τα οποία μπορούν να χρησιμοποιηθόυν σαν drop-in σε οποιοδήποτε έργο. Εικόνα 2.22 Δομή αρχείων Bootstrap Βασικό Πρότυπο (Basic Template) Για τους χρήστες που διαθέτουν τις βασικές γνώσεις HTML το Bootstrap παρέχει ένα βασικό πρότυπο με το οποίο ο χρήστης μπορει να ξεκινήση την κατασκευή της ιστοσελίδας. Εικόνα 2.23 Βασικό Πρότυπο Bootstrap 56

50 Να επισημάνουμε πως με το bootstrap 3 υπάρχει η απο default προσέγγιση του mobile first. Για να εξασφαλιστεί η σωστή χρήση των τεχνολογιών όπως το touch zooming εισάγουμε την παρακάτω γραμμή κώδικα στην <head> ετικέτα του HTML κωδικά μας. Βλεπε (Εικόνα 2.21) <meta name="viewport" content="width=device-width, initial-scale=1"> Επίσης, στο Bootstrap για την χρήση όλων των JavaScript plug-ins καθιστάται αναγκαία η χρήση της JQuery βιβλιοθήκης. Βλεπε (Εικόνα 2.21) Containers Ο κώδικας του Bootstrap πρέπει να περικλείεται απο μια ετικέτα (tag) τύπου <div> που να ανήκει στην κλάση με όνομα container. Δίνονται 2 επιλογές για containers: Χρησιμοποιούμε την κλαση.container για ένα responsible grid με συγκεκριμένο μέγιστο πλάτος ανεξάρτητο απο την ανάλυση της οθόνης: <div class="container">... </div> ή εναλλακτικά την κλαση.container-fluid για πλήρες ανάπτυξη σε όλο το πλάτος ανάλογα με την κάθε οθόνη: <div class="container">... </div> Πλέγμα (Grid) To bootstrap εξορισμού χρησιμοποεί πλέγμα (grid) 12 στηλών (12 column grid) με προκαθορισμένες κλάσεις για εύκολη διαχείριση του layout. Οι κανόνες που χρησιμοποιούμε είναι οι εξής: Οι σειρές (rows) πρέπει να είναι μέσα σ έναν container για πιάνουν το σωστό χώρο μέσα σ αυτούς με τα σωστά κενά (padding). Χρησιμοποιούμε τις σειρές για να έχουμε οριζόντιες ομάδες (groups) απο στήλες (columns). To περιεχόμενο μας θα πρέπει να είναι μέσα στις στήλες και μόνο οι στήλες θα πρέπει να είναι παιδιά (children) των γραμμών (rows). Υπάρχουν προκαθορισμένες κλάσεις όπως.row,.col-xs-4 για γρήγορες δημιουργίες grid layout. Οι στήλες δημιουργούν τα κένα (πατούρες) με την ιδιότητα απο css - padding. Το padding είναι αρνητικό στην πρώτη και τελευταία στήλη πάντα για να στοιχίζεται σωστά σε σχέση με το περιεχόμενο μέσα στο grid που δηλώνετε απο την κλάση.row 57

51 Οι στήλες του κάθε grid ορίζονται μέσα προκαθορισμένες κλάσεις που αντιπροσωπεύουν και τα μεγέθη - πλάτος που μπορεί να έχει η κάθε στήλη. Έτσι π.χ μια στήλη με πλάτος 3 στηλών την καλούμε :.col-xs-3 Αν στο άθροισμα κάθε γραμμής έχουμε πάνω απο 12 στήλες οι έξτρα στήλες πέφτουν απο κάτω στο grid. Το pattern col-device-colnum αντιπροσωπεύει τις εξής προκαθορισμένες κλάσεις: device για την ανάλυση οθόνης συσκευής που έχει πρόσβαση στη σελίδα μας κάθε φορά π.χ lg->large, xs->extra small κτλ ενώ το colnum είναι το μέγεθος (απο 1 έως και 12) Media Queries Για την κατασκευή responsible ιστοσελίδων το Bootstrap κάνει χρήση των media queries λαμβάνοντας υπόψιν όλα τα πιθανά περιβάλλοντα πλοήγησης. Εικόνα 2.24 Bootstrap Media Queries Επίσης μπορούμε να έχουμε και τα παρακάτω media queries για περισσότερο έλεγχο με την παράμετρο max-width προκειμένου να αποφύγουμε fallback σε μικρότερες αναλύσεις κλάσεων και ιδιοτήτων που δεν χρειάζονται. Εικόνα 2.25 Bootstrap Media Queries Max-width Επιλογές Πλέγματος (Grid Options) Οι επιλογές του Grid φαίνονται στον ακόλουθο πίνακα: 58

52 Εικόνα 2.26 Επιλογές Πλέγματος στο Bootstrap Παράδειγμα Stacked-to-Horizontal Χρησιμοποιώντας τα παρακάτω set.col-md-* απο κλάσεις μπορούμε να δημιουργήσουμε ένα βασικό grid που ξεκινάει stacked - στοιβαγμένο σε smartphones και tablets και ανοίγει ανάλογα σε μεγάλες και πολύ μεγάλες συσκευές. Εικόνα 2.27 Πίνακας.col-md-* 59

53 Εικόνα 2.28 Παράδειγμα Stacked-to-Horizontal Παράδειγμα Mobile & Desktop Για να στοιβάζονται οι κλάσεις η μία πάνω απο την άλλη σε μικρότερες συσκευές μπορούμε να χρησιμοποιήσουμε την κλάση.col-xs-* ή και την κλάση.col-md-* στοχεύοντας έτσι μικρότερες συσκευές. Εικόνα 2.29 Πίνακας.col-xs-* Εικόνα 2.30 Παράδειγμα Mobile & Desktop 60

54 Παράδειγμα Mobile & Tablet & Desktop Κάνουμε χρήση της κλάσης.col-sm-* για μικρές (small devices) συσκευές με τον ακόλουθο τρόπο: Εικόνα 2.31 Πίνακας.col-sm-* Εικόνα 2.32 Παράδειγμα Mobile,Desktop & Tablet Μεταθέσεις Στηλών Μπορούμε να έχουμε μεταθέσεις των στηλών μας στο κενό χέρο (αριστερά - δεξία) ανάλογα με το σχεδιασμό μας χρησιμοποιώντας τις προκαθορισμένες κλάσεις.col-mdoffset-* Με αυτές τις κλάσεις μπορούμε να έχουμε αριστερό ή δεξί margin μιας στήλης σε μέγεθος * στηλών. Έτσι π.χ η κλάση.col-md-offset-4 μετακινεί με την ιδιότητα css margin αριστερά την στήλη κατά 4 στήλες. Εικόνα 2.33 Πίνακας.col-md-offset* 61

55 Εικόνα 2.34 Παράδειγμα Μετάθεσεις Στηλών Εμφώλευση Στηλών Για να μπορέσουμε να εμφωλεύσουμε στήλες μέσα σε στήλες πάνω στο default μας πλέγμα χρειάζεται να ξαναορίσουμε μια div ετικέτα (tag) που να ανήκει στην κλάση.row και κατόπιν να προσθέσουμε το εμφωλευμένο μας πλέγμα (grid) με τις στήλες μας κανονικά. Έτσι αν π.χ στο πλέγμα μας υπάρχει ήδη μια στήλη με πλάτος 9 στηλών και θέλουμε να προσθέσουμε μέσα ένα άλλο πλέγμα (εμφωλευμένο) το οποίο θα έχει πλάτος 8 και 4 στηλών αντίστοιχα (είναι σημαντικό το άθροισμα των εσωτερικών στηλών να μας δίνει πάντα 12 στο σύνολο, για να μην σπάει το πλέγμα). To σκούρο μώβ του πίνακα είναι το εμφωλευμένο πλέγμα. Εικόνα 2.35 Πίνακας Εμφώλευσης Στηλών Εικόνα 2.36 Παράδειγμα Εμφώλευσης Στηλών 62

56 Διάταξη Στηλών Επίσης, μας δίνεται η δυνατότητα να αλλάξουμε την αρχική διάταξη των στηλών του πλέγματος χρησιμοποιώντας τις κλάσεις.col-md-push-* και.col-md-pull-* Εικόνα 2.37 Πίνακας Διάταξης Στηλών Εικόνα 2.38 Παράδειγμα Διάταξης Στηλών Font Awesome Το Font Awesome είναι μια βιβλιοθήκη CSS η οποία αρχικά δυμιουργήθηκε για το Bootstrap αλλα μπορει να χρησιμοποιηθεί απο οποιοδήποτε Framework. Προσφέρει πληθώρα απο εικονίδια τα οποια μπορούν να χρησιμοποιηθούν άμεσα με την χρήση κατάλληλων ετικετών. Αποτελεί έργο ανοικτού κώδικα (open source project) και είναι full customazable. Με το Font Awesome CDΝ μπορούμε εύκολα να χρησιμοποιήσουμε το Font Awesome χωρίς να κατεβάσουμε κανένα αρχείο. Τα αρχεία διατίθονται και για κατέβασμα σε περίπτωση που ο χρήστης επιθυμεί να παραμετροποιήση τις ιδιότητές του. Για να χρησιμοποιήσουμε το Font Awesome, αρκεί να δώσουμε το κατάλληλο όνομα κλάσης στην ετικέτα HTML : Εικόνα 2.39 Παράδειγμα Font Awesome 63

57 2.5 JavaScript Εισαγωγή Εικόνα 2.40 Λογότυπο JavaScript Η JavaScript είναι μια γλώσσα σεναρίου (script lanquage) που χρησιμοποιείται για να δημιουργήσουμε διαδραστικές (interactive) ιστοσελίδες. Είναι μια ερμηνευόμενη γλώσσα που σημαίνει πως τα scripts εκτελούνται χωρίς να έχει προηγηθεί μεταγλώττιση του κώδικα και υποστηρίζεται απο όλους τους δημοφιλής φυλλομετρητές (browsers). Αρχικά χρησιμοποιήθηκε για προγραμματισμό απο την πλευρά του πελάτη (client) ως client-side γλώσσα προγραμματισμού που σημαίνει πως η σύνταξη του κώδικα και η παραγωγή του HTML περιεχομένου δεν πραγματοποιείται στον διακομηστη (server) αλλά στο πρόγραμμα περιήγησης των επισκεπτών. Τελευταία όμως με την ανάπτυξη νέων εικονικών μηχανών όπως Node.js έχουν κάνει δημοφιλή την JavaScript και για ανάπτυξη εφαρμογών ιστου απο την πλευρά του διακομιστή (server-side). Η JavaScript αποτελεί ένα ισχυρό προγραμματιστικό εργαλείο εύκολο στην σύνταξη και στην εκμάθησή του καθώς δεν υπάρχουν ειδικές ρουτίνες ή προαπαιτούμενες δομές και οι εντολές εκτελούνται με την σειρά που γράφονται. Προσφέρει πολλές δυνατότητες όπως : Εισαγωγή δυναμικού περιεχομένου στην HTML ιστοσελίδα μας Μπορεί να διαβάσει και να αλλάξει τα περιεχόμενα ενός HTML στοιχείου Εκτέλεση κάποιου script όταν συμβαίνει ένα γεγονός (event) πχ. Με ένα κλικ του ποντικιού σε κάποιο στοιχείο HTML Μπορουμε να την χρησιμοποιήσουμε για να επικυρώσουμε δεδομένα μιας φόρμας (validate) πρωτού να υποβληθούν στον server γλυτώνοντας και τον server απο επιπλέον έλεγχο Μπορούμε να εντοπίσουμε τον φυλλομετρητή (browser) του επισκέπτη και ανάλογα με τον φυλλομετρητή (browser) να φορτώσουμε την αντίστοιχη σελίδα που είναι φτιαγμένη για αυτόν. Μπορούμε να δημιουργήσουμε cookies να αποθηκεύουμε και να λαμβάνουμε πληροφορίες στον υπολογιστή του επισκέπτη. 64

58 2.5.2 Εισαγωγή JavaScript Σε HTML Η JavaScript μας δίνει 2 τρόπους με τους οποίους μπορούμε να εισάγουμε κώδικα στο HTML αρχείο. Ο ένας τρόπος είναι να εισάγουμε τον κώδικα JavaScript απευθείας (Εσωτερική σύνδεση) στις ετικέτες <body> και <head> του HTML αρχείου μας. Για να εισάγουμε κώδικα JavaScript στο HTML αρχείο χρησιμοποιούμε την ετικέτα <script> και μέσα στην ετικέτα αυτη χρησιμοποιούμε το όρισμα type για να ορίσουμε την scripting γλώσσα που θα χρησιμοποιήσουμε. Εικόνα 2.41 Παράδειγμα Εσωτερικής Σύνδεσης JavaScript Ο Δεύτερος και προτιμότερος τρόπος είναι να εισάγουμε τον κώδικα μέσω εξωτερικού αρχείου που θα περιέχει όλο τον κώδικα JavaScript. Σκοπός μας είναι να παρέχουμε ένα πιο λιτό και εύκολα κατανοητό κώδικα ο οποίος μπορει να χρησιμοποιηθεί σε περισσότερες απο μία ιστοσελίδες. Τα εξωτερικά αρχεία JavaScript πρέπει να έχουν κατάληξη.js και ο κώδικας τους δεν περικλείεται απο την ετικέτα <script> 65

59 Εικόνα 2.42 Παράδειγμα Εξωτερικής Σύνδεσης JavaScript Δηλώσεις (Statements) Η Javascript αποτελείται απο μία σειρά δηλώσεων (statements) που θα εκτελεστούν στον φυλλομετρητή (browser). Ενα javascript statement είναι μια εντολή προς τον browser, η οποία του λέει τι να κάνει. Ιδιαίτερη προσοχή πρεπει να δώσουμε στον τρόπο που γράφουμε statements, δημιουργούμε ή καλούμε μεταβλητές, αντικείμενα και συναρτήσεις καθώς η JavaScript είναι case sensitive. Για παράδειγμα η συνάρτηση function() και Function αποτελούν δυο διαφορετικές συναρτήσεις. Το παρακάτω statement λέει στον Browser να τυπώσει Hello Dolly μέσα στο στοιχείο της HTML με id demo. Εικόνα 2.43 Παράδειγμα Χρήσης Statement Στην JavaScript Μεταβλητές Οι Μεταβλητές όπως και σε όλες τις γλώσσες προγραμματισμού χρησιμοποιούνται για να αποθηκεύσουν πληροφορία. Για να δηλώσουμε μεταβλητές στην JavaScript χρησιμοποιούμε την λέξη var ακολουθούμενη από το όνομα της μεταβλητής και την τιμή της (προαιρετικά). πχ. var x = 1; 66

60 Οι κανόνες για τα ονόματα των μεταβλητών είναι οι εξής: Μπορούν να περιέχουν γράμματα,αριθμούς, ακόμα και σύμβολα όπως το $ και το _ (underscore) Πρέπει αν αρχίζουν με ένα γράμμα ή με τον χαρακτήρα _ (underscore) ή με τον χαρακτήρα $ (dollar). Οι μεταβλητές είναι case sensitive (y και Υ 2 διαφορετικές μεταβλητές) Δεν μπορούν να χρησιμοποιηθούν οι δεσμευμένες λέξεις της JavaScript Συναρτήσεις Η συνάρτηση είναι ένα μπλόκ κώδικα που υλοποιεί μία συγκεκριμένη εργασία. Περιλαμβάνει κώδικα ο οποιός εκτελείτε είτε απο μία κλήση της συνάρτησης είτε απο ένα γεγονός (event). Εικόνα 2.44 Παράδειγμα Χρήσης Συνάρτησης Στην JavaScript Jquery Εισαγωγή Εικόνα 2.45 Λογότυπο JQuery Η JQuery είναι βιβλιοθήκη της JavaScript που δημιουργήθηκε με σκοπό να απλοποιήση την συγγραφή κώδικα JavaScript. Προσφέρει πληθώρα απο έτοιμες συναρτήσεις και plug ins που διευκολύνουν στο χειρισμό των γεγονότων (events), των στοιχείων HTML και των διάφορων εφέ προσφέροντας παράλληλα έναν πιο κατανοητό και λιτό κώδικα. Επίσης έχει απλοποιήση σε μεγάλο βαθμο τις κλήσεις AJAX καθιστώντας την κατασκευή δυναμικών ιστοσελίδων πιο εύκολη απο ποτέ. Σημαντικό πλεονέκτημα της αποτελεί το μικρό του μέγεθος και η δυνατότητα να υλοποιούμε πολλές λειτουργίες με την χρήση λίγου κώδικα. Αυτό την καθιστά ένα απαραίτητο εργαλείο με το οποιό μπορουμε να κατασκευάσουμε γρήγορα και 67

61 αποτελεσματικά τις δίαφορες λειτουργίες μιας ιστοσελίδας. Αποτελεί έργο ανοικτού κώδικα (open source project) και υποστηρίζεται από τους σύγχρονους φυλλομετρητές (browsers). Ενας τρόπος για να εισάγουμε την JQuery, έιναι χρησιμοποιώντας το JQuery CDN στην <head> ετικέτα της HTML. Εικόνα 2.46 JQuery CDN Εναλλακτικά, μπορούμε να κατεβάσουμε την βιβλιοθήκη jquery και να την εισάγουμε χρησιμοποιώντας την <script> ετικέτα. Εικόνα 2.47 Εγκατάσταση JQuery Σύνταξη Η Λογική πίσω απο την σύνταξη της JQuery είναι η επιλογή (select) ενός HTML στοιχείου και η εφραμογή μιας δράσης (action) στο στοιχείο αυτό. Η βασική σύνταξή μιάς Jquery εντολής είναι η εξής : $(selector).action() όπου $(selector) δηλώνει τον επιλογέα (selector), δηλαδη το στοιχείο του HTML στο οποίο θέλουμε να εφαρμόσουμε την δράση. action() δηλώνει το είδος της δράσης που θα εφαρμοστεί Πριν εφαρμόσουμε οποιαδήποτε JQuery εντολή πρέπει πάντα να ελέγχουμε αν έχει φορτώσει η ιστοσελίδα, ώστε να μπορέσουμε να χειριστούμε τα κατάλληλα στοιχεία της. Για να ελέγξουμε άν η σελίδα έχει φορτωθεί χρησιμοποιούμε τον χαραρακτήρα δολαρίου $ πρίν την συγγραφή της συνάρτησης. Εικόνα 2.48 Παράδειγμα Συνάρτησης Jquery 68

62 2.5.7 WOW.js Εικόνα 2.49 Βιβλιοθήκη WOW.js Το WOW.js έιναι ένα JavaScript πρόσθετο (plug-in) που χρησιμποιείται για την εφαρμογή διάφορων εφέ σταδικακά καθώς κάνουμε scroll-down στην ιστοσελίδα. Για την εφαρμογή των εφέ κάνει χρήση της CSS3 βιβλιοθήκης Animate.css. Κύρια πλεονεκτήματά του είναι το μικρό του μέγεθος σε σχέση με άλλα JavaScript plug-ins και η γρήγορη και εύκολη εγκατάσταση. Για να εγκαταστήσουμε το WOW.js : 1. Κατεβάζουμε και εισάγουμε την βιβλιοθήκη Animate.css στο HTML αρχείο Εικόνα 2.50 Εισαγωγή Βιβλιοθήκης Animate.css 2. Εισάγουμε και ενεργοποιούμε το WOW.js Εικόνα 2.51 Εισαγωγή WOW.js Για να χρησιμοποιήσουμε τα διάφορα εφέ, αρκεί να δώσουμε το όνομα κλασης wow ακολοθούμενο και την κατάλληλη κλάση της βιβλιοθήκης Animate.css στο στοιχείο HTML που θέλουμε να εφαρμόσουμε το εφέ. 69

63 Εικόνα 2.52 Παράδειγμα Εφαρμογής Εφέ WOW.js Επίσης, με την χρήση κτάλληλων μεταβλητών μας δίνεται η δυνατότητα να αλλάξουμε τις ιδιότητες των εφέ. Χρησιμοποιούμε: data-wow-duration: ορίζει την διάρκεια του εφέ data-wow-delay: ορίζει το χρονικό διάστημα πρίν αρχίση η εφαρμογή του εφέ data-wow-offset: ορίζει την απόσταση σε σχέση με τον browser πριν αρχίση η εφαρμογή του εφέ data-wow-iteration: ορίζει το πόσες φορές θα εκτελεστεί το εφέ Εικόνα 2.53 Παράδειγμα Εφαρμογής Ιδιοτήτων Εφέ WOW.js 2.6 Adobe Flash Εισαγωγή Εικόνα 2.54 Λογότυπο Adobe Flash 70

64 Το Adobe Flash είναι μια πλατφόρμα πολυμέσων που χρησιμοποιείται για την προσθήκη animation, video και διαδραστικότητας σε ιστοσελίδες. Επίσης χρησιμοποιείται και για την δημιουργία διαφημίσεων και παιχνιδιών. Δημιουργήθηκε απο την εταιρεία Macromedia πλεον μέρος της Adobe Systems. Το Adobe Flash εκμεταλλεύεται vectors και raster graphics προσφέροντας την δυνατότητα για τη δημιουργία animation σε κείμενα, σε σχέδια αλλά και σε εικόνες. Επιπλέον, μπορεί να παίρνει εισόδους από το ποντίκι, το πληκτρολόγιο, το μικρόφωνο αλλά και από camera. Στο Adobe Flash περιέχεται η αντικειμενοστραφής γλώσσα προγραμματισμού ActionScript δίνοντας πολλες δυνατότητες καθως και ευελιξία στην δημιουργία εφαρμογών. Οι εφαρμογές πολυμέσων που αναπτύσσονται μπορούν να αναπαραχθούν σε διαφορετικά λειτουργικά συστήματα υπολογιστών και συσκευές που χρησιμοποιούν το Adobe Flash Player καθώς επίσης σε κινητά τηλέφωνα και άλλες ηλεκτρονικές με τη χρήση του Flash Lite. Τα αρχεία του Adobe Flash είναι της μορφής Shockwave Flash (.swf) τα οποία μπορούν, είτε να χρησιμοποιηθούν ενσωματωμένα σε μια ιστοσελίδα, είτε να αναπαραχθούν από μόνα τους Ενσωμάτωση Flash στην Ιστοσελίδα Τα αρχεία του Adobe Flash μπορούν να ενσωματωθούν στην ιστοσελίδα κάνοντας χρήση της ετικέτας <object> όπως παρουσιάζεται στην παρακάτω εικόνα : Εικόνα 2.55 Ενσωμάτωση αρχείων Adobe Flash 71

65 ΚΕΦΑΛΑΙΟ 3: Υλοποίηση Ιστοσελίδας 73

66 ΥΛΟΠΟΙΗΣΗ ΙΣΤΟΣΕΛΙΔΑΣ 3.1 Εισαγωγή Η υλοποίηση της ιστοσελίδας πραγματοποιήθηκε με την χρήση προτύπου (template), στο οποίο εφαρμόστηκαν οι κατάλληλες τροποποιήσεις για να το φέρουμε στην μορφή που θέλαμε. Η παρούσα εργασία κάνει επίσης χρήση διαφόρων βιβλιοθήκων javascript καθώς και framework (bootstrap) τα οποία απλοποιόυν και διευκολύνουν την υλοποίηση της ιστοσελίδας. Το πρότυπο που χρησιμοποιήθηκε αποτελεί πνευματική ιδιοκτησία της tooplate το οποίο προσφέρεται δωρεάν για κατέβασμα Εικόνα 3.1 Πρότυπο της Tooplate 3.2 Δομή Το πρότυπο αυτό αποτελείται απο 6 ενότητες σελίδες : Home Biography Scientific Work 74

67 Media Productions Education Contact 3.3 Γιατι Στατική; Πρίν προχωρήσουμε στην περιγραφή της υλοποίησης της σελίδας καθιστάται αναγκαίο να επισημάνουμε τους λόγους για τους οποίους επιλέξαμε να δημιουγήσουμε στατική σελίδα. Η καινούργια τάση στην κατασκευή σελίδων είναι η χρήση των CMS όπως Joomla Wordpress κ.α που προσφέρουν πολλά πλεονεκτήματα όπως αναφερθήκαμε εκτενώς στο προηγούμενο κεφάλαιο. Με την χρήση των CMS δημιουργούμε δυναμικές σελίδες δηλαδή σελίδες που αποθηκεύουν το περιεχόμενο τους σε βάση δεδομένων η οποία ανακτάται κάθε φορα που φορτώνονται οι σελίδες. Εδώ όμως δημιουργούνται πολλά ερωτήματα ως προς: Την Ασφάλεια των δεδομένων στην Βάση δεδομένων Το κόστος της φιλοξενίας της σελίδας μιας και έχουμε μια βάση δεδομένων Την αξιοπιστία του σερβερ στο οποίο βρίσκεται η βάση μας Την συμβατότητα σε περίπτωση μεταφοράς της σελίδας απο έναν σερβερ στον αλλον μιας και παρουσιάζονται προβλήμα μεταξύ διαφορετικών εκδόσεων CMS Την συμβατότητα σε περίπτωση κωδικοποιηθεί εκ νέου η ιστοσελίδα Ταχύτητα μιας και το περιεχόμενο ανακτάται κάθε φορα που φοτώνεται η σελίδα αλλαγής CMS όπου πρέπει να Πρίν αποφασίσουμε πως θα κινηθούμε καλό είναι να ξέρουμε τούς στόχους που έχουμε καθώς και για ποια χρήση προορίζεται για να επιλέξουμε το κατάλληλο μοντέλο. Στόχος της παρούσας εργασίας είναι η δημιουργία μιας διαδραστικής γρήγορης σελίδας όπου μας ενδιαφέρει η ασφάλεια και ακεραιότητα των δεδομένων. Επιπλέον το κόστος φιλοξενίας ήταν σημαντικός παράγοντας. Επομένως, καθίστάται κατανοητός ο λόγος για τον οποίο επιλέξαμε να δημιουργήσουμε στατική σελίδα. 3.4 Εισαγωγή Καρτέλας Προήγησης Η Ιστοσελίδα μας περιλαμβάνει μια μπάρα πλοήγησης η οπόια βοηθά τόσο στην καλύτερη εμπειρία ξενάγησης όσο και για την ομαδοποίηση του περιεχομένου σε θεματικές ενότητες. Η μπάρα πλοήγησης αποτελείται απο δύο ομάδες καρτελών, της απλές και τις σύνθετες (dropdown) οι οποίες περιέχουν ένα υπομενού (dropdown menu). Για να εισάγουμε μια απλή καρτελα κάνουμε την χρήση της ετικέτας <a> η εποία περικλείεται απο μια ετικέτα τύπου <li>. Εικόνα 3.2 Εισαγωγή Απλής Καρτέλας 75

68 Η εισαγωγή σύνθετης καρτέλας γίνεται με παρόμοιο τρόπο δίνοντας στην ετικέτα <li> το όνομα κλάσης dropdown ώστε να μπορέσουμε να ενσωματώσουμε το υπομενού που επιθυμούμε. Εικόνα 3.3 Εισαγωγή Σύνθετης Καρτέλας 3.5 Εισαγωγή Εικόνας Στο Carousel Η Ενότητα Home αποτελεί την αρχική σελίδα της Ιστοσελίδας η οποία περιλαμβάνει το Carousel με τις Εικόνες που θέλουμε να εμφανίζονται όταν επισκεπτόμαστε την ιστοσελίδα. Το Carousel που χρησιμοποιήσαμε είναι το bxslider. Για να προσθέσυμε μια εικόνα στο slider αρκεί να κάνουμε χρήση της ετικέτας <img>, δίνοντας ως παράμετρο την εικόνα που επιθυμούμε, μέσα σε μια ετικέτα <li> (λίστα) 76

69 Εικόνα 3.4 Εισαγωγή Εικόνας Στο Carousel 3.6 Εισαγωγή Video Η ενσωμάτωση video αποτελεί ευκολή υπόθεση κάνοντας χρήση της βιβλιοθήκης afterglow.js Για να εισάγουμε video στην ιστοσελίδα κάνουμε την χρήση της ετικέτας <video> προσδίδοντας το όνομα κλάσης afterglow. Επίσης, χρησιμοποιούμε την παράμετρο της βιββλιοθήκης data-autoresize="fit" ώστε να προσαρμόζεται δυναμικά το βίντεο στην κάθε μεταβολή μεγέθους της ιστοσελίδας. Επιπλέον η χρήση της παραμέτρου poster προσδίδει ένα thumbnail, μιας εικόνας που εμφανίζεται στο video πριν πατηθεί το play. Εικόνα 3.5 Εισαγωγή Video 3.7 Εισαγωγή Εικόνας Στο Photo Tour Tο photo tour έχει δημιουργηθεί κάνοντας χρήση της βιβλιοθήκης material-photogallery.js το οποίο μας δίνει την δυνατότητα της zoom-in προβολής των φοτογραφιών. Για να εισάγουμε μια εικόνα στο photo tour αρκεί να κάνουμε χρήση της ετικέτας <img>, δίνοντας ως παράμετρο την τοποθεσία της εικόνας, μέσα σε μια ετικέτα <div> με όνομα κλάσης m-p-g thumbs. Η παράμετρος data-full δείχνει την εικόνα όταν κάνουμε zoom-in στην εικόνα. Εικόνα 3.6 Εισαγωγή Εικόνας Στο Photo Tour 3.8 Εισαγωγή Βιβλίων 77

70 Για την παρουσίαση των βιβλίων κάναμε χρήση ενος κινούμενου carousel το οποίο μας προσδίδει έναν πιο μοντέρνο και ευχάριστο οπτικά τρόπο προβολής. Η βιβλιοθήκη που χρησιμοποιήθηκε είναι η owl.carousel.js Για να εισάγουμε ενα βιβλίο στο carousel αρκεί να κάνουμε χρήση της ετικέτας <img> μεσα σε μια ετικέτα τύπου <div> με όνομα κλάσης owl-carousel Εικόνα 3.7 Εισαγωγή Βιβλίου στο owl-carousel 3.9 Εισαγωγή Google Map Στόχος της χρήσης του χάρτη είναι να δίνεται η δυνατότητα στο επισκέπτη να μπορεί να εντοπίζει την τοποθεσία που επιθυμούμε για τη καλύτερη και ορθότερη επικοινωνία. Η ενσωμάτωση χαρτών αποτελεί πλεον εύκολη υπόθεση μιας και η google απλοποεί την διαδικασία με την χρήση της ετικέτας <iframe>. Το πρώτο βήμα είναι να αναζητήσουμε την τοποθεσία Στην συνέχεια επιλέγουμε την επιλογή κοινή χρήση ή ενσωμάτωση χάρτη Εικόνα 3.8 Ενσωμάτωση Χάρτη Google Map Τέλος επιλέγουμε την καρτέλα Ενσωμάτωση Χάρτη όπου εμφανίζεται η ετικέτα <iframe> και την προσθέτουμε στον κώδικα της σελίδας Html. 78

71 Εικόνα 3.9 Ενσωμάτωση Χάρτη Ετικέτα <iframe> 79