Τμήμα Μηχανικών Πληροφορικής. Πτυχιακή Εργασία ΔΗΜΙΟΥΡΓΙΑ ΔΥΝΑΜΙΚΟΥ WEBSITE ΓΙΑ ΜΙΑ ΚΟΙΝΩΝΙΚΗ ΥΠΗΡΕΣΙΑ ΜΕ ΧΡΗΣΗ HTML5

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Τμήμα Μηχανικών Πληροφορικής. Πτυχιακή Εργασία ΔΗΜΙΟΥΡΓΙΑ ΔΥΝΑΜΙΚΟΥ WEBSITE ΓΙΑ ΜΙΑ ΚΟΙΝΩΝΙΚΗ ΥΠΗΡΕΣΙΑ ΜΕ ΧΡΗΣΗ HTML5"

Transcript

1 Τμήμα Μηχανικών Πληροφορικής Πτυχιακή Εργασία ΔΗΜΙΟΥΡΓΙΑ ΔΥΝΑΜΙΚΟΥ WEBSITE ΓΙΑ ΜΙΑ ΚΟΙΝΩΝΙΚΗ ΥΠΗΡΕΣΙΑ ΜΕ ΧΡΗΣΗ HTML5 Επιβλέπων καθηγητής Δρ. Παπαδάκης Νικόλαος Φοιτήτρια Αφροδίτη Γανέλλη Ηράκλειο Απρίλιος

2 Εγκρίθηκε από την τριμελή εξεταστική επιτροπή την Ν. Παπαδάκης Επίκουρος καθηγητής 2

3 3

4 Ευχαριστίες Θέλω να ευχαριστήσω την οικογένεια και κυρίως την μητέρα μου για την επιμονή της να σπουδάσω. Τους πραγματικούς φίλους για τις ωραίες στιγμές. Τα μέλη του εκπαιδευτικού προσωπικού του τμήματος για την προσφορά γνώσεων. Τέλος τον κύριο Παπαδάκη Νίκο, για την ευκαιρία να δουλέψω πάνω στο αντικείμενο που με ενδιαφέρει. Αφροδίτη Γανέλλη Απρίλιος

5 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ Abstract 9 Σύνοψη 9 1 Εισαγωγή Περίληψη Κίνητρο για την διεξαγωγή της εργασίας Σκοπός και στόχοι εργασίας Δομή εργασίας 10 2 ΜΕΘΟΔΟΛΟΓΙΑ ΥΛΟΠΟΙΗΣΗΣ Στατικές ιστοσελίδες Δυναμικές ιστοσελίδες με βάσεις δεδομένων Διαφορά δυναμικής και στατικής ιστοσελίδας Λογισμικό ανοικτού κώδικα FrontEnd BACKEND Τεχνολογίες που χρησιμοποιήθηκαν JavaScript Μοντέλο εκτέλεσης Javascript και Java Bootstrap Bootstrap ιστορία Λόγοι που επιλέξαμε το Bootstrap 22 3 Σχεδιασμός για το πάνω μέρος του site Επιλογή text editor Εγκατάσταση Βootstrap 24 Βήμα 2 ο 24 Βήμα 3 ο 25 Βήμα 4 ο 25 Βήμα 5 ο Bασικά στοιχεία της HTML Πως λειτουργούνε οι ετικέτες Eπιλογή αρχικού template Ρύθμιση CSS μονοπατιών Επιλογή δεύτερου template Διαφορές των ετικετών Δομές δέντρων σε HTML αρχεία 40 5

6 3.9 Τι είναι οι λίστες 41 Ενημέρωση h1 επικεφαλίδας: 41 Ενημέρωση παραγράφου: 41 Ευθυγράμμιση κειμένου για το div με την κλάση jumbotron 42 Αλλαγή χρώματος κουμπιού σε κόκκινο Τρόποι με τους οποίους συμπεριλαμβάνουμε την CC Εξειδίκευση (Specificity) Συμπεριλαμβάνουμε Αrvo γραμματοσειρά Ιδιότητες χαρακτήρων και γραμματοσειρές Τι είναι το Box Model και πως λειτουργεί Πλάτος και ύψος ενός html στοιχείου 48 4 Άμεση και σχετική διευθυνσιοδότηση Εισαγωγή εικόνων Τι είναι Grid system και που χρησιμεύει Διαφορές μεταξύ απόλυτης και σχετικής διεύθυνσης URL Google Drive και Google Forms Φόρμα συμπλήρωσης Άμεση διευθυνσιοδότηση Έμμεση διευθυνσιοδότηση 59 5 Σχεδιασμός για το κάτω μέρος του site Η χρησιμότητα του Font-awesome Η μορφοποίηση του τμήματος Get Ιnvolved Δημιουργία του τμήματος Who We Are Τοποθέτηση εικόνας του Τμήματος Μηχανικών Πληροφορικής Συμπεράσματα 70 7 BΙΒΛΙΟΓΡΑΦΙΑ 71 ΠΙΝΑΚΑΣ ΕΙΚΟΝΩΝ Εικόνα 1 Στατική ιστοσελίδα μεταφέρεται στον διακομιστή στην μορφή που είναι αποθηκευμένη Εικόνα 2 Δυναμική ιστοσελίδα. Ο χρήστης αλληλεπιδρά με τον εξυπηρετητή ιστοσελίδων Εικόνα 3 Λογότυπο λογισμικού ανοιχτού κώδικα Εικόνα 4 Διαφορά frontend με backend Εικόνα 5 Η HTML είναι η δομή της σελίδας και η CSS η 6

7 μορφοποίησή της Εικόνα 6 Το λογότυπο της Javascript Εικόνα 7 Το Bootstrap είναι ένα πανίσχυρο εργαλείο για γρήγορη ανάπτυξη ιστοσελίδων Εικόνα 8 Επιλογή text editor Εικόνα 9 Αρχική σελίδα Bootstrap Εικόνα 10 Kατέβασμα Βootstrap Εικόνα 11 O κατάλογος my-site στον text editor Εικόνα 12 Δημιουργία index.html Εικόνα 13 O ρόλος της ετικέτας link Εικόνα 14 Παραδείγματα με βασικά template Εικόνα 15 Επιλογή αρχικού template Εικόνα 16 O κώδικας του Jumbotron στο index.html Εικόνα 17 Με διπλό κλικ πάνω στο index βλέπουμε το site στον browser Εικόνα 18 Τι βλέπουμε στην οθόνη όταν δεν έχουνε φτιαχτεί τα css μονοπάτια Εικόνα 19 Δημιουργία του css Εικόνα 20 Διπλό κλικ πάνω στο jumbotron.css για να πάρω τον κώδικα Εικόνα 21 Eπιλογή δεύτερου template Εικόνα 22 Εύρεση κώδικα που ατιστοιχεί στην μπάρα περιήγησης Εικόνα 23 Το site με την νέα γραμμή περιήγησης Εικόνα 24 Αλλαγές στην κλάση jumbotron Εικόνα 25 Επιλογή Arvo γραμματοσειράς Εικόνα 26 Τρόπος λειτουργίας του Box Model Εικόνα 27 Το site μετά από την εισαγωγή εικόνων Εικόνα 28 Το Grid system του Βootstrap Εικόνα 29 Συμπλήρωση φόρμας στο Google Drive Εικόνα 30 Eπιλογή Google Drive Εικόνα 31 Δημιουργία Google account Εικόνα 32 Δημιουργία φόρμας Εικόνα 33 Επιλογή τίτλου και θέματος Εικόνα 34 Eαν δεν υπάρχουνε άλλες ερωτήσεις επιλέγουμε Done Εικόνα 35 Χρησιμοποίηση του link στο site μας Εικόνα 36 Προσθήκη εικονιδίων στο κάτω μέρος του site Εικόνα 37 Η μορφοποίηση του τμήματος Get Involved Εικόνα 38 Σχεδιασμός πάνω μέρος site Εικόνα 39Το site με την προσθήκη εικόνων Εικόνα 40 Το WHO WE ARE κομμάτι του site

8 Εικόνα 41 To GET ΙNVOLVED τμήμα του site

9 Abstract The rapid spread of the Internet has led to a corresponding increase in websites, where beyond the typical website is provided as a large number of novel applications for creation. This work deals with the creation of a dynamic website, covering all steps from selecting appropriate technologies up to the writing of the code, with a detailed presentation of the development process and decisions had to be taken at every step. Σύνοψη Η ραγδαία εξάπλωση του διαδικτύου έχει οδηγήσει σε μία ανάλογη αύξηση των ιστοσελίδων, όπου πέρα από τα τυπικά website παρέχεται και ένας μεγάλος αριθμός πρωτότυπων εφαρμογών για την δημιουργία τους. Αυτή η εργασία ασχολείται με την δημιουργία μίας δυναμικής ιστοσελίδας, καλύπτοντας όλα τα βήματα από την επιλογή των κατάλληλων τεχνολογιών μέχρι και την συγγραφή του κώδικα, με αναλυτική παρουσίαση της διαδικασίας ανάπτυξης και των αποφάσεων που χρειάστηκε να ληφθούν σε κάθε βήμα. 1 Εισαγωγή 1.1 Περίληψη Σε αυτή την εργασία θα παρουσιάσουμε την δημιουργία ενός δυναμικού site χρησιμοποιώντας το Bootstrap και Html5. Θα αναλύσουμε διεξοδικά όλα τα βήματα από την επιλογή των κατάλληλων τεχνολογιών μέχρι και την συγγραφή του κώδικα. Τέλος παρουσιάζονται τα συμπεράσματά μας σχετικά με τις δημοφιλέστερες τεχνολογίες που χρησιμοποιούνται σε τέτοιου είδους εφαρμογές. 1.2 Κίνητρο για την διεξαγωγή της εργασίας Ο κυριότερος στόχος είναι η δημιουργία ενός δυναμικού website από έναν μη κερδοσκοπικό οργανισμό που ασχολείται με θέματα κακοποίησης. Oι επισκέπτες θα μπορούν να πλοηγηθούν και να βρουν 9

10 πληροφορίες και υποστηρικτικό υλικό για τις δράσεις του συλλόγου. Το διαδίκτυο αναμφισβήτητα παίζει κυρίαρχο ρόλο πλέον στη ζωή μας. Η επιθυμία για την κατασκευή ιστοσελίδων δημιουργήθηκε μαζί με την ανάγκη προβολής σε ένα μεγαλύτερο από το τοπικό κοινό,προσφέροντας ευκαιρίες σε όλους να παρουσιάσουν το αντικείμενο επιθυμούν στον παγκόσμιο ιστό. Οι ιστοσελίδες είναι η επαναστατικότερη μέθοδος προβολής στην εποχή της τεχνολογίας που διανύουμε. Ο απώτερος σκοπός αυτής της εργασίας είναι η εκμάθηση και εξοικείωση με την ΗTML5. Έτσι ώστε να αποκτηθούν τα απαραίτητα εφόδια για την ανάπτυξη οποιασδήποτε ιστοσελίδας μέσω αυτού. Επίσης, λόγω του ότι η ΗTML5 συνδέεται και εξαρτάται άμεσα με άλλες τεχνολογίες και εργαλεία, αποκομίσθηκαν γνώσεις πάνω σε αυτές (CSS, JavaScript,Bootstrap). 1.3 Σκοπός και στόχοι εργασίας Όλα τα είδη των ιστοσελίδων έχουν έναν λόγο ύπαρξης και συγκεκριμένους στόχους. Τα ερωτήματα στα οποία πρέπει να απαντήσουμε είναι: ποιος είναι ο λόγος ύπαρξης του website μας, ποια θα είναι η χρησιμότητα της και ποιους στόχος θέλει να επιτύχει. Για να κατασκευάσουμε μια ιστοσελίδα ξεκινάμε σχεδιάζοντας το πλάνο της με βάση το τι είδους ιστοσελίδα θέλουμε να δημιουργήσουμε. Μετά επικεντρωνόμαστε στην κατασκευή των περιεχομένων της, ακολούθως στην αρχική σελίδα και, τέλος, κάνουμε αποσφαλμάτωση (debug) της ιστοσελίδας και ελέγχουμε αν όλα δουλεύουν σωστά πριν την δημοσίευσή της. Αν ακολουθηθούν τα παραπάνω βήματα θα έχουμε σχεδιάσει το περιεχόμενο που θα υποστηρίζει τους στόχους της μη κερδοσκοπικής εταιρίας, τους χρήστες και το ίδιο το website. 1.4 Δομή εργασίας Στο δεύτερο κεφάλαιο της εργασίας παρουσιάζουμε τις τεχνολογίες που χρησιμοποιήσαμε με κάποια σύντομα στοιχεία για την 10

11 ιστορία τους και τις δυνατότητές τους. Στο τρίτο κεφάλαιο δείχνουμε την εγκατάσταση του Bootstrap,τα βασικά στοιχεία της HTML και πως συνδέεται με την CSS.Καθώς και του τρόπους με τους οποίους μπορούμε να μορφοποιήσουμε τα html στοιχεία. Στο τέταρτο κεφάλαιο γίνεται αναλυτική αναφορά για άμεση και έμμεση διευθυνσιοδότηση. Ρυθμίζονται τα CSS μονοπάτια. Δημιουργείται φόρμα Google. Στο πέμπτο κεφάλαιο γίνεται ο σχεδιασμός του κάτω μέρους του site.στο έκτο κεφάλαιο είναι τα συμπεράσματα που βγάλαμε από τν χρήση Βootstrap και HTML5. Στο έβδομο κεφάλαιο έχουμε την βιβλιογραφία και τις πηγές διαδικτύου που χρησιμοποίηθηκαν για την υλοποίηση αυτής της εργασίας. 2 ΜΕΘΟΔΟΛΟΓΙΑ ΥΛΟΠΟΙΗΣΗΣ Οι δύο μεγάλες κατηγορίες ιστοσελίδων είναι οι στατικές (static web site) και οι δυναμικές (dynamic web site). Όσον αφορά την όψη εμφάνισή τους, δεν έχουν μεγάλες διαφορές μεταξύ τους, αλλά όσον αφορά την λειτουργία και τις δυνατότητές τους, οι διαφορές είναι πολλές και ουσιαστικές. 2.1 Στατικές ιστοσελίδες Οι στατικές ιστοσελίδες είναι ουσιαστικά απλά ηλεκτρονικά "έγγραφα". Μπορούν να περιέχουν κείμενα, φωτογραφίες, συνδέσμους, αρχεία για, κινούμενα σχέδια (animated graphics). Είναι κατάλληλες κυρίως για την δημιουργία "μόνιμων/ στατικών παρουσιάσεων", όπου δεν υπάρχει συχνά η ανάγκη να τροποποιείται το περιεχόμενό τους. Δηλαδή, θα μπορούσε να χρησιμοποιηθεί μια στατική ιστοσελίδα για την γενική παρουσίαση μιας επιχείρησης και των προϊόντων ή υπηρεσιών της. Ο χαρακτηρισμός "στατική", δεν σημαίνει δεν μπορεί να έχει κινούμενα γραφικά. Σημαίνει ότι το περιεχόμενο της κάθε σελίδας είναι σταθερό και συγκεκριμένο. Πρόκειται δηλαδή για σταθερά ηλεκτρονικά έγγραφα. 11

12 Εικόνα 1 Στατική ιστοσελίδα μεταφέρεται στον διακομιστή στην μορφή που είναι αποθηκευμένη Το κύριο μειονέκτημά τους είναι ότι δεν είναι πρακτική/βολική η χρήση τους όταν χρειάζεται το περιεχόμενο της ιστοσελίδας να αλλάζει συχνά, π.χ. τουλάχιστον μία φορά την εβδομάδα να προστίθεται κάποιο άρθρο, ή να αλλάζουν τα προϊόντα κτλ. Αυτό συμβαίνει γιατί για να τροποποιηθεί μια στατική ιστοσελίδα, πρέπει να γίνουν επεμβάσεις απευθείας πάνω στην ιστοσελίδα, με κάποιο σχετικό πρόγραμμα (html editor), μια διαδικασία δηλαδή όπως το να σβήνεις και να γράφεις σε ένα τετράδιο, που όμως χρειάζεται μια σχετική εμπειρία. 2.2 Δυναμικές ιστοσελίδες με βάσεις δεδομένων Οι δυναμικές ιστοσελίδες, μπορεί στην εμφάνιση, σε πολλές περιπτώσεις, να μην έχουν μεγάλη διαφορά με τις στατικές, όμως οι δυνατότητές είναι πολύ περισσότερες, από πολλές πλευρές, καθώς στην περίπτωση αυτή ουσιαστικά πρόκειται για μία εφαρμογή (πρόγραμμα), και όχι ένα απλό ηλεκτρονικό έγγραφο. Συνήθως, οι δυναμικές ιστοσελίδες, χρησιμοποιούν κάποια βάση δεδομένων (database), όπου αποθηκεύουν πληροφορίες και απ' όπου αντλούν το περιεχόμενό τους, ανάλογα με το τι ζητάει ο χρήστης επισκέπτης σε κάθε του "κλικ". Η χρήση των βάσεων δεδομένων, είναι αυτή που επιτρέπει την εύκολη προσθαφαίρεση περιεχομένου στις δυναμικές ιστοσελίδες, καθώς δεν απαιτείται να επεξεργάζεται κανείς κάθε φορά την ίδια την ιστοσελίδα, αλλά απλά να διαχειρίζεται έμμεσα το περιεχόμενο στην βάση δεδομένων και οι υπόλοιπες διαδικασίες γίνονται αυτοματοποιημένα από τον "μηχανισμό" της ιστοσελίδας. 12

13 Εικόνα 2 Δυναμική ιστοσελίδα. Ο χρήστης αλληλεπιδρά με τον εξυπηρετητή ιστοσελίδων. Για την εύκολη διαχείριση του περιεχομένου σε μία δυναμική ιστοσελίδα, υπάρχει πρόσθετα στην ιστοσελίδα ένας εύχρηστος μηχανισμός "CMS" (Content Managment System), μέσω του οποίου η προσθαφαίρεση περιεχομένου μπορεί να γίνει ακόμη και από κάποιον αρχάριο. Φυσικά, η "περιοχή διαχείρισης" της ιστοσελίδας, προστατεύεται με κωδικό πρόσβασης (password), και δεν μπορούν να εισέλθουν σε αυτή οι επισκέπτες της ιστοσελίδας. 2.3 Διαφορά δυναμικής και στατικής ιστοσελίδας Γενικά, αυτό που προσφέρουν οι δυναμικές ιστοσελίδες, είναι μεγαλύτερη αλληλεπίδραση του χρήστη με την σελίδα π.χ. να προσθέτει τα σχόλια του στην σελίδα, αλλά και πολλές ευκολίες στον διαχειριστή του περιεχομένου της ιστοσελίδας π.χ. τον ιδιοκτήτη της σελίδας. Πάντως το γεγονός ότι μια δυναμική ιστοσελίδα προσφέρει περισσότερες δυνατότητες, δεν σημαίνει ότι αυτές είναι απαραίτητες σε όλους, δηλαδή σε αρκετές περιπτώσεις, μία στατική ιστοσελίδα μπορεί να καλύπτει πλήρως τις ανάγκες μιας συνοπτικής παρουσίασης. Από πλευράς κόστους, η στατική ιστοσελίδα είθισται να είναι η φτηνή επιλογή, καθώς είναι πιο απλή η κατασκευή της, ενώ οι δυναμικές ιστοσελίδες λόγω της πολυπλοκότητας τους κοστίζουν ακριβότερα και αυτό είναι λογικό τουλάχιστον όταν γίνονται κατά παραγγελία. Υπάρχει βέβαια και η περίπτωση υλοποίησης μιας δυναμικής ιστοσελίδας με την χρήση κάποιας open source εφαρμογής (CMS) η οποία διατίθεται δωρεάν μέσω του internet και σε αυτήν την περίπτωση η κατασκευή της ιστοσελίδας μπορεί να έχει μηδενικό κόστος (αν γίνει self-service) ή να υπάρξει κάποια χρέωση (η τελική τιμή μιας ιστοσελίδας είναι υποκειμενική υπόθεση) αν η εγκατάσταση και η τυχόν 13

14 παραμετροποίηση της δωρεάν εφαρμογής ανατεθεί σε κάποια εταιρεία. 2.4 Λογισμικό ανοικτού κώδικα Στον χώρο της πληροφορικής και των ηλεκτρονικών υπολογιστών, με τον όρο λογισμικό ανοικτού κώδικα (αγγλ.: Open Source Software, OSS) εννοείται λογισμικό του οποίου ο πηγαίος κώδικας διατίθεται με κάποιον τρόπο ελεύθερα σε όσους ζητούν να τον εξετάσουν. Κατά καιρούς έχουν εμφανιστεί αρκετές διαφορετικές άδειες χρήσης σχεδιασμένες να συνοδεύουν λογισμικό ανοικτού κώδικα. Μερικές από αυτές επιτρέπουν στους χρήστες και να τροποποιήσουν τον κώδικα ή και να τον αξιοποιήσουν σε άλλες εφαρμογές. Εικόνα 3 Λογότυπο λογισμικού ανοιχτού κώδικα Το λογισμικό ανοικτού κώδικα δεν σημαίνει απαραιτήτως δωρεάν λογισμικό, ούτε Ελεύθερο Λογισμικό σύμφωνα με τον ορισμό που δίνει στο Ελεύθερο Λογισμικό το Ίδρυμα Ελεύθερου Λογισμικού, αλλά αναφέρεται μόνο στο γεγονός πως επιτρέπεται σε κάθε χρήστη να εξετάσει και να χρησιμοποιήσει τη γνώση και τις δυνατότητες που προσφέρει ο παρεχόμενος πηγαίος κώδικας. Στην πράξη, τα περισσότερα προγράμματα ανοιχτού κώδικα παρέχονται δωρεάν και μπορούν να χαρακτηριστούν ελεύθερα. 2.5 FrontEnd Όταν συζητάμε για το frontend, μιλάμε για το τμήμα του ιστού που μπορείτε να δείτε και να αλληλεπιδράσετε. Το frontend συνήθως αποτελείται από δύο μέρη: το σχεδιασμό και την ανάπτυξη frontend. Στο παρελθόν όταν κάποιοι συζητούσαν για την ανάπτυξη 14

15 συνήθως αναφέρονταν στο backend, αλλά τα τελευταία χρόνια έχει υπάρξει μια πραγματική ανάγκη για διαφοροποίηση μεταξύ των σχεδιαστών που εργάστηκαν αυστηρά στο Photoshop και εκείνων που γράφουν κώδικα HTML και CSS. Τα πράγματα μπερδεύονται μάλιστα ακόμη περισσότερο, όταν οι σχεδιαστές διέσχισαν τις γραμμές του σχεδιασμού και άρχισαν να εργάζονται με την Javascript και την jquery. Έτσι τώρα, όταν συζητάμε για τον όρο σχεδιασμός ιστοσελίδων, μιλάμε για εκείνους που εργάζονται με το Photoshop και το Fireworks, καθώς και εκείνους που χρησιμοποιούν κώδικα HTML, CSS, JavaScript, jquery κτλ. Ό, τι βλέπετε, στο διαδίκτυο είναι ένας συνδυασμός HTML, CSS, JavaScript, τα οποία ελέγχονται από το πρόγραμμα περιήγησης (browser) του υπολογιστή σας. Αυτά περιλαμβάνουν πράγματα όπως γραμματοσειρές, drop-down μενού, κουμπιά, transitions, sliders, φόρμες επικοινωνίας, κλπ. Για να γίνουν όλα αυτά πραγματικότητα και να αποθηκεύουν οι πληροφορίες που έχετε βάλει στα στοιχεία frontend, χρειαζόμαστε την τεχνολογία που θα τα κάνει εφικτά το backend. Εικόνα 4 Διαφορά frontend με backend 2.6 BACKEND Το backend αποτελείται συνήθως από τρία μέρη: ένα διακομιστή 15

16 (server), μια εφαρμογή (application), και την βάση δεδομένων (database). Αν πχ κλείσετε μια πτήση ή αγοράσετε εισιτήρια συναυλιών, ανοίγετε συνήθως μια ιστοσελίδα και αλληλεπιδράτε με το frontend. Μόλις καταχωρήσετε τις πληροφορίες, η εφαρμογή τις αποθηκεύει σε μια βάση δεδομένων που έχει δημιουργηθεί σε ένα διακομιστή. Για λόγους ευκολίας, απλά σκεφτείτε την βάση δεδομένων ως ένα τεράστιο υπολογιστικό φύλλο του Excel στον υπολογιστή σας, απλά στην συγκεκριμένη περίπτωση ο server που αποθηκεύονται τα δεδομένα μπορεί να είναι στην Αμερική, την Γερμανία κτλ. Όλες αυτές οι πληροφορίες παραμένουν στο διακομιστή, έτσι ώστε όταν συνδεθείτε ξανά στην εφαρμογή για πχ την εκτύπωση των εισιτηρίων σας, όλες οι πληροφορίες να είναι ακόμα στο λογαριασμό σας. Το πρόσωπο που χτίζει όλα αυτά, έτσι ώστε να εργαστούν από κοινού αυτές οι τεχνολογίες, είναι ο backend developer του έργου. Οι Backend τεχνολογίες συνήθως αποτελούνται από γλώσσες όπως η PHP, η Ruby, η Python, κλπ. Για να γίνουν ακόμα ευκολότερες στη χρήση, ενισχύονται από frameworks όπως, το Ruby on Rails, το Cake PHP, το Code Igniter κτλ κάνωντας με αυτό τον τρόπο την ανάπτυξη πιο γρήγορη και πιο εύκολη. 2.7 Τεχνολογίες που χρησιμοποιήθηκαν HTML / CSS Η συντριπτική πλειοψηφία των σελίδων στο διαδίκτυο είναι γραμμένες στη γλώσσα HTML. Ο βασικότερος λόγος ήταν αρχικά η συμβατότητα με όλους τους browsers. Το γεγονός πως όλοι οι χρήστες μπορούν να δουν μία σελίδα HTML ήταν από την αρχή στοιχειώδες στην επιτυχία της, καθώς υποσκέλισε τις αρχικά περιορισμένες δυνατότητες της γλώσσας. Μέρος της HTML είναι και η γλώσσα CSS (Cascading Style 16

17 Sheets). Οι δύο γλώσσες αλληλοσυμπληρώνονται, με την HTML να περιγράφει την δομή και το περιεχόμενο μίας σελίδες ενώ το CSS δίνει οδηγίες για την αισθητική της παρουσίαση. Εικόνα 5 Η HTML είναι η δομή της σελίδας και η CSS η μορφοποίησή της. H HTML είναι το ακρωνύμιο των λέξεων Hyper Text Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμηση σελίδων του World Wide Web (ή απλά ιστού: Web). Είναι μία γλώσσα προγραμματισμού. Χρησιμοποιείται για να σημαίνει ένα τμήμα κειμένου και να το κάνει να εμφανίζεται καλύτερα. Επιτρέπει την ενσωμάτωση ήχου και εικόνων στις web σελίδες. Αρχικά είχε κατασκευασθεί με σκοπό μόνο την μορφοποίηση κειμένου, αλλά μεγάλωσε και ενσωμάτωσε σχεδιαστικές τεχνικές κ.α. Το 1990 ο Tim Berners-Lee από το Cern, το εργαστήριο φυσικής της Γενεύης,δημιούργησε ένα νέο πρωτόκολλο με το οποίο θα μπορούσαν να μεταφέρονται κάθε είδος αρχείων και αντικειμένων μέσα από το Internet. Το πρωτόκολλο αυτό ονομάστηκε HTTP (Hyper Text Transfer Protocol) και σηματοδότησε την αρχή του WWW όπως το ξέρουμε σήμερα. Οι σελίδες που ήταν η βάση του WWW ήταν γραμμένες στην πρώτη έκδοση της γλώσσας HTML. Το 1994 αναπτύσσεται το πρότυπο HTML 2.0 από ένα διεθνή οργανισμό (Internet Engineering Task Force). H επόμενη έκδοση η 3.0 δεν έγινε αποδεκτή από τις Microsoft και Netscape οπότε γρήγορα αντικαταστάθηκε από την έκδοση 3.2 (1996). Η τελευταία περιελάμβανε πολλές από τις σημάνσεις (tags) που είχαν εισάγει οι δύο εταιρίες. Η έκδοση 4.0 παρουσιάστηκε τον Ιούνιο του Η HTML5 είναι μια υπό ανάπτυξη γλώσσα σήμανσης για τον 17

18 Παγκόσμιο Ιστό που όταν ετοιμαστεί θα είναι η επόμενη μεγάλη έκδοση της HTML (Γλώσσα Υπερκειμένου,Hyper Text Markup Language). Η ομάδα Web Hypertext Application Technology Working Group (WHATWG) άρχισε δουλειά σε αυτή την έκδοση τον Ιούνιο του 2004 με το όνομα Web Applications 1.0. Το Φεβρουάριο του 2010 το πρότυπο ήταν ακόμη σε κατάσταση "Last Call" στο WHATWG. Η HTML5 προορίζεται για αντικατάσταση της HTML 4.01, της XHTML 1.0, και της DOM Level 2 HTML. Ο σκοπός είναι η μείωση της ανάγκης για ιδιόκτητα plug-in και πλούσιες διαδικτυακές εφαρμογές (RIA) όπως το Adobe Flash, το Microsoft Silverlight, το Apache Pivot, και η Sun JavaFX. Οι ιδέες πίσω από την HTML5 εμφανίστηκαν αρχικά το 2004 από την ομάδα WHATWG. Η HTML5 εμπεριέχει το πρότυπο Web Forms 2.0 που είναι επίσης της WHATWG. Το πρότυπο HTML5 υιοθετήθηκε ως αρχικό βήμα για τις εργασίες της νέας ομάδας εργασίας HTML του W3C το Αυτή η ομάδα εργασίας δημοσίευσε το Πρώτο Δημόσιο Working Draft του προτύπου στις 22 Ιανουαρίου Το πρότυπο είναι ακόμη υπό ανάπτυξη, και αναμένεται να παραμείνει έτσι για πολλά χρόνια, παρόλο που μέρη της HTML5 θα τελειώσουν και θα υποστηριχτούν από περιηγητές πριν το όλο πρότυπο φτάσει στη τελική κατάσταση Recommendation. 2.8 JavaScript Η JavaScript είναι μια γλώσσα προγραμματισμού ηλεκτρονικών υπολογιστών, η οποία έχει σαν σκοπό την παραγωγή δυναμικού περιεχομένου και την εκτέλεση κώδικα στην πλευρά του πελάτη (clientside) στις ιστοσελίδες. Το πρότυπο της γλώσσας κατά τον οργανισμό τυποποίησης ECMA ονομάζεται ECMAscript. 18

19 Εικόνα 6 Το λογότυπο της Javascript Η γλώσσα προγραμματισμού JavaScript δημιουργήθηκε αρχικά από τον Brendan Eich της εταιρείας Netscape με την επωνυμία Mocha. Αργότερα, Mocha μετονομάστηκε σε LiveScript, και τελικά σε JavaScript, κυρίως επειδή η ανάπτυξή της επηρεάστηκε περισσότερο από τη γλώσσα προγραμματισμού Java. LiveScript ήταν το επίσημο όνομα της γλώσσας όταν για πρώτη φορά κυκλοφόρησε στην αγορά σε βήτα (beta) εκδόσεις με το πρόγραμμα περιήγησης στο Web, Netscape Navigator εκδοχή 2.0 τον Σεπτέμβριο του Αργότερα μετονομάστηκε σε JavaScript σε μια κοινή ανακοίνωση με την εταιρεία Sun Microsystems στις 4 Δεκεμβρίου, 1995, όταν επεκτάθηκε στην έκδοση του προγράμματος περιήγησης στο Web, Netscape εκδοχή 2.0B3. Η JavaScript απέκτησε μεγάλη επιτυχία ως γλώσσα στην πλευρά του πελάτη (client-side) για εκτέλεση κώδικα σε ιστοσελίδες, και περιλήφθηκε σε διάφορα προγράμματα περιήγησης στο Web. Κατά συνέπεια, η εταιρεία Microsoft ονόμασε την εφαρμογή της σε JScript για να αποφύγει δύσκολα θέματα εμπορικών σημάτων. JScript πρόσθεσε νέους μεθόδους για να διορθώσει τα Y2K-προβλήματα στην JavaScript, οι οποίοι βασίστηκαν στην java.util.date τάξη της Java. JScript περιλήφθηκε στο πρόγραμμα Internet Explorer εκδοχή 3.0, το οποίο κυκλοφόρησε τον Αύγουστο του

20 Τον Νοέμβριο του 1996, η Netscape ανακοίνωσε ότι είχε υποβάλει τη γλώσσα JavaScript στο Ecma International (μια οργάνωση της τυποποίησης των γλωσσών προγραμματισμού) για εξέταση ως βιομηχανικό πρότυπο, και στη συνέχεια το έργο είχε ως αποτέλεσμα την τυποποιημένη μορφή που ονομάζεται ECMAScript. Η JavaScript έχει γίνει μία από τις πιο δημοφιλείς γλώσσες προγραμματισμού ηλεκτρονικών υπολογιστών στον Παγκόσμιο Ιστό (Web). Αρχικά, όμως, πολλοί επαγγελματίες προγραμματιστές υποτίμησαν τη γλώσσα διότι το κοινό της ήταν ερασιτέχνες συγγραφείς ιστοσελίδων και όχι επαγγελματίες προγραμματιστές (και μεταξύ άλλων λόγων). Με τη χρήση της τεχνολογίας Ajax, η JavaScript γλώσσα επέστρεψε στο προσκήνιο και έφερε πιο επαγγελματική προσοχή προγραμματισμού. Το αποτέλεσμα ήταν ένα καινοτόμο αντίκτυπο στην εξάπλωση των πλαισίων και των βιβλιοθηκών, τη βελτίωση προγραμματισμού με JavaScript, καθώς και αυξημένη χρήση της JavaScript έξω από τα προγράμματα περιήγησης στο Web. Τον Ιανουάριο του 2009, το έργο CommonJS ιδρύθηκε με στόχο τον καθορισμό ενός κοινού προτύπου βιβλιοθήκης κυρίως για την ανάπτυξη της JavaScript έξω από το πρόγραμμα περιήγησης και μέσα σε άλλες τεχνολογίες (π.χ. Server-side) Μοντέλο εκτέλεσης Η αρχική έκδοση της Javascript βασίστηκε στη σύνταξη στη γλώσσα προγραμματισμού C, αν και έχει εξελιχθεί, ενσωματώνοντας πια χαρακτηριστικά από νεότερες γλώσσες. Αρχικά χρησιμοποιήθηκε για προγραμματισμό από την πλευρά του πελάτη (client), που ήταν ο φυλλομετρητής (browser) του χρήστη, και χαρακτηρίστηκε σαν clientside γλώσσα προγραμματισμού. Αυτό σημαίνει ότι η επεξεργασία του κώδικα Javascript και η παραγωγή του τελικού περιεχομένου HTML δεν πραγματοποιείται στο διακομιστή, αλλά στο πρόγραμμα περιήγησης των επισκεπτών, ενώ μπορεί να ενσωματωθεί σε στατικές σελίδες HTML. Αντίθετα, άλλες γλώσσες όπως η PHP εκτελούνται στο διακομιστή (server-side γλώσσες προγραμματισμού). Παρά την ευρεία χρήση της Javascript για συγγραφή προγραμμάτων σε περιβάλλον φυλλομετρητή, αξίζει να σημειωθεί ότι από την αρχή χρησιμοποιήθηκε και για τη συγγραφή κώδικα από την πλευρά του διακομιστή, από την ίδια τη Netscape στο προϊόν LiveWire, 20

21 με μικρή επιτυχία. Η χρήση της Javascript στο διακομιστή εμφανίζεται πάλι σήμερα, με τη διάδοση του Node.js, ενός μοντέλου προγραμματισμού βασισμένο στα γεγονότα (events) Javascript και Java Η Javascript δεν θα πρέπει να συγχέεται με τη Java, που είναι διαφορετική γλώσσα προγραμματισμού και με διαφορετικές εφαρμογές. Η χρήση της λέξης "Java" στο όνομα της γλώσσας έχει περισσότερη σχέση με το προφίλ του προϊόντος που έπρεπε να έχει και λιγότερο με κάποια πιθανή συμβατότητα ή άλλη στενή σχέση με τη Java. Ρόλο σε αυτήν τη σύγχυση έπαιξε και ότι η Java και η Javascript έχουν δεχτεί σημαντικές επιρροές από τη γλώσσα C, ειδικά στο συντακτικό, ενώ είναι και οι δύο αντικειμενοστραφείς γλώσσες. Τονίζεται ότι ο σωστός τρόπος γραφής της είναι "Javascript" και όχι 'Java script' σαν δύο λέξεις, όπως λανθασμένα γράφεται ορισμένες φορές. 2.9 Bootstrap Το γνωστό κοινωνικό δίκτυο twitter εδώ και ένα χρόνο περίπου έχει δημιουργήσει μια πανίσχυρη τεχνολογική βάση που λέγεται Bootstrap. Πρόκειται για ένα πακέτο από έτοιμα συστατικά και λειτουργίες ιστοσελίδων (π.χ. buttons, navigation bars, alerts, tabs κ.ά.) γραμμένα σε open source κώδικα Html,Css,Javascript (διαθέσιμο στο Github) έτοιμα για να εφαρμοστούν και να λειτουργήσουν άμεσα από οποιοδήποτε developer. 21

22 Εικόνα 7 Το Bootstrap είναι ένα πανίσχυρο εργαλείο για γρήγορη ανάπτυξη ιστοσελίδων Bootstrap ιστορία Το Bootstrap αναπτύχθηκε από Mark Otto και Jacob Thornton στο Twitter, και κυκλοφόρησε ως ένα open source προϊόν τον Αύγουστο του 2011.Τον Ιούνιο του 2014 Bootstrap ήταν το έργο Νο.1 για GitHub. Έχει χρησιμοποιηθεί σε πολυάριθμα site μεταξύ των οποίων σε project της NASA αλλά και από τον Λευκό Οίκο. Δεν είναι τυχαίο που είχε τόσο μεγάλη επιτυχία καθώς διευκολύνει και απλουστεύει πολύ την δημιουργία ιστοσελίδων προσφέροντας μια καλαίσθητη, εύκολη και ευέλικτη υποδομή για front-end developers και designers. Η έκδοση 3, δηλώνει εξαρχής ακόμη πιο συμβατή με mobile συσκευές, τις οποίες και βάζει σε απόλυτη προτεραιότητα, ενώ διαθέτει και αρκετά άλλα ενδιαφέροντα χαρακτηριστικά Λόγοι που επιλέξαμε το Bootstrap Με την εξέλιξη των κινητών συσκευών, το να κατασκευαστεί ένα site,που να συμβαδίζει με τις νέες τεχνολογίες, είναι χρονοβόρο. Χρησιμοποιώντας μια έτοιμη τεχνολογική βάση που είναι ευέλικτη και χρησιμοποιεί σύγχρονα πρότυπα και έχει ελεγχθεί διεξοδικά, πετυχαίνουμε το καλύτερο, δυνατό αποτέλεσμα. 22

23 Εύκολο στη χρήση: Οποιοσδήποτε με βασικές γνώσεις HTML και CSS μπορεί να το χρησιμοποιήσει. Συμβατό με mobile συσκευές: Τις οποίες θέτει σε απόλυτη προτεραιότητα. Το site φαίνεται το ίδιο σε smartphones,tablets,desktops. Δημιουργία responsive website: Mπορούμε να κρύψουμε κάποιο περιεχόμενο ανάλογα με το μέγεθος της οθόνης. Προσθέτοντας για παράδειγμα μια κλάση.visible σε ένα στοιχείο, μπορούμε να το κάνουμε ορατό μόνο σε laptop. Συμβατότητα με όλους τους browsers: Σύστημα εκκίνησης που είναι συμβατό με όλα τα σύγχρονα προγράμματα περιήγησης (Google Chrome, Firefox, Internet Explorer, Safari, και Opera).Μια από τις προκλήσεις που συναντούνε οι προγραμματιστές είναι ότι το site φαίνεται διαφορετικό σε διαφορετικούς web browsers. Τεκμηρίωση: Όχι μόνο Bootstrap προσφέρει μορφοποίηση για σχεδόν κάθε στοιχείο μια τυπική ιστοσελίδα ή εφαρμογή web απαιτεί, παρέχει επίσης μια μεγάλη τεκμηρίωση με παραδείγματα και demo που μόνο καθιστούν εύκολο.δυνατό σε design και δομές. Βασική μορφοποίηση για τα περισσότερα στοιχεία HTML: Μια ιστοσελίδα που έχει πολλά διαφορετικά στοιχεία, όπως επικεφαλίδες, λίστες, πίνακες, κουμπιά, φόρμες, κλπ. Όλα αυτά τα βασικά στοιχεία της ΗTML έχουν μορφοποιηθεί και ενισχυθεί με επεκτάσιμες κλάσεις. 3 Σχεδιασμός για το πάνω μέρος του site Βήμα 1 ο 3.1 Επιλογή text editor Θα χρειαστούμε έναν text editor.επιλέξαμε το Sublime Text 3,που το κατεβάσαμε από αυτή την σελίδα Μας επιτρέπει να αλλάξουμε διαδραστικά πολλές γραμμές ταυτόχρονα, η μετονομασία μεταβλητών γίνεται με ευκολία, και να χειριστoύμε τα αρχεία ανεξάρτητα από το λειτουργικό σύστημα του υπολογιστή. 23

24 Βήμα 2 ο 3.2 Εγκατάσταση Βootstrap Εικόνα 8 Επιλογή text editor Επισκεπτόμαστε την σελίδα Από εκεί επιλέγουμε να κατεβάσουμε το Βootstrap. Εικόνα 9 Αρχική σελίδα Bootstrap 24

25 Εικόνα 10 Kατέβασμα Βootstrap Βήμα 3 ο Επιλογή Download Bootstrap. Στα έγγραφα του υπολογιστή μας εμφανίζεται ένα συμπιεσμένο αρχείο bootstrap dist.επιλέγουμε αποσυμπίεση καταλόγου dist και μετονομασία του σε my-site.αντιγραφή και επικόλληση στη επιφάνεια εργασίας. Βήμα 4 ο Άνοιγμα του καταλόγου my-site στο Sublime Text 3.Ανοίγουμε τον text editor και επιλέγουμε File >Open Folder >my-site. Παρατηρούμε ότι ο κατάλογος my-site έχει μέσα ήδη 3 φακέλους. Με ονόματα css,fonts και js. Εικόνα 11 O κατάλογος my-site στον text editor 25

26 Βήμα 5 ο Δημιουργία και αποθήκευση index file. Δεξί κλικ στον κατάλογο mysite>new file >Save as>index.html Εικόνα 12 Δημιουργία index.html 3.3 Bασικά στοιχεία της HTML Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και έπειτα προσθέτονται ειδικά σύμβολα γύρω από τις λέξεις ή από ολόκληρες προτάσεις ώστε να καθοριστεί η εμφάνιση τους στην οθόνη. Τα ειδικά σύμβολα στην HTML λέγονται ετικέτες (tags). Η HTML διαθέτει ένα πεπερασμένο αριθμό ετικετών που μπορούμε να χρησιμοποιήσουμε. Ωστόσο ο αριθμός αυτός δεν παραμένει σταθερός. Κατά διαστήματα το W3 Consortium, το οποίο ανάπτυξε και διαχειρίζεται τα πρότυπα της HTML, δημοσιεύει νέα πρότυπα στα οποία προσθέτει καινούργιες ετικέτες που καλύπτουν ή διορθώνουν μια λειτουργία στο προηγούμενο πρότυπο. Η τελευταία αναθεώρηση του HTML προτύπου είναι η HTML5. 26

27 3.3.1 Πως λειτουργούνε οι ετικέτες Οι ετικέτες ελέγχουν την δομή και την μορφή του κειμένου της ιστοσελίδας. Επίσης παρέχουν πληροφορίες προς τον web browser για την σελίδα που πρόκειται να εμφανίσουν, όπως ο τίτλος της σελίδας ή ο συγγραφέας της. Οι ετικέτες μέσα σε ένα HTML αρχείο μπορούν να είναι γραμμένες είτε με μικρά γράμματα (πεζά), είτε με κεφαλαία. Η ετικέτα <b> είναι ίδια με τη ετικέτα <B>. Μόνο πρέπει να προσέχουμε τις ετικέτες τέλους να είναι γραμμένες όπως η ετικέτες αρχής. Δηλαδή αν μια ετικέτα αρχής είναι γραμμένη με πεζά τότε και η ετικέτα τέλους πρέπει να γραφεί με πεζά. Οι βασικές ετικέτες που θα δούμε είναι οι : <DOCTYPE html> Το Doctype πρέπει να είναι η πρώτη ετικέτα της ιστοσελίδας μας δηλαδή πρέπει να βρίσκεται πάνω από την ετικέτα <html>, γενικά θα μπορούσαμε να πούμε πως ενημερώνει τον web browser μας για την έκδοση της html που πρόκειται να χρησιμοποιήσουμε. <html> </html> Η ετικέτα html περιέχει όλες της ετικέτες της γλώσσας (εκτός από το DOCTYPE ) και ενημερώνει τον web browser ότι το αρχείο είναι ένα έγγραφο html. <head> </head> Η ετικέτα head όπως και η html περιέχει και αυτή κάποιες ετικέτες όπως κάποια styles,scripts, styles, meta information. <title> </title> Η ετικέτα title ορίζει τον τίτλο της σελίδας μας στον web browser αλλά και στις μηχανές αναζητήσεις στα αποτελέσματα που αναφέρονται στην ιστοσελίδα μας. <body> </body> Η ετικέτα body καθορίζει το κύριο κείμενο της σελίδας μας και περιέχει το περιεχόμενο της όπως κείμενο, πίνακες,εικόνες, κουμπιά κτλ. <h1> </h1> Η ετικέτα h1 χρησιμοποιείται όταν θέλουμε να καθορίσουμε html Επικεφαλίδες για να τονίσουνε κάτι, η h1 ορίζει την ποιο σημαντική επικεφαλίδα της σελίδας μας και εμφανίζεται με μεγαλύτερη γραμματοσειρά από τα άλλα headings,αντιθέτως το h6 καθορίζει την λιγότερη σημαντική επικεφαλίδα της σελίδας μας και 27

28 εμφανίζεται με την μικρότερη γραμματοσειρά από όλα τα άλλα headings. <p> </p> Η ετικέτα p χρησιμοποιείται για την δημιουργία παραγράφων. <br> Η ετικέτα br χρησιμοποιείται για την αλλαγή γραμμής. Στην ΗTML η ετικέτα br δεν έχει κλείσιμο γραμμής. Με την ετικέτα <link> ορίζουμε την σχέση μεταξύ του τρέχον εγγράφου με ένα εξωτερικό αρχείο φύλλου στυλ. Με αυτόν τον τρόπο μπορούμε να καθορίσουμε ένα ενιαίο στυλ για πολλαπλά HTML έγγραφα. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD> και καθορίζει τη σχέση μεταξύ του εγγράφου HTML και την εξωτερική πηγή. Σε αυτό το παράδειγμα, η παράμετρος href καθορίζει τη θέση της εξωτερικής εγγράφου ( στην περίπτωση αυτή σε σχέση με το τρέχον έγγραφο ) και το χαρακτηριστικό rel λέει το έγγραφο HTML της σχέσης της με την εν λόγω εξωτερικό έγγραφο. Σε αυτή την περίπτωση, καθώς είναι πιο συχνή με ετικέτες σύνδεσμο, η σχέση είναι ότι η εξωτερική έγγραφο είναι ένα στυλ για το έγγραφο HTML μας. Εικόνα 13 O ρόλος της ετικέτας link Η ιδιότητα href oρίζει την διεύθυνση του εξωτερικού αρχείου. Η ιδιότητα rel την σχέση του εξωτερικού αρχείου με το html αρχείο. Στην προκειμένη περίπτωση το css ορίζει το στυλ του html αρχείου. 28

29 3.4 Eπιλογή αρχικού template Πάμε getbootstrap.com >Examples για να επιλέξουμε το αρχικό template Εικόνα 14 Παραδείγματα με βασικά template Και επιλέγουμε αυτό που θεωρούμε ότι ταιριάζει με το website που θέλουμε να φτιάξουμε. Επέλεξα το Jumbotron template,στην πορεία όμως θα γίνουνε βασικές αλλαγές. Εικόνα 15 Επιλογή αρχικού template Δεξί κλικ στο template > Προβολή πηγαίου κώδικα. Ο κώδικας είναι αυτός: <!DOCTYPE html> 29

30 <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initialscale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>jumbotron Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="jumbotron.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-filewarning.js"></script><![endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script > <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data- 30

31 toggle="collapse" data-target="#navbar" aria-expanded="false" ariacontrols="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" placeholder=" " class="form-control"> <div class="form-group"> <input type="password" placeholder="password" class="formcontrol"> <button type="submit" class="btn btn-success">sign in</button> </form> <!--/.navbar-collapse --> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> <h1>hello, world!</h1> <p>this is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">learn more»</a></p> <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> 31

32 <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <hr> <footer> <p> Company 2014</p> </footer> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">< 32

33 /script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> Παίρνω τον κώδικα με αντιγραφή και επικόλληση μέσα στο index.html >Save. Εικόνα 16 O κώδικας του Jumbotron στο index.html Στην συνέχεια δεξί κλικ στο index.html >Open Containing Folder Εικόνα 17 Με διπλό κλικ πάνω στο index βλέπουμε το site στον browser 33

34 Διπλό κλικ πάνω στο index και παρατηρούμε ότι το site που βλέπουμε δεν έχει καμία σχέση με το Jumbotron template που διαλέξαμε. Εικόνα 18 Τι βλέπουμε στην οθόνη όταν δεν έχουνε φτιαχτεί τα css μονοπάτια 3.5 Ρύθμιση CSS μονοπατιών Μέσα στο index.html αλλαγή αυτού : <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> Σε αυτό: <link href="css/bootstrap.min.css" rel="stylesheet"> Με άλλα λόγια λέμε στο πρόγραμμα περιήγησης πώς να να πάει στο σωστό css αρχείο ξεκινώντας από το index.html φάκελο. Λέμε στον browser να ψάξει τον css φάκελο που βρίσκεται στον my-site κατάλογο και μετά να βρεί το bootstrap.min.css Ένα αρχείο "min" είναι μία ελαχιστοποιημένη έκδοση ενός αρχείου. Έτσι, αντί για μια σύνδεση σε ένα αρχείο.css θα συνδέσουμε με ένα min.css αρχείο. Αυτό που κάνει μία ελαχιστοποιημένη έκδοση ενός αρχείου είναι να αφαιρέσει όλα το περιττό χώρο και τις αλλαγές γραμμών, έτσι ώστε το πρόγραμμα περιήγησης να μπορεί να διαβάσει το αρχείο πιο γρήγορα και έτσι να φορτώνει γρηγορότερα το site σας. Μέσα στον φάκελο css υπάρχουνε 5 αρχεία.τα εξής: bootstrap-theme.css bootstrap-theme.css.map 34

35 bootstrap-theme.min.css bootstrap.css bootstrap.css.map bootstrap.min.css Tα τέσσερα πρώτα δεν χρειάζονται, οπότε σβήνονται. Στη συνέχεια πατάω δεξί κλικ στον φάκελο css και δημιουργώ νέο φάκελο που τον ονομάζω custom.css Εικόνα 19 Δημιουργία του css Ξαναπηγαίνω στον πηγαίο κώδικα της σελίδας,κάνω κλικ πάνω στο jumbotron.css,παίρνω τον κώδικα που έχει μέσα και με αντιγραφή επικόλληση τον τοποθετώ μέσα στο custom.css 35

36 Εικόνα 20 Διπλό κλικ πάνω στο jumbotron.css για να πάρω τον κώδικα O κώδικας είναι αυτός: /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; padding-bottom: 20px; } Στο αρχείο index.html αλλαγή αυτού: <link href="jumbotron.css" rel="stylesheet"> σε αυτό: <link href="css/custom.css" rel="stylesheet"> 3.6 Επιλογή δεύτερου template Βρίσκω άλλο template στο οποίο να μου αρέσει η μπάρα περιήγησης στο site από το getbootstrap.com >Examples > Starter Template. Επιλέγω αυτό: 36

37 Εικόνα 21 Eπιλογή δεύτερου template Η δυνατότητα να δούμε τον κώδικα του συγκεκριμένου template, με το View Page Source,υπάρχει, αλλά δεν γνωρίζουμε ποιο κομμάτι αντιστοιχεί στην μπάρα περιήγησης.με δεξί κλικ στη σελίδα>inspect Element βρίσκουμε ότι ο κώδικας που αναζητούμε είναι αυτός και τον αντικαθιστούμε: Εικόνα 22 Εύρεση κώδικα που ατιστοιχεί στην μπάρα περιήγησης Αλλαγή αυτού: <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> 37

38 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> <div class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder=" " class="form-control"> <div class="form-group"> <input type="password" placeholder="password" class="form-control"> <button type="submit" class="btn btn-success">sign in</button> </form> <!--/.navbar-collapse --> Σε αυτό: <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> 38

39 <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> <!--/.nav-collapse --> Aλλαγή στο όνομα του site: Μέσα index.html αλλαγή αυτού: <a class="navbar-brand" href="#">project name</a> σε <a class="navbar-brand" href="#">my site</a> Mετακίνηση των links δεξιά: Στα components του bootstrap βρίσκουμε ότι υπάρχει κλάση με το όνομα "navbar-right".προσθέτουμε την κλάση "navbar-right στην ετικέτα "ul". Μέσα στο index.html βάζουμε: <ul class="nav navbar-nav navbar-right"> Αλλαγή στα ονόματα των li ετικετών: Στο index.html αλλαγή: <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> σε <ul class="nav navbar-nav navbar-right"> <li class= active ><a href="#about">who WE ARE</a></li> <li><a href="#contact">get INVOLVED</a></li> </ul> 39

40 Εικόνα 23 Το site με την νέα γραμμή περιήγησης 3.7 Διαφορές των ετικετών Τα περισσότερα στοιχεία HTML ορίζονται ως στοιχεία επιπέδου, (block elements) ή εμβόλιμα στοιχεία (inline elements).tα στοιχεία επιπέδου μπλοκ ξεκινούν με μια νέα γραμμή, όταν εμφανίζονται σε ένα πρόγραμμα περιήγησης. Εκτός αν έχει υπάρξει το στυλιζάρισμά τους με css. Παραδείγματα με block elements: <h1>, <p> <ul>, <table> Παραδείγματα με inline elements: <b>, <td>, <a>, <img> Το div ορίζει διαφορετικά τμήματα μέσα στη σελίδα.συνήθως για την ομαδοποίηση των block elements και την μορφοποίησή τους με css. 3.8 Δομές δέντρων σε HTML αρχεία Η δομή ενός ΗTML αρχείου θυμίζει δομές δέντρων. Κάθε στοιχείο έχει ένα γονικό στοιχείο. Μια ετικέτα μπορεί να έχει ένα παιδί ( ή τα παιδιά ).Το ότι υπάρχει εσοχή μέσα σε ένα έγγραφο δεν καθορίζει αν ένα στοιχείο είναι ένα παιδί ή είναι γονιός. Καθορίζει την οργάνωση του εγγράφου. Στο παραπάνω παράδειγμα το div με την κλάση navbar είναι γονιός του div με την κλάση container. Η ετικέτα ul είναι παιδί του div με 40

41 την κλάση collapse και navbar-collapse. Την ίδια ώρα το ul είναι γονιός των δυo li HTML ετικετών. Τέλος η κλάση container κρατάει όλο το site ευθυγραμμισμένο με συγκεκριμένο πλάτος Σχόλια στην HTML Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα. Δεν εμφανίζονται στην οθόνη του browser. Ένας λόγος για να χρησιμοποιήσουμε σχόλια μέσα σε ένα html αρχείο είναι να γράψουμε την ημερομηνία που δημιουργήσαμε το αρχείο. Ένα σχόλιο αρχίζει με το <!-- και τελειώνει με το --> 3.9 Τι είναι οι λίστες Στην σελίδα μας μπορούμε να εισάγουμε λίστες. Η ετικέτα <ul> εισάγει μια μη αριθμημένη λίστα στην σελίδα μας. Το ul είναι τα δύο πρώτα γράμματα από το Unordered List. Η ετικέτα <li> προσθέτει γραμμές στην λίστα. Η ιδιότητα type της ετικέτας <ul> ορίζει το σύμβολο που μπαίνει μπροστά από κάθε γραμμή της λίστας. Οι τιμές που παίρνει η ιδιότητα type είναι οι εξής: disc, circle, square. Η ετικέτα <ol> εισάγει μια αριθμημένη λίστα στην σελίδα μας, Το ol είναι τα δύο πρώτα γράμματα από το Ordered List. Η ιδιότητα type της ετικέτας <ol> ορίζει τον τύπο της ταξινόμησης. Οι τιμές που παίρνει η ιδιότητα type είναι οι εξής: A, a, I, i. Ενημέρωση h1 επικεφαλίδας: Στο index.html αλλαγή αυτού: <h1>hello, world!</h1> σε αυτό: <h1>our goal is to inspire <br>people to stop bullying<br> </h1> Ενημέρωση παραγράφου: Στο index.html αλλαγή : <p>this is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 41

42 σε <p>bullying is unwanted, aggressive behavior among school aged children that involves a real or perceived <strong>power imbalance.</strong> The behavior is repeated, or has the potential to be repeated, over time. Both kids who are bullied and who bully others may have serious, lasting problems. </p> Ευθυγράμμιση κειμένου για το div με την κλάση jumbotron Στο css/custom.css γράφουμε:.jumbotron { text-align: center; } Αυτή η εντολή σημαίνει για κάθε div με την κλάση jumbotron ευθυγράμμισε στο κέντρο. Το text-align είναι η ιδιότητα και center είναι η τιμή. Κανόνας στη CSS. Αλλαγή χρώματος κουμπιού σε κόκκινο Στο index.html αντικατάσταση αυτού: <a class="btn btn-primary btn-lg" role="button">learn more»</a> σε αυτό: <a class="btn btn-danger btn-lg" role="button">get Involved</a> 42

43 Μετά από αυτές τις αλλαγές το site μας δείχνει έτσι: Εικόνα 24 Αλλαγές στην κλάση jumbotron Για να γίνει το κουμπί κινδύνου μεγαλύτερο στο css/costume.css.btn-lg { font-size: 36px? } 3.10 Τρόποι με τους οποίους συμπεριλαμβάνουμε την CC3 Εξωτερικά όπως έχουμε κάνει στο με το css/custom.css Εσωτερικά - προσθέτοντας την εντολή μέσα στην ετικέτα <head> </head> Είτε δίπλα στην γραμμή που μας ενδιαφέρει χρησιμοποιώντας την ετικέτα <style> </style> Οι εξωτερικές και εσωτερικές αλλαγές έχουν την ίδια προτεραιότητα. Εάν οι επιλογείς είναι η ίδιοι, τότε η τελευταία εντολή θα έχει πάντα προτεραιότητα. Για παράδειγμα, εάν είχατε: p { color: red } p { color: blue } Το κείμενο στο πλαίσιο του p στοιχεία θα έχουν μπλε χρώμα, διότι ο κανόνας αυτός ήρθε τελευταίος. 43

44 3.11 Εξειδίκευση (Specificity) Αν έχουμε δύο ή περισσότερους αντικρουόμενους κανόνες CSS που να δείχνουν το ίδιο στοιχείο, υπάρχουν κάποιοι βασικοί κανόνες που ακολουθεί ένα πρόγραμμα περιήγησης για να καθορίσουν ποια είναι η πιο συγκεκριμένη και ως εκ τούτου κερδίζει έξω. Όσο πιο συγκεκριμένη είναι μια εντολή τόσο μεγαλύτερη προτεραιότητα έχει. Για παράδειγμα αν είχαμε τις εξής εντολές που αντικρούονται:.jumbotron { color:red }.jumbotron h1{color :blue} Μεγαλύτερη προτεραιότητα έχει η δεύτερη που είναι και πιο συγκεκριμένη (Override). Έτσι για κάθε div με την κλάση jumbotron θα είχαμε το κόκκινο χρώμα αλλά εκεί που θα υπήρχε η επικεφαλίδα h1 θα είχαμε το μπλε χρώμα. Δηλαδή η δεύτερη εντολή γράφει πάνω στην πρώτη. Γενικά όμως από αυτές τις τρείς μεθόδους μεγαλύτερη προτεραιότητα έχει όταν κάνουμε το στυλιζάρισμα της σελίδας, να εφαρμόσουμε αλλαγές css δίπλα στην γραμμή που μας ενδιαφέρει. Σε μεγάλα αρχεία όμως,για να πετύχουμε σύντομες αλλαγές χρησιμοποιούμε τον εξωτερικό τρόπο εφαρμογής του css Συμπεριλαμβάνουμε Αrvo γραμματοσειρά. Επιλέγουμε Google >Fonts >Arvo >Add to Collection>Use 44

45 Εικόνα 25 Επιλογή Arvo γραμματοσειράς Μέσα στο index.html πάνω από τις εντολές css προσθέτουμε : <link href='http://fonts.googleapis.com/css?family=arvo' rel='stylesheet' type='text/css'> Φτιάχνω CSS κανόνα για ul.nav και.jumbotron h1 ώστε να έχουνε αυτή τη γραμματοσειρά. css/custom.css ul.nav,.jumbotron h1 { font-family: Arvo, courier, serif; } Για κάθε ul με την κλάση nav και για κάθε επικεφαλίδα h1 που βρίσκεται μέσα σε div με την κλάση jumbotron χρησιμοποίησε την Arvo γραμματοσειρά. Το div μπροστά από την κλάση jumbotron θα μπορούσαμε να το γράψουμε αλλά δεν χρειάζεται. Γιατί η κλάση jumbotron υπάρχει μόνο μέσα σε div στον δικό μας κώδικα Ιδιότητες χαρακτήρων και γραμματοσειρές Η ιδιότητα font-size ορίζει το μέγεθος της γραμματοσειράς. Οι δύο πιο κοινές μονάδες μέτρησης CSS είναι τα px και τα em. Στη πρώτη περίπτωση έχουμε απόλυτη μονάδα μέτρησης και στη δεύτερη σχετική. 45

46 Για παράδειγμα : 1em είναι το τρέχον μέγεθος της γραμματοσειράς και 2em είναι δύο φορές το τρέχον μέγεθος της γραμματοσειράς. Η ιδιότητα font-weight.η ιδιότητα αυτή καθορίζει το πάχος των χαρακτήρων στο κείμενο που εμφανίζονται. Οι απλές τιμές που μπορεί να πάρει είναι normal, lighter, bold, bolder.επίσης μπορούμε να χρησιμοποιήσουμε συγκεκριμένη κλίμακα γύρω στο Για παράδειγμα αν είχαμε τις εντολές p { font-weight: 100; } και p { fontweight: 900; } Στην πρώτη περίπτωση το πάχος είναι το μικρότερο δυνατό ενώ στη δεύτερη το μεγαλύτερο δυνατό. Η ιδιότητα line-height.η ιδιότητα αυτή καθορίζει το ύψος των γραμμών. Για παράδειγμα η εντολή.jumbotron h1 { line-height: 2px; } σημαίνει για κάθε επικεφαλίδα h1 που βρίσκεται μέσα σε div με την κλάση jumbotron,κάνε το ύψος των γραμμών 2 φορές μεγαλύτερο σε σχέση με το h Τι είναι το Box Model και πως λειτουργεί Όλα τα στοιχεία HTML μπορούνε να θεωρηθούνε κουτιά. Στην CSS, ο όρος "box model" χρησιμοποιείται όταν μιλάμε για το σχεδιασμό και τη διάταξη. Είναι ουσιαστικά ένα κουτί που τυλίγεται γύρω από στοιχεία HTML, και αποτελείται από: το πραγματικό περιεχόμενο content, την επένδυση padding τα σύνορα και το περιθώριο. Το box model μας επιτρέπει να προσθέσoυμε ένα περίγραμμα γύρω από τα στοιχεία, και να καθορίσουμε το διάστημα μεταξύ των στοιχείων. Η παρακάτω εικόνα απεικονίζει το box model: 46

47 Εικόνα 26 Τρόπος λειτουργίας του Box Model Περιεχόμενο - Το περιεχόμενο του κουτιού, όπου εμφανίζεται το κείμενο και τις εικόνες Επένδυση - Διαγράφει μια περιοχή γύρω από το περιεχόμενο. Η επένδυση είναι διαφανής Σύνορα - Ένα περίγραμμα που πηγαίνει γύρω από την επένδυση και το περιεχόμενο Περιθώριο - Διαγράφει μια περιοχή έξω από τα σύνορα. Το περιθώριο είναι διαφανές Παρατηρούμε ότι το περιεχόμενο και το padding είναι εντός συνόρων. Ενώ το περιθώριο είναι εκτός. Χρησιμοποιούμε το padding αν θέλουμε να προσθέσουμε χώρο μέσα στο σύνορο, ενώ το margin χρησιμοποιείται όταν θέλουμε να προσθέσουμε χώρο εκτός αυτού. 47

48 Πλάτος και ύψος ενός html στοιχείου Για να ρυθμίσετε σωστά το πλάτος και το ύψος ενός στοιχείου σε όλους τους browsers, θα πρέπει να γνωρίζουμε πώς λειτουργεί το box model. Το συνολικό πλάτος ενός στοιχείου θα πρέπει να υπολογίζεται ως εξής: Συνολικό πλάτος στοιχείου = πλάτος + (αριστερό + δεξί) padding + (αριστερό + δεξί) border + (αριστερό + δεξί) margin Το συνολικό ύψος του στοιχείου θα πρέπει να υπολογίζεται ως εξής: Συνολικό ύψος στοιχείου = ύψος + (άνω + κάτω) padding + (άνω + κάτω) border + (άνω + κάτω) margin Αλλαγή των ετικετών <li> σε <ul> ώστε να είναι μικρότερα Στο css/custom.css προσθέτουμε: ul.nav { font-size: 13px; } Συμπεριλαμβάνουμε το σωστό περιθώριο για το.jumbotron <h1> and <p>. Στο css/custom.css προσθέτουμε:.jumbotron h1 { margin-top: 0px; margin-bottom: 50px; }.jumbotron p { margin-bottom: 30px; } 4 Άμεση και σχετική διευθυνσιοδότηση 4.1 Εισαγωγή εικόνων Mε δεξί κλικ στον κατάλογο my-site,και φτιάχνω κατάλογο 48

49 images. Eκεί μέσα αποθηκεύω τις εικόνες που θέλω. Συμπεριλαμβάνω την εικόνα girl.jpg.mέσα στο index.html γράφω στην γραμμή κάτω από το κουμπί. <img src="images/girl.jpg" title="bullying girl" alt="bullying girl"> Η ιδιότητα alt μας δείχνει τι θα φαίνεται στον browser εαν η εικόνα δεν φορτώσει σωστά. Eνώ η ιδιότητα title τι θα φαίνεται στoν browser αν το site μας παίζει σωστά και περάσει παρατεταμένα πάνω από την εικόνα το ποντίκι του υπολογιστή. Αυτές οι επιλογές είναι προαιρετικές αλλά βοηθάνε τους επισκέπτες της σελίδας στην περίπτωση που δεν μπορούνε να δούνε την εικόνα, να διαβάζουνε τουλάχιστον τι θα έπρεπε να υπάρχει στο συγκεκριμένο σημείο. Κάθε ΗTML ετικέτα έχει ένα σύνολο από ιδιότητες, τις οποίες μπορούμε να βρούμε στο w3schools.com. Εισαγωγή εικόνας για το background και αποθήκευσή της σαν freedom_woman.jpg.mέσα στο css/custom.css γράφουμε:.jumbotron { text-align: center; background-image: url('../images/freedom_woman.jpg'); } Το../ λέει στον browser να βγεί απο αυτό τον κατάλογο.δηλαδή είμαστε στον φάκελο custom.css άρα στον κατάλογο CSS. Bγες απο τον κατάλογο CSS και βρίσκεσαι στο my-site. Aπο εκεί του λέμε να βρεί τον κατάλογο images,και την εικόνα freedom_woman.jpg Αλλαγή χρώματος γραμματοσειράς. Μέσα στο css/custom.css.jumbotron { text-align: center; background-image: url("../images/hero_image.jpg"); color: white; } Διόρθωση πάχος γραμμών, μέγεθος γραμματοσειράς και (padding and margin).μέσα στο css/custom.css γράφουμε: 49

50 .jumbotron h1 { margin-top: 0px; margin-bottom: 50px; }.jumbotron p { margin-bottom: 30px; font-weight: 100; padding: 0 50px; } Προσθήκη εικόνας stop bullying. Aποθήκευση της εικόνας στον κατάλογο images,ως logo.png.στο index.html αλλαγή : <a class="navbar-brand" href="#">project Name</a> σε <a class="navbar-brand" href="#"><img src="images/logo.png" alt="stop bullying"></a> Μετά από αυτές τις αλλαγές το site μας έχει διαμορφωθεί έτσι: Εικόνα 27 Το site μετά από την εισαγωγή εικόνων 50

51 4.2 Τι είναι Grid system και που χρησιμεύει Η σημασία του πλέγματος είναι ιδιαίτερα σημαντική, για την καλή παρουσίαση ενός website. Kάθε web developer συνειδητά ή ασυνείδητα χρησιμοποιεί πλέγματα, για την καλύτερη οργάνωση των στοιχείων. Το Bootstrap,χωρίζει το site σε 12 στήλες. Ο πίνακας παραπάνω δείχνει πως χωρίζουμε ένα site με μέγεθος 940 px,σε στήλες. Μπορεί να γίνει και ομαδοποίηση των στηλών,ανάλογα με την επιλογή μας. Εικόνα 28 Το Grid system του Βootstrap To grid system του Bootstrap επιτρέπει έως και 12 στήλες σε όλη τη σελίδα. Οι στήλες θα αναδιαταχθούν ανάλογα με το μέγεθος της οθόνης. Σε μεγάλες οθόνες καλό είναι να χρησιμοποιούμε 3 divs με 4 στήλες το καθένα. Έτσι, για να δημιουργήσουμε τη διάταξη που θέλουμε φτιάχνουμε την κλάση container ( <div class="container"> ). Στη συνέχεια, δημιουργoύμε την κλάση row ( <div class="row"> ) η οποία οπωσδήποτε πρέπει να βρίσκεται μέσα στην "container".τέλος προσθέτουμε τον κατάλληλο αριθμό στηλών οι οποίες δεν πρέπει σαν άθροισμα να ξεπερνάνε τον αριθμό 12.Μόνο οι στήλες είναι άμεσα παιδιά της κλάσης row στην δομή του δέντρου. Μέσα στις στήλες γράφουμε το περιεχόμενο. Μέσα στο index.html αλλαγή αυτού του κώδικα: <div class="row"> <div class="col-md-4"> <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce 51

52 dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#" role="button">view details»</a></p> Σε αυτό: <div class="row"> <div class="col-md-4"> <h2>students</h2> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help. </p> <p><a class="btn btn-default" href="#" role="button">start 52

53 Speaking»</a></p> <div class="col-md-4"> <h2>educators</h2> <p>respond when bullying happens. Learn how to stop it on the spot, find out what happened, and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> <div class="col-md-4"> <h2>parents</h2> <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child Click to get involved.</p> <p><a class="btn btn-default" href="#" role="button">give Support»</a></p> <a> 4.3 Διαφορές μεταξύ απόλυτης και σχετικής διεύθυνσης URL Σύνδεση με απόλυτες διευθύνσεις Μια απόλυτη διεύθυνση URL παίρνει συνήθως την ακόλουθη μορφή: πρωτόκολλο: // τομέας / μονοπάτι Το protocol είναι συνήθως αλλά μπορεί επίσης να είναι https://, ftp://, gopher:// ή file://. Το domain είναι το όνομα της ιστοσελίδας. Για παράδειγμα, το όνομα τομέα του κεντρικού web server του Πανεπιστημίου της Ιντιάνα είναι Το μονοπάτι path περιλαμβάνει πληροφορίες καταλόγου και αρχείου. Θα πρέπει να χρησιμοποιούνται απόλυτες διευθύνσεις όταν αναφέρομαστε σε συνδέσεις μέσα σε διαφορετικούς διακομιστές. Σύνδεση με σχετικές διευθύνσεις URL 53

54 Οι Σχετικές διευθύνσεις URL μπορούνε να πάρουνε διάφορες μορφές. Όταν γίνεται αναφορά σε ένα αρχείο που εμφανίζεται στον ίδιο κατάλογο με τη συγκεκριμένη σελίδα, μια διεύθυνση URL μπορεί να είναι τόσο απλή όσο το όνομα του αρχείου. Για παράδειγμα, εάν θέλετε να δημιουργήσετε ένα σύνδεσμο ανάμεσα στην αρχική σελίδα σας και στο αρχείο foobar.html, το οποίο βρίσκεται στον ίδιο κατάλογο με αυτήν. Γράφετε: <a href="foobar.html"> κείμενο </a> Όταν γίνεται αναφορά σε ένα αρχείο που βρίσκεται σε υποκατάλογο,του ίδιου καταλόγου με την σελίδα μας. Αρκεί να εισάγουμε πληροφορίες καταλόγου και το όνομα του αρχείου. Έτσι, αν foobar.html ήταν μέσα στο foobar φάκελο,ο οποίος είναι στον ίδιο κατάλογο με την σελίδα μας, μπορούμε να γράψουμε: <a href="foobar/foobar.html"> κείμενο </a> Εάν το αρχείο που θέλετε να συνδέσετε βρίσκεται σε υψηλότερο κατάλογο, χρησιμοποιείστε.., πράγμα που σημαίνει να ανεβεί ένα κατάλογο. Για παράδειγμα, για να συνδέθείτε από το foobar.html, το οποίο βρίσκεται στον παραπάνω κατάλογο,με την σελίδα home.html, μπορείτε να χρησιμοποιήσετε: <a href="../home.html"> κείμενο </a> 4.4 Google Drive και Google Forms Το Google Drive είναι υπηρεσία αποθήκευσης και συγχρονισμού αρχείων που παρέχεται από την Google, κυκλοφόρησε τον Απρίλιο του 2012, και επιτρέπει τον διαμοιρασμό αρχείων. Τα αρχεία αυτά μπορούν να αναζητηθούν με μηχανές αναζήτησης. Οι φόρμες Google είναι ένα δωρεάν εργαλείο για την αλληλεπίδραση των επισκεπτών με τον διαχειριστή του site.μας παρέχουνε την δυνατότητα να βγάλουμε εύκολα στατιστικά αποτελέσματα. Στις παρακάτω εικόνες βλέπουμε βήμα προς βήμα πως δημιουργούμε την φόρμα. Το link το χρησιμοποιούμε, για την σύνδεση του site με την φόρμα. Εμείς επιλέξαμε για όποιον πατήσει το κουμπί Start Speaking,να του εμφανίζει σε νέο παράθυρο μια φόρμα συμπλήρωσης . 54

55 Εικόνα 29 Συμπλήρωση φόρμας στο Google Drive Αναλυτική εξήγηση με σχήματα για το πώς φτιάχνονται οι φόρμες Google. Εικόνα 30 Eπιλογή Google Drive 55

56 Εικόνα 31 Δημιουργία Google account Εικόνα 32 Δημιουργία φόρμας 56

57 Εικόνα 33 Επιλογή τίτλου και θέματος Εικόνα 34 Eαν δεν υπάρχουνε άλλες ερωτήσεις επιλέγουμε Done 57

58 Εικόνα 35 Χρησιμοποίηση του link στο site μας 4.5 Φόρμα συμπλήρωσης Eμείς στο δικό μας site επιλέξαμε όταν οι μαθητές πατάνε το κουμπί Start Speking να εμφανίζεται σε νέο παράθυρο μια φόρμα συμπλήρωσης . Aυτό το κάναμε με την εντολή: <p><a class="btn btn-default" href="https://docs.google.com/forms/d/1po_jobhofjn7iwmima pwpambzlvlqgxxn1lr2v9v_gc/viewform? usp=send_form " target"_blank" role="button">start Speaking»</a></p> Mέσα στο href είναι ο κωδικός που πήραμε με Control+C απο την δημιουργία φόρμας. Ενώ το " target"_blank" σημαίνει άνοιξε την φόρμα σε νέο παράθυρο. 4.6 Άμεση διευθυνσιοδότηση Επιλέξαμε όταν οι εκπαιδευτικοί πατάνε το κουμπί Join The Iniative, να τους μεταφέρει στην αρχική σελίδα google.αυτό το κάναμε με την εντολή αυτή: 58

59 <p><a class="btn btn-default" href="http://google.com" role="button">join The Iniative»</a></p> 4.7 Έμμεση διευθυνσιοδότηση Επιλέξαμε όταν οι γονείς πατάνε το κουμπί Give Support,να τους μεταφέρει στο Grid System.To Grid System είναι φάκελος που δημιουργήσαμε εμείς,και βρίσκεται στον κατάλογο my-site. <p><a class="btn btn-default" href="grid.html" role="button">give Support»</a></p> 5 Σχεδιασμός για το κάτω μέρος του site 5.1 Η χρησιμότητα του Font-awesome Το Font-awesome μας επιτρέπει να συμπεριλάβουμε στο site μας επαγγελματικές εικόνες δωρεάν. Επισκεπτόμαστε τη σελίδα Awesome/ και κατεβάζουμε το συμπιεσμένο αρχείο Font-awesome. Αποσυμπίεση του φακέλου και μετονομασία του σε font-awesome.αυτό τον φάκελο,με αντιγραφή-επικόλληση τον τοποθετούμε μέσα στον κατάλογο my-site στον φάκελο των fonts.συμπεριλαμβάνουμε το fontawesome μέσα στο index.html 59

60 Μέσα στο index.html προσθήκη <link rel="stylesheet" href="fonts/font-awesome/css/font awesome.min.css"> Μέσα στο index.html αλλαγή αυτού του κώδικα: <div class="row"> <div class="col-md-4"> <h2>students</h2> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help.</p> <p><a class="btn btn-default" href="#" role="button">start Learning»</a></p> <div class="col-md-4"> <h2>educators</h2> <p>respond when bullying happens. Learn how to stop it on the spot,and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> <div class="col-md-4"> <h2>parents</h2> <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child. Click to get involved.</p> <p><a class="btn btn-default" href="#" role="button">give 60

61 Support»</a></p> Σε αυτόν: <div class="row"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-user fa-stack-1x fa-inverse"></i> </span> <h2>students</h2> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help.</p> <p><a class="btn btn-default" href="#" role="button">start Learning»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h2>educators</h2> <p>respond when bullying happens. Learn how to stop it on the spot,and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-money fa-stack-1x fa-inverse"></i> </span> <h2>parents</h2> <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child. Click to get involved.</p> 61

62 <p><a class="btn btn-default" href="#" role="button">give Support»</a></p> Έτσι στο site μας, το κάτω μέρος μετά την προσθήκη των εικονιδίων,είναι έτσι: Εικόνα 36 Προσθήκη εικονιδίων στο κάτω μέρος του site Τι είναι η ετικέτα span και που χρησιμεύει Όπως χρησιμοποιούμε την ετικέτα <div> για την ομαδοποίηση των block elements και την μορφοποίησή τους με css. Έτσι χρησιμοποιούμε και την ετικέτα <span>,αλλά για τα inline elements. H ετικέτα αυτή, δεν μπορεί να κάνει οπτική αλλαγή από μόνη της. Το κείμενο όμως που περικλείεται από αυτήν, μπορούμε να το μορφοποιήσουμε με css ή να το χειριστούμε με Javascript. 5.2 Η μορφοποίηση του τμήματος Get Ιnvolved. Σε αυτό το μέρος της εργασίας θα δούμε ιδιότητες της CSS και πώς τον ίδιο CSS κανόνα μπορούμε να τον εφαρμόσουμε σε διαφορετικά ΗΤML στοιχεία. Mέσα στο index.html βάζω το τμήμα Get Involved μέσα στο div με την κλάση container.το Get involved δεν μπορεί να τοποθετηθεί 62

63 ανάμεσα σε < div class="row"> <div class="col-md-4"> Γιατί βασικός κανόνας του Grid System είναι οτι μόνο οι στήλες είναι άμεσα παιδιά των γραμμών. Aλλαγή αυτού του κώδικα: <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-user fa-stack-1x fa-inverse"></i> </span> <h2>students</h2> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help.</p> <p><a class="btn btn-default" href="#" role="button">start Learning»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h2>educators</h2> <p>respond when bullying happens. Learn how to stop it on the spot,and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-money fa-stack-1x fa-inverse"></i> </span> <h2>parents</h2> 63

64 <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child. Click to get involved.</p> <p><a class="btn btn-default" href="#" role="button">give Support»</a></p> <hr> <footer> <p> Company 2014</p> </footer> <!-- /container --> Σε αυτόν <div class="container homepage"> <h2>get Involved</h2> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-user fa-stack-1x fa-inverse"></i> </span> <h3>students</h3> <p>if you are bullied, say something! If you are bullying, it s not cool! Speak up.you are not alone. Click the button below and get help <p><a class="btn btn-default" href="#" role="button">start Speking»</a></p> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h3>educators</h3> <p>respond when bullying happens. Learn how to stop it on the spot,and support all students involved.click the button below and we'll make it happen.</p> <p><a class="btn btn-default" href="#" role="button">join The Iniative»</a></p> 64

65 <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-money fa-stack-1x fa-inverse"></i> </span> <h3>parents</h3> <p>if you have determined bullying has occurred, learn how you and school or community officials can work together to support your child. Click to get involved.</p> <p><a class="btn btn-default" href="#" role="button">give Support»</a></p> <hr> <footer> <p> Company 2014</p> </footer> <!-- /container --> Ευθυγράμμιση στο κέντρο για γραμματοσειρές και μορφοποίηση των h2 και h3 επικεφαλίδων στο τμήμα του Get Involved. Mέσα στο css/custom.css προσθήκη.homepage { text-align: center; }.homepage h2,.homepage h3 { font-family: Arvo, courier, serif; color: #e74c3c; text-transform: uppercase; }.homepage h2 { font-size: 30px; }.homepage h3 { font-size: 26px; }.homepage p { font-size: 21px; font-weight: 300; 65

66 }.homepage a { color: #e74c3c; } Μπορούμε να δώσουμε σε μια ετικέτα HTML πολλές κλάσεις χωρίζοντάς τες με κενό.στο παράδειγμα <div class="container homepage">. Το <div> έχει δύο κλάσεις homepage και container. Χρώματα και σκίαση Τα χρώματα που χρησιμοποιήθηκαν για την κατασκευή του site,είναι απο το Είναι προτιμότερο να χρησιμοποιούμε δεκαεξαδικές τιμές για να έχουμε απεριόριστους συνδυασμούς στα χρώματα και διαφορετικές σκιάσεις. Έτσι μετά τις αλλαγές αυτές, το κάτω μέρος του site είναι έτσι: Εικόνα 37 Η μορφοποίηση του τμήματος Get Involved Συμπεριλαμβάνουμε μέσα στο index.html το <hr> κάτω απο το <h2>get Involved</p> Μέσα στο css/custom.css τοποθετούμε:.homepage hr { border-top: 1px solid #e74c3c; width: 150px; margin-top: 15px; } Αν θέλουμε να ευθυγραμμίσουμε ένα block element στο μέσο του γονικού element, πρέπει να του δώσουμε αριστερή και δεξιά τιμή 66

67 margin.για παράδειγμα 10px auto.σε αυτή την περίπτωση θα έχει πάνω και κάτω margin και θα ευθυγραμμιστεί. Εάν θέλουμε να κάνουμε μορφοποίηση γραμμής και θέλουμε να έχει συγκεκριμένο πλάτος είναι προτιμότερο να χρησιμοποιούμε px αντί για <hr>.γιατί το hr είναι σχετικό με το div με την κλάση container. 5.3 Δημιουργία του τμήματος Who We Are Μέσα index.html γράφουμε: <div class="container homepage"> <h2>who We Are</h2> <hr> <p>we are <a href="http://www.ie.teicrete.gr" target="_blank">applied Informatics School and Multimedia</a>. We aim to incorporate the topic of bullying prevention in lessons and activities. </p> Τοποθέτηση εικόνας του Τμήματος Μηχανικών Πληροφορικής. Μέσα στο index.html <img src="images/tei_logo" title="ατει Crete" alt="atei Crete"> Μέσα στον φάκελο css/custom.css.homepage a:hover { color: #e74c3c; text-decoration: none; opacity:.8; } Οι ψευδοκλάσεις χρησιμοποιούνται για να περιγράψουν μια συγκεκριμένη κατάσταση ενός html στοιχείου. Για παράδειγμα μπορούν να χρησιμοποιηθούν για την μορφοποίηση ενός στοιχείου όταν το ποντίκι περάσει πάνω απο αυτό. 67

68 Η ιδιότητα opacity μας δείχνει την διαφάνεια σε ένα αντικείμενο. Το opacity:.8 μας λέει οτι είναι 20% διαφανές το αντικείμενο. Αλλαγή χρώματος background. Μέσα στο index.html κάτω απο την εικόνα του ΤΕΙ και πάνω απο το div με την κλάση container βάζω το <div id="get-involved">. Έτσι το χρώμα να φτάνει σε όλο το πλάτος της σελίδας. Μέσα στο css/custom.css προσθήκη #get-involved { background-color: #f5f5f5; } Προσθήκη χώρου ανάμεσα στα Who We are και το Get Involved Mέσα στο css/custom.css προσθήκη.homepage { text-align: center; padding-bottom: 50px; padding-top: 40px } Όταν αναφερόμασταν σε divs στο custom.css γράφαμε.όνομα κλάσης ενώ όταν γράφουμε για IDs βάζουμε #.Όπως στο παράδειγμα με #get-involved. Διαφορά ΙD και κλάσης. Xρησιμοποιούμε ΙD όταν έχουμε ένα μοναδικό αντικείμενο που έχει την δική του μορφοποίηση. Ενώ χρησιμοποιούμε κλάσεις όταν έχουμε πολλά διαφορετικά αντικείμενα που θέλουμε να τα μορφοποιήσουμε με τον ίδιο τρόπο. Έτσι το site μας μετά από όλες αυτές τις αλλαγές δείχνει έτσι: 68

69 Εικόνα 38 Σχεδιασμός πάνω μέρος site Εικόνα 39Το site με την προσθήκη εικόνων Εικόνα 40 Το WHO WE ARE κομμάτι του site 69

70 Εικόνα 41 To GET ΙNVOLVED τμήμα του site 6 Συμπεράσματα Οι κινητές συσκευές συνεχίζουν να αυξάνονται σε δημοτικότητα κάθε χρόνο. Η Cisco προβλέπει ότι η παγκόσμια διακίνηση δεδομένων κινητής τηλεφωνίας θα αυξηθεί σχεδόν 11 φορές μεταξύ 2013 και Η ανάγκη να έχουμε ένα διαδραστικό δικτυακό τόπο γίνεται ολοένα και πιο σημαντική. Είναι γενικά παραδεκτό οτι τα πλεονεκτήματα της ΗTML5 ως προς το HTML4 διευκολύνουν πολύ τόσο την προώθηση ιστοσελίδων όσο και την κατασκευή ιστοσελίδων. Πλέον επιβάλλεται σε κάθε κατασκευαστή ιστοσελίδων να γνωρίζει καλά τη γλώσσα και να κάνει σωστή προώθηση του site και προώθηση στο Google. Η HTML5 προσφέρει πολύ περισσότερες δυνατότητες στις ιστοσελίδες, για παράδειγμα πιο πολλές επιλογές στην κατασκευή φορμών, όπως πεδία για , τηλέφωνα κλπ. Ακόμη, υποστηρίζεται η άμεση ενσωμάτωση βίντεο ή ήχου σε ιστοσελίδες, χωρίς την ανάγκη πρόσθετων. Επιτρέπει σε αυτούς που διαχειρίζονται ιστοσελίδες, να μπορούν να προσθέσουν περισσότερη λειτουργικότητα στην ιστοσελίδα τους, όταν μάλιστα συνδυάσουν και την επίσης καινούρια έκδοση του CSS, το CSS3. Πιο συγκεκριμένα: Offline storage: H html5 σου δίνει την δυνατότητα να χειρίζεσαι 70

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης Σελίδα 1από ΤΕΙ ΚΑΒΑΛΑΣ Πτυχιακή εργασία Δικτυακή Εφαρμογή διαχείρισης ηλεκτρονικών εγγράφων υπηρεσίας. ΕΙΣΑΓΩΓΗ Μιλτιάδης Κακλαμάνης Σελίδα 2από Κατάλογος περιεχομένων ΕΙΣΑΓΩΓΗ...1 Σχετιζόμενα πρόσωπα...3

Διαβάστε περισσότερα

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background

Διαβάστε περισσότερα

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

Διαβάστε περισσότερα

ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ. 2 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» Μέρος 1 ο HTML CSS Bootstrap v3.

ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ. 2 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» Μέρος 1 ο HTML CSS Bootstrap v3. ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 2 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» Μέρος 1 ο HTML CSS Bootstrap v3 Σταύρος Καουκάκης 1 Λίγα Λόγια για το Σχολείο Το 2 ο από συνολικά τρία σχολεία κώδικα

Διαβάστε περισσότερα

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή 1 Πίνακας Περιεχομένων 1. Εισαγωγή... 4 1.1 Περιβάλλον Moodle...4 1.2 Χρήση ονόματος χρήστη και κωδικού...4 1.3 Δημιουργία νέου μαθήματος...4 1.3.1

Διαβάστε περισσότερα

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

Διαβάστε περισσότερα

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής Εργαλεία και τεχνικές από την πλευρά του πελάτη Java Applet

Διαβάστε περισσότερα

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής 4 φάσεις διαδικτυακών εφαρμογών 1.Εφαρμογές στατικής πληροφόρησης

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 Μάθαµε στο προηγούµενο µάθηµα πώς να δίνουµε ονόµατα στις ιστοσελίδες µας, να βάζουµε χρώµα και γραφικά, ή ακόµα να δηµιουργούµε υπερσυνδέσµους σε κείµενο και εικόνες. Σήµερα µεταξύ

Διαβάστε περισσότερα

1 ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΑΣ ΓΕΩΠΟΝΙΑΣ - ΤΜΗΜΑ ΦΥΤΙΚΗΣ ΠΑΡΑΓΩΓΗΣ

1 ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΑΣ ΓΕΩΠΟΝΙΑΣ - ΤΜΗΜΑ ΦΥΤΙΚΗΣ ΠΑΡΑΓΩΓΗΣ 1 2 Περιεχόμενα 1. Εισαγωγή... 5 2. Επεξήγηση των εργαλείων που χρησιμοποιήθηκαν για την δημιουργία της ιστοσελίδας... 6 2.1 Γλώσσα προγραμματισμού ΗΤML για την δημιουργία της Ιστοσελίδας... 6 2.2 Γλώσσα

Διαβάστε περισσότερα

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών World Wide Web (WWW) Θέματα Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων XHTML στοιχείων (tags) Εξέλιξης του WWW Το WWW

Διαβάστε περισσότερα

Περιεχόμενα. Δημιουργία σύνδεσης... 27 5. ΤΙ ΕΙΝΑΙ ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ ΤΙ ΤΟΠΟΘΕΣΙΕΣ ΙΣΤΟΥ... 37. Γνωριμία με μια ιστοσελίδα:... 38

Περιεχόμενα. Δημιουργία σύνδεσης... 27 5. ΤΙ ΕΙΝΑΙ ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ ΤΙ ΤΟΠΟΘΕΣΙΕΣ ΙΣΤΟΥ... 37. Γνωριμία με μια ιστοσελίδα:... 38 Περιεχόμενα ΠΡΟΛΟΓΟΣ... 11 ΔΙΑΔΙΚΤΥΟ... 13 1. ΙΣΤΟΡΙΑ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ... 15 2. ΤΙ ΕΙΝΑΙ ΤΟ ΔΙΑΔΙΚΤΥΟ INTERNET;... 16 3. ΤΙ ΠΡΟΣΦΕΡΕΙ ΤΟ ΔΙΑΔΙΚΤΥΟ, ΤΙ ΜΠΟΡΕΙ ΝΑ ΒΡΕΙ ΚΑΝΕΙΣ... 19 4. ΤΙ ΑΠΑΙΤΕΙΤΑΙ ΓΙΑ ΝΑ

Διαβάστε περισσότερα

ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ.

ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ. ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ. Οδηγός Διαχειριστή Το m-learning Toolkit είναι μια ολοκληρωμένη πλατφόρμα εξ αποστάσεως εκπαίδευσης που έχει σχεδιαστεί για να υπάρχει η δυνατότητα της πρόσβασης

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 Dreamweaver 1/7 Εισαγωγή Το Dreamweaver είναι ένας HTML editor που αναπτύχθηκε από την Macromedia. Είναι WYSIWYG (What You See Is What You Get),

Διαβάστε περισσότερα

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies)

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) ΕΠΛ 012 ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) Διδάσκων Καθηγητής: Δημήτριος Τσουμάκος Εαρινό Εξάμηνο 2010 Βασικές Πληροφορίες Πότε: Δευτέρα & Πέμπτη 10:30-12μμ Πού: ΧΩΔ01

Διαβάστε περισσότερα

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

6 Εισαγωγή στο Wordpress 3.x

6 Εισαγωγή στο Wordpress 3.x Περιεχόμενα 1 Εγκατάσταση του WordPress... 11 Ελάχιστες απαιτήσεις... 11 Easy PHP... 12 Εγκατάσταση Easy PHP... 12 Βήματα εγκατάστασης EasyPHP με εικόνες... 13 Το EasyPHP στα Ελληνικά... 17 Κατέβασμα και

Διαβάστε περισσότερα

ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com /

ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com / ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com / 1. Τι είναι το wikidot Το wikidot είναι ένας δικτυακός τόπος στον οποίο κάθε χρήστης έχει το δικαίωμα να δημιουργήσει

Διαβάστε περισσότερα

ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΜΕ ΧΡΗΣΗ PHP

ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΜΕ ΧΡΗΣΗ PHP Αντώνης Χρυσόπουλος Κατερίνα Κυπριώτη Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΜΕ ΧΡΗΣΗ PHP Για να γίνουμε όλοι καλύτεροι άνθρωποι Τι έχει το μενού σήμερα??? 1. Τι είναι η PHP??? Τι είναι

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

Μπορείτε τα δείτε βιντεάκι με τη διαδικασία εδώ: http://www.greektuts.net/greek-in-joomla/

Μπορείτε τα δείτε βιντεάκι με τη διαδικασία εδώ: http://www.greektuts.net/greek-in-joomla/ 1) Εμφάνιση ιστοσελίδας Ανοίγουμε το πρόγραμμα πλοήγησης (Firefox, Chrome, Internet Explorer κτλ) και στη γραμμή διευθύνσεων πληκτρολογούμε τη διεύθυνση http://localhost ή http://127.0.0.1. Αν δεν βλέπουμε

Διαβάστε περισσότερα

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου.

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1> ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά

Διαβάστε περισσότερα

Περιεχόμενα. Τεχνικό εγχειρίδιο χρήσης IBNEWSLETTER

Περιεχόμενα. Τεχνικό εγχειρίδιο χρήσης IBNEWSLETTER Περιεχόμενα ΣΤΟΙΧΕΙΑ ΕΠΙΚΟΙΝΩΝΙΑΣ... 2 Τμήμα Υποστήριξης (Help Desk and Client Support)... 2 ΕΙΣΑΓΩΓΗ... 3 Εισαγωγή Email marketing... 3 Σχετικά με το IBNEWSLETTER... 3 Μεθοδολογία... 4 Χαρακτηριστικά...

Διαβάστε περισσότερα

Εισαγωγή στις αρχές του CMS. Joomla Training. Wordpress Training.

Εισαγωγή στις αρχές του CMS. Joomla Training. Wordpress Training. Εισαγωγή στις αρχές του CMS. Joomla Training. Wordpress Training. Τι είναι το CMS? Η ιστορία των CMSs Δυνατότητες των CMS Είναι τα CMSs οι σωστές λύσεις; Server-side λογισμικό που εξειδικεύεται στην απλοποιήσει,

Διαβάστε περισσότερα

Αφού δώσουμε όνομα χρήση και password μπορούμε να επιλέξουμε ημερομηνία εισόδου στο σύστημα, εταιρία και υποκατάστημα

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

Διαβάστε περισσότερα

Ανάπτυξη Υπηρεσίας Καταλόγου LDAP με τα στοιχεία του προσωπικού του TEI Πειραιά. Νίκος Πασσαράς. Εισηγητής: Πρεζεράκος Γεώργιος

Ανάπτυξη Υπηρεσίας Καταλόγου LDAP με τα στοιχεία του προσωπικού του TEI Πειραιά. Νίκος Πασσαράς. Εισηγητής: Πρεζεράκος Γεώργιος ΑΝΩΤΑΤΟ ΤΕΧΝΟΛΟΓΙΚΟ ΙΔΡΥΜΑ ΠΕΙΡΑΙΑ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΙΚΩΝ ΣΥΣΤΗΜΑΤΩΝ Ανάπτυξη Υπηρεσίας Καταλόγου LDAP με τα στοιχεία του προσωπικού του TEI Πειραιά Νίκος Πασσαράς

Διαβάστε περισσότερα

5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ

5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ 5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ 5.1 Εισαγωγή Το πρακτικό κομμάτι της πτυχιακής μας εργασίας αφορά την δημιουργία μιας λειτουργικής ιστοσελίδας με την χρήση της πλατφόρμας του Weebly, που αποτελεί μια σύγχρονη

Διαβάστε περισσότερα

Η HTML 5 θα αλλάξει το Web?

Η HTML 5 θα αλλάξει το Web? Η HTML 5 θα αλλάξει το Web? (ή αλλιώς, έρχεται το τέλος των plugins?) Αλέξανδρος Καράκος Εργαστήριο Προγραµµατισµού και Επεξεργασίας Πληροφοριών Internet 2... Είναι ένα ξεχωριστό µέσο δηµοσίευσης πληροφοριών

Διαβάστε περισσότερα

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο.

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο. Εργαστήριο #12 Από τα προηγούμενα εργαστήρια: Το εργαστήριο αυτό είναι ανεξάρτητο από τα προηγούμενα επειδή όμως ασχολείται με τη γλώσσα JavaScript, βεβαιωθείτε ότι έχετε διαβάσει το εισαγωγικό Παράρτημα

Διαβάστε περισσότερα

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet.

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΩΡΕΣ ΔΙΔΑΣΚΑΛΙΑΣ: ΕΙΔΟΣ ΜΑΘΗΜΑΤΟΣ: Μικτό Γενικός σκοπός είναι να αποκτήσει ο καταρτιζόμενος τις αναγκαίες γνώσεις σχετικά με εργαλεία και τις τεχνικές για

Διαβάστε περισσότερα

Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος

Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος Επιβλέπων Καθηγητής : Τσιαντής Λεωνίδας Φοιτητής : Μακρής Γεώργιος Δημιουργία Web Site Λογισμικό Ανάπτυξης Dreamweaver MX (Oρισμός του Site(Τα αρχεία του Site να είναι τοποθετημένα σε μια θέση την οποία

Διαβάστε περισσότερα

Διαδικτυακές Υπηρεσίες Αναζήτησης, Απεικόνισης και Απευθείας Πρόσβασης στα δεδομένα ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ. Έκδοση 0.1.

Διαδικτυακές Υπηρεσίες Αναζήτησης, Απεικόνισης και Απευθείας Πρόσβασης στα δεδομένα ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ. Έκδοση 0.1. Κομβικό Σημείο Επαφής Υπουργείου Εσωτερικών Διαδικτυακές Υπηρεσίες Αναζήτησης, Απεικόνισης και Απευθείας Πρόσβασης στα δεδομένα ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ Έκδοση 0.1. Νοέμβρης 2014 Περιεχόμενα 1. ΕΙΣΑΓΩΓΗ... 2 2.

Διαβάστε περισσότερα

Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες

Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες Εισαγωγή-Σκοπός. Τρόποι δημιουργίας δυναμικών ιστοσελίδων. Dynamic Web Pages. Dynamic Web Page Development Using Dreamweaver. Τρόποι δημιουργίας δυναμικών

Διαβάστε περισσότερα

XAMPP Apache MySQL PHP javascript xampp

XAMPP Apache MySQL PHP javascript xampp XAMPP Το xampp είναι ένα δωρεάν πρόγραμμα με το οποίο μπορούμε να κάνουμε εγκατάσταση τον Apache, τη MySQL και την PHP. Apache. Ο Apache είναι ένας Web Server. Είναι δηλαδή πρόγραμμα το οποίο τρέχει μόνιμα

Διαβάστε περισσότερα

Το διαδίκτυο είναι ένα δίκτυο που αποτελείτε από πολλά μικρότερα δίκτυα υπολογιστών.

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

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΟΔΗΓΙΩΝ ΧΡΗΣΤΗ. Ηλεκτρονική Υποβολή Α.Π.Δ.

ΕΓΧΕΙΡΙΔΙΟ ΟΔΗΓΙΩΝ ΧΡΗΣΤΗ. Ηλεκτρονική Υποβολή Α.Π.Δ. ΕΓΧΕΙΡΙΔΙΟ ΟΔΗΓΙΩΝ ΧΡΗΣΤΗ Ηλεκτρονική Υποβολή Α.Π.Δ. ΠΕΡΙΕΧΟΜΕΝΑ 1) Είσοδος στην εφαρμογή 2) Δημιουργία Περιόδου Υποβολής 2.α) Ακύρωση Περιόδου Υποβολής 3) Μέθοδος Υποβολής: Συμπλήρωση Φόρμας 3.α) Συμπλήρωση

Διαβάστε περισσότερα

Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word

Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word Επειδή οι μεταγενέστερες εκδόσεις του Word δεν περιλαμβάνουν στο μενού τη δυνατότητα δημιουργίας πολλαπλών

Διαβάστε περισσότερα

ΣΧΕΔΙΑΣΜΟΣ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΤΗ ΧΡΗΣΗ ΠΡΟΤΥΠΟΥ ΙΣΤΟΣΕΛΙΔΑΣ (TEMPLATE) ΣΤΟ ΠΡΟΓΡΑΜΜΑ MICROSOFT OFFICE SHAREPOINT DESIGNER 2007

ΣΧΕΔΙΑΣΜΟΣ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΤΗ ΧΡΗΣΗ ΠΡΟΤΥΠΟΥ ΙΣΤΟΣΕΛΙΔΑΣ (TEMPLATE) ΣΤΟ ΠΡΟΓΡΑΜΜΑ MICROSOFT OFFICE SHAREPOINT DESIGNER 2007 ΣΧΕΔΙΑΣΜΟΣ ΙΣΤΟΣΕΛΙΔΑΣ ΜΕ ΤΗ ΧΡΗΣΗ ΠΡΟΤΥΠΟΥ ΙΣΤΟΣΕΛΙΔΑΣ (TEMPLATE) ΣΤΟ ΠΡΟΓΡΑΜΜΑ MICROSOFT OFFICE SHAREPOINT DESIGNER 2007 Ο σχεδιασμός ιστοσελίδας με τη χρήση του προγράμματος Microsoft Office SharePoint

Διαβάστε περισσότερα

Εγκατάσταση Joomla 1. Στο Π.Σ.Δ. (www.sch.gr) 2. Τοπικά 3. Σε δωρεάν Server

Εγκατάσταση Joomla 1. Στο Π.Σ.Δ. (www.sch.gr) 2. Τοπικά 3. Σε δωρεάν Server Γεώργιος Χρ. Μακρής Εγκατάσταση Joomla 1. Στο Π.Σ.Δ. (www.sch.gr) 2. Τοπικά 3. Σε δωρεάν Server 2012 Γ ε ώ ρ γ ι ο ς Χ ρ. Μ α κ ρ ή ς ( h t t p : / / u s e r s. s c h. g r / g m a k r i s ) Περιεχόμενα

Διαβάστε περισσότερα

hel-col@otenet.gr Κωνσταντίνος Παρασκευόπουλος Καθηγητής Πληροφορικής (ΠΕ19 MSc) Ελληνικό Κολλέγιο Θεσσαλονίκης kparask@hellenic-college.

hel-col@otenet.gr Κωνσταντίνος Παρασκευόπουλος Καθηγητής Πληροφορικής (ΠΕ19 MSc) Ελληνικό Κολλέγιο Θεσσαλονίκης kparask@hellenic-college. Χρήση της Διεπαφής Προγραμματισμού Εφαρμογής Google Maps για τη δημιουργία διαδραστικού χάρτη με τα Μνημεία Παγκόσμιας Πολιτιστικής Κληρονομιάς της ΟΥΝΕΣΚΟ στη Θεσσαλονίκη Εμμανουήλ Τσάμης 1, Κωνσταντίνος

Διαβάστε περισσότερα

Vodafone Business Connect

Vodafone Business Connect Vodafone Business Connect Vodafone Business WebHosting Αναλυτικός Οδηγός Χρήσης Photo Album Αναλυτικός οδηγός χρήσης: Photo Album Vodafone Business Connect - Υπηρεσίες φιλοξενίας εταιρικού e-mail & web

Διαβάστε περισσότερα

Ξεκινώντας με το MIT Αρρ Inventor. 1 η Εργασία

Ξεκινώντας με το MIT Αρρ Inventor. 1 η Εργασία Ξεκινώντας με το MIT Αρρ Inventor 1 η Εργασία Απαιτήσεις 1. Σύνδεση στο Διαδίκτυο (διότι οι εφαρμογές δημιουργούνται online) 2. Εγκατεστημένος ο Browser Google Chrome 3. Υπαρκτός λογαριασμός Gmail 4. Κατεβάστε

Διαβάστε περισσότερα

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000. PIRCH 32 v0.92b

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000. PIRCH 32 v0.92b PIRCH 32 v0.92b A.S. DRIGAS Applied Technologies Department NCSR DEMOKRITOS Ag. Paraskevi GREECE dr@imm.demokritos.gr http://imm.demokritos.gr Το Pirch 32 είναι ένα από τα καλύτερα προγράµµατα επικοινωνίας

Διαβάστε περισσότερα

Πλοήγηση www / Με τον Internet Explorer

Πλοήγηση www / Με τον Internet Explorer Πλοήγηση www / Με τον Internet Explorer Περιεχόμενα 1.Eισαγωγή 2.Το περιβάλλον του Internet Explorer 3.Οδηγίες πλοήγησης 4.Αποθήκευση αρχείων 5.Αγαπημένα 6.Ασφαλής σύνδεση 7.Διακομιστής μεσολάβησης 1.Εισαγωγή

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ 1: 1 Εισαγωγή, Χρήσιμες Εφαρμογές

ΕΡΓΑΣΤΗΡΙΟ 1: 1 Εισαγωγή, Χρήσιμες Εφαρμογές ΕΡΓΑΣΤΗΡΙΟ 1: 1 Εισαγωγή, Χρήσιμες Εφαρμογές Σκοπός του εργαστηρίου αυτού είναι η εξοικείωση με κάποιες εφαρμογές που θα μας φανούν πολύ χρήσιμες κατά τη διάρκεια του μαθήματος της Εισαγωγής στον Προγραμματισμό.

Διαβάστε περισσότερα

Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network).

Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network). ΙΔΡΥΜΑ ΝΕΟΛΑΙΑΣ ΚΑΙ ΔΙΑ ΒΙΟΥ ΜΑΘΗΣΗΣ ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΥΟΥ Καλαμάτα, 2015 Το Διαδίκτυο Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network). Πρόκειται

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ της Πλατφόρμας Τηλεκατάρτισης ΠΕΡΙΕΧΟΜΕΝΑ 1. Εισαγωγή...2 2. Αρχική σελίδα, Εισαγωγή & Περιβάλλον Συστήματος...3 2.1. Αρχική σελίδα εισαγωγής...3 2.2. Εισαγωγή στην Πλατφόρμα Τηλε-κατάρτισης...4

Διαβάστε περισσότερα

ΟΔΗΓΟΣ ΧΡΗΣΗΣ WEBMAIL ΤΕΙ ΚΑΛΑΜΑΤΑΣ

ΟΔΗΓΟΣ ΧΡΗΣΗΣ WEBMAIL ΤΕΙ ΚΑΛΑΜΑΤΑΣ ΟΔΗΓΟΣ ΧΡΗΣΗΣ WEBMAIL ΤΕΙ ΚΑΛΑΜΑΤΑΣ ΠΕΡΙΕΧΟΜΕΝΑ 1. URL Διεύθυνση WebMail... 3 2. Εγκατάσταση Πιστοποιητικού Ασφάλειας... 3 2.1 Εγκατάσταση Πιστοποιητικού στον Internet Explorer... 3 2.2 Εγκατάσταση Πιστοποιητικού

Διαβάστε περισσότερα

SITEBUILDER ΠΛΑΤΦΟΡΜΑ ΑΥΤΟΝΟΜΗΣ ΚΑΤΑΣΚΕΥΗΣ & ΔΙΑΧΕΙΡΙΣΗΣ ΔΙΚΤΥΑΚΩΝ ΤΟΠΩΝ (WEBSITE) ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ. Version 2.0

SITEBUILDER ΠΛΑΤΦΟΡΜΑ ΑΥΤΟΝΟΜΗΣ ΚΑΤΑΣΚΕΥΗΣ & ΔΙΑΧΕΙΡΙΣΗΣ ΔΙΚΤΥΑΚΩΝ ΤΟΠΩΝ (WEBSITE) ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ. Version 2.0 SITEBUILDER ΠΛΑΤΦΟΡΜΑ ΑΥΤΟΝΟΜΗΣ ΚΑΤΑΣΚΕΥΗΣ & ΔΙΑΧΕΙΡΙΣΗΣ ΔΙΚΤΥΑΚΩΝ ΤΟΠΩΝ (WEBSITE) ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ Version 2.0 Περιεχόμενα 1. Οδηγίες πρόσβασης... 3 2. Οδηγίες Σχεδιασμού Website... 4 2.1. Έναρξη...

Διαβάστε περισσότερα

Internet Business Hellas

Internet Business Hellas Internet Business Hellas Περιεχόμενα Εισαγωγή email marketing IBNEWSLETTER Χαρακτηριστικά Πλεονεκτήματα Επικοινωνία Εισαγωγή email marketing «Το μάρκετινγκ μέσω ηλεκτρονικού ταχυδρομείου συνίσταται στην

Διαβάστε περισσότερα

Τεχνικός Εφαρμογών Πληροφορικής

Τεχνικός Εφαρμογών Πληροφορικής Τεχνικός Εφαρμογών Πληροφορικής ΓΛΩΣΣΑ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΥ ΕΙΣΑΓΩΓΗ Εξάμηνο: 2014Β Διδάσκουσα: Ηλεκτρονική Τάξη: Κανελλοπούλου Χριστίνα_ΠΕ19 Πληροφορικής Περιεχόμενα 1.Τι είναι η Php; 2.Πως γίνετε η γραφή

Διαβάστε περισσότερα

Οδηγός Εγκατάστασης και Χρήσης του Arebas Easy

Οδηγός Εγκατάστασης και Χρήσης του Arebas Easy Σ ε λ ί δ α 1 Οδηγός Εγκατάστασης και Χρήσης του Arebas Easy Περιεχόμενα 1. Download Arebas Easy... 2 2. Εγκατάσταση Arebas Easy... 3 3. Εγγραφή στον Arebas Server... 7 4. Παραμετροποίηση Arebas Easy...

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

Σεμινάριο joomla! 3. Διοργάνωση: Άλφα Εκπαιδευτική Εισηγητής: Μοτσενίγος Ιωάννης Ηλεκτρονικός Μηχανικός-Σύμβουλος Internet Marketing- Web Designer

Σεμινάριο joomla! 3. Διοργάνωση: Άλφα Εκπαιδευτική Εισηγητής: Μοτσενίγος Ιωάννης Ηλεκτρονικός Μηχανικός-Σύμβουλος Internet Marketing- Web Designer Σεμινάριο joomla! 3 Διοργάνωση: Άλφα Εκπαιδευτική Εισηγητής: Μοτσενίγος Ιωάννης Ηλεκτρονικός Μηχανικός-Σύμβουλος Internet Marketing- Web Designer Ξεκινώντας:Τι είναι τα CMS Η Joomla είναι λογισμικό κατασκευής

Διαβάστε περισσότερα

Ιδρυματικό Αποθετήριο ΤΕΙ ΠΕΙΡΑΙΑ

Ιδρυματικό Αποθετήριο ΤΕΙ ΠΕΙΡΑΙΑ Ιδρυματικό Αποθετήριο ΤΕΙ ΠΕΙΡΑΙΑ Οδηγίες κατάθεσης εργασίας στο σύστημα διαχείρισης αποθετηρίου DSpace 2 Κατάθεση εργασίας στο σύστημαdspace 1. Είσοδος στο σύστημα 1. Ανοίγουμε ένα γνωστό φυλλομετρητή

Διαβάστε περισσότερα

Vodafone Business Connect

Vodafone Business Connect Vodafone Business Connect Vodafone Business WebHosting Αναλυτικός Οδηγός Χρήσης Advanced Template Manager Αναλυτικός οδηγός χρήσης: Advanced template Manager Vodafone Business Connect - Υπηρεσίες φιλοξενίας

Διαβάστε περισσότερα

Εμφάνιση και κρύψιμο στοιχείων

Εμφάνιση και κρύψιμο στοιχείων Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου

Διαβάστε περισσότερα

Τ.Ε.Ι. Δυτικής Ελλάδας Τμήμα Διοίκησης Επιχειρήσεων Μεσολόγγι. 6 η Διάλεξη. Μάθημα: Τεχνολογίες Διαδικτύου

Τ.Ε.Ι. Δυτικής Ελλάδας Τμήμα Διοίκησης Επιχειρήσεων Μεσολόγγι. 6 η Διάλεξη. Μάθημα: Τεχνολογίες Διαδικτύου Τ.Ε.Ι. Δυτικής Ελλάδας Τμήμα Διοίκησης Επιχειρήσεων Μεσολόγγι 6 η Διάλεξη Μάθημα: Τεχνολογίες Διαδικτύου Περιεχόμενα 6 η διάλεξη Browsers Θέματα σχεδιασμού web σελίδων Browsers Οι δημοφιλέστεροι Internet

Διαβάστε περισσότερα

Οδηγός γρήγορης εκκίνησης

Οδηγός γρήγορης εκκίνησης Οδηγός γρήγορης εκκίνησης Το Microsoft Word 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης. Γραμμή

Διαβάστε περισσότερα

Οδηγός Χρήσης Η-Βιβλίων EBSCO ΒΙΒΛΙΟΘΗΚΗ & ΚΕΝΤΡΟ ΠΛΗΡΟΦΟΡΗΣΗΣ ΠΑΝΕΠΙΣΤΗΜΙΟΥ ΛΕΥΚΩΣΙΑΣ

Οδηγός Χρήσης Η-Βιβλίων EBSCO ΒΙΒΛΙΟΘΗΚΗ & ΚΕΝΤΡΟ ΠΛΗΡΟΦΟΡΗΣΗΣ ΠΑΝΕΠΙΣΤΗΜΙΟΥ ΛΕΥΚΩΣΙΑΣ Οδηγός Χρήσης Απρίλιος, 2014 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ ΠΛΗΡΟΦΟΡΙΕΣ ΓΙΑ ΤΑ ΗΛΕΚΤΡΟΝΙΚΑ ΒΙΒΛΙΑ ΤΗΣ EBSCO... 3 1. ΑΠΑΙΤΗΣΕΙΣ ΣΥΣΤΗΜΑΤΟΣ... 3 ΕΓΚΑΤΑΣΤΑΣΗ ADOBE DIGITAL EDITIONS... 3 2. ΑΝΑΖΗΤΗΣΗ Η-ΒΙΒΛΙΩΝ... 4

Διαβάστε περισσότερα

<BODY></a> </h3> <p> <img alt="<HTML> <HEAD> <TITLE> <BODY>" title="<HTML> <HEAD> <TITLE> <BODY>" class="news-block-img pull-right" src="/thumbs/26/2082816.jpg"> ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες </p> <a href="/2082816-Html-head-title-body.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/67003-Vaseis-dedomenon-access.html">Βάσεις δεδομένων (Access)</a> </h3> <p> <img alt="Βάσεις δεδομένων (Access)" title="Βάσεις δεδομένων (Access)" class="news-block-img pull-right" src="/thumbs/17/67003.jpg"> Βάσεις δεδομένων (Access) Όταν εκκινούμε την Access εμφανίζεται το παρακάτω παράθυρο: Για να φτιάξουμε μια νέα ΒΔ κάνουμε κλικ στην επιλογή «Κενή βάση δεδομένων» στο Παράθυρο Εργασιών. Θα εμφανιστεί το </p> <a href="/67003-Vaseis-dedomenon-access.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3552009-Parartima-a-php-html-formes-kai-to-protokollo-http.html">Παράρτημα A: PHP, HTML φόρμες και το πρωτόκολλο HTTP.</a> </h3> <p> <img alt="Παράρτημα A: PHP, HTML φόρμες και το πρωτόκολλο HTTP." title="Παράρτημα A: PHP, HTML φόρμες και το πρωτόκολλο HTTP." class="news-block-img pull-right" src="/thumbs/24/3552009.jpg"> Εργαστήριο #5 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Θα πρέπει να ξέρετε να εισάγετε ένα βασικό πρόγραμμα PHP μέσα σε μια ιστοσελίδα, τη χρήση της echo και τον χειρισμό απλών μεταβλητών </p> <a href="/3552009-Parartima-a-php-html-formes-kai-to-protokollo-http.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7982152-Pneymatika-dikaiomata-2013-idryma-ecdl-ecdl-foundation-www-ecdl-org.html">Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org)</a> </h3> <p> <img alt="Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org)" title="Πνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org)" class="news-block-img pull-right" src="/thumbs/26/7982152.jpg"> PEOPLECERT Hellas A.E - Φορέας Πιστοποίησης Ανθρώπινου Δυναμικού Κοραή 3, 105 64 Αθήνα, Τηλ.: 210 372 9100, Fax: 210 372 9101, e-mail: info@peoplecert.org, www.peoplecert.org Πνευματικά Δικαιώματα 2013 </p> <a href="/7982152-Pneymatika-dikaiomata-2013-idryma-ecdl-ecdl-foundation-www-ecdl-org.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9739371-Idrymatiko-apothetirio-aei-peiraia-t-t.html">Ιδρυματικό Αποθετήριο ΑΕΙ ΠΕΙΡΑΙΑ Τ.Τ.</a> </h3> <p> <img alt="Ιδρυματικό Αποθετήριο ΑΕΙ ΠΕΙΡΑΙΑ Τ.Τ." title="Ιδρυματικό Αποθετήριο ΑΕΙ ΠΕΙΡΑΙΑ Τ.Τ." class="news-block-img pull-right" src="/thumbs/27/9739371.jpg"> Ιδρυματικό Αποθετήριο ΑΕΙ ΠΕΙΡΑΙΑ Τ.Τ. Οδηγίες κατάθεσης εργασίας στο σύστημα διαχείρισης αποθετηρίου DSpace 2 Κατάθεση εργασίας στο σύστημα Ιδρυματικού Αποθετηρίου 1. Είσοδος στο σύστημα 1. Ανοίγουμε </p> <a href="/9739371-Idrymatiko-apothetirio-aei-peiraia-t-t.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/652634-Singular-report-generator-sh-1-iuioyrgia-katastaseon-srg.html">Singular Report Generator. Σχ 1 ηµιουργία Καταστάσεων SRG</a> </h3> <p> <img alt="Singular Report Generator. Σχ 1 ηµιουργία Καταστάσεων SRG" title="Singular Report Generator. Σχ 1 ηµιουργία Καταστάσεων SRG" class="news-block-img pull-right" src="/thumbs/20/652634.jpg"> Μια από τις πιο σηµαντικές ανάγκες που αντιµετωπίζει µια επιχείρηση κατά την εγκατάσταση ενός λογισµικού «πακέτου» (Οικονοµικής & Εµπορικής ιαχείρισης), είναι ο τρόπος µε τον οποίο πρέπει να ανταποκριθεί </p> <a href="/652634-Singular-report-generator-sh-1-iuioyrgia-katastaseon-srg.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/940088-Drastiriotita-prostasia-prosopikon-dedomenon-sto-ls-windows-8.html">Δραστηριότητα : Προστασία προσωπικών δεδομένων στο ΛΣ Windows 8</a> </h3> <p> <img alt="Δραστηριότητα : Προστασία προσωπικών δεδομένων στο ΛΣ Windows 8" title="Δραστηριότητα : Προστασία προσωπικών δεδομένων στο ΛΣ Windows 8" class="news-block-img pull-right" src="/thumbs/18/940088.jpg"> Δραστηριότητα : Προστασία προσωπικών δεδομένων στο ΛΣ Windows 8 Επίπεδο: L1- Εύκολη Διάρκεια: 5 λεπτά Σύντομη Περιγραφή Όταν πλοηγούμαστε στον Ιστό, ο φυλλομετρητής (Browser) αποθηκεύει πληροφορίες για </p> <a href="/940088-Drastiriotita-prostasia-prosopikon-dedomenon-sto-ls-windows-8.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/869653-Ergastirio-3-programmatistika-perivallonta-kai-to-proto-programma-c.html">ΕΡΓΑΣΤΗΡΙΟ 3: Προγραμματιστικά Περιβάλλοντα και το Πρώτο Πρόγραμμα C</a> </h3> <p> <img alt="ΕΡΓΑΣΤΗΡΙΟ 3: Προγραμματιστικά Περιβάλλοντα και το Πρώτο Πρόγραμμα C" title="ΕΡΓΑΣΤΗΡΙΟ 3: Προγραμματιστικά Περιβάλλοντα και το Πρώτο Πρόγραμμα C" class="news-block-img pull-right" src="/thumbs/18/869653.jpg"> ΕΡΓΑΣΤΗΡΙΟ 3: Προγραμματιστικά Περιβάλλοντα και το Πρώτο Πρόγραμμα C Στο εργαστήριο αυτό, θα ασχοληθούμε με δύο προγραμματιστικά περιβάλλοντα για τη γλώσσα C: τον gcc μεταγλωττιστή της C σε περιβάλλον </p> <a href="/869653-Ergastirio-3-programmatistika-perivallonta-kai-to-proto-programma-c.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3751613-Dimioyrgontas-mia-efarmogi-zografikis-2-i-ergasia.html">Δημιουργώντας μια εφαρμογή ζωγραφικής. 2 η Εργασία</a> </h3> <p> <img alt="Δημιουργώντας μια εφαρμογή ζωγραφικής. 2 η Εργασία" title="Δημιουργώντας μια εφαρμογή ζωγραφικής. 2 η Εργασία" class="news-block-img pull-right" src="/thumbs/24/3751613.jpg"> Δημιουργώντας μια εφαρμογή ζωγραφικής 2 η Εργασία Απαιτήσεις 1. Σύνδεση στο Διαδίκτυο (διότι οι εφαρμογές δημιουργούνται online) 2. Εγκατεστημένος ο Browser Google Chrome 3. Υπαρκτός λογαριασμός Gmail </p> <a href="/3751613-Dimioyrgontas-mia-efarmogi-zografikis-2-i-ergasia.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9406317-Tehnologies-pagkosmioy-istoy-1i-dialexi.html">Τεχνολογίες Παγκόσμιου Ιστού. 1η διάλεξη</a> </h3> <p> <img alt="Τεχνολογίες Παγκόσμιου Ιστού. 1η διάλεξη" title="Τεχνολογίες Παγκόσμιου Ιστού. 1η διάλεξη" class="news-block-img pull-right" src="/thumbs/26/9406317.jpg"> Τεχνολογίες Παγκόσμιου Ιστού 1η διάλεξη Χαρακτηριστικά Μαθήματος Μάθημα προγραμματισμού (και όχι μόνον) Μπορεί να εξελιχθεί σε εφιάλτη αν δεν έχετε καλή γνώση και αρκετή εμπειρία προγραμματισμού (Java) </p> <a href="/9406317-Tehnologies-pagkosmioy-istoy-1i-dialexi.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/705273-Doyleyo-ilektronika-doyleyo-grigora-kai-me-asfaleia-by-e-base-gr.html">«Δουλεύω Ηλεκτρονικά, Δουλεύω Γρήγορα και με Ασφάλεια - by e-base.gr»</a> </h3> <p> <img alt="«Δουλεύω Ηλεκτρονικά, Δουλεύω Γρήγορα και με Ασφάλεια - by e-base.gr»" title="«Δουλεύω Ηλεκτρονικά, Δουλεύω Γρήγορα και με Ασφάλεια - by e-base.gr»" class="news-block-img pull-right" src="/thumbs/18/705273.jpg"> Επεξήγηση web site με λογικό διάγραμμα «Δουλεύω Ηλεκτρονικά, Δουλεύω Γρήγορα και με Ασφάλεια - by e-base.gr» Web : www.e-base.gr E-mail : support@e-base.gr Facebook : Like Twitter : @ebasegr Πολλοί άνθρωποι </p> <a href="/705273-Doyleyo-ilektronika-doyleyo-grigora-kai-me-asfaleia-by-e-base-gr.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1958831-Dynamikes-istoselides-eisagogi-stin-javascript-gia-programmatismo-stin-pleyra-toy-client.html">Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client</a> </h3> <p> <img alt="Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client" title="Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client" class="news-block-img pull-right" src="/thumbs/23/1958831.jpg"> ΕΣΔ 516 Τεχνολογίες Διαδικτύου Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client Περιεχόμενα Περιεχόμενα Javascript και HTML Βασική σύνταξη Μεταβλητές Τελεστές Συναρτήσεις </p> <a href="/1958831-Dynamikes-istoselides-eisagogi-stin-javascript-gia-programmatismo-stin-pleyra-toy-client.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/11033477-Joomla-with-k2-user-guide.html">Joomla! with K2 - User Guide</a> </h3> <p> <img alt="Joomla! with K2 - User Guide" title="Joomla! with K2 - User Guide" class="news-block-img pull-right" src="/thumbs/27/11033477.jpg"> Joomla! with K2 - User Guide τελευταία ανανέωση: 27/03/2014 από την ICAP WEB Solutions 1 Η κατασκευή της δυναμικής σας ιστοσελίδας έχει ολοκληρωθεί και μπορείτε πλέον να προχωρήσετε σε αλλαγές ή προσθήκες </p> <a href="/11033477-Joomla-with-k2-user-guide.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/11714092-Geniko-tmima-paidagogikon-mathimaton.html">Γενικό Τμήμα Παιδαγωγικών Μαθημάτων</a> </h3> <p> <img alt="Γενικό Τμήμα Παιδαγωγικών Μαθημάτων" title="Γενικό Τμήμα Παιδαγωγικών Μαθημάτων" class="news-block-img pull-right" src="/thumbs/27/11714092.jpg"> Α.Σ.ΠΑΙ.Τ.Ε. ΑΝΩΤΑΤΗ ΣΧΟΛΗ ΠΑΙΔΑΓΩΓΙΚΗΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΚΗΣ ΕΚΠΑΙΔΕΥΣΗΣ Γενικό Τμήμα Παιδαγωγικών Μαθημάτων ΜΑΘΗΜΑ: ΕΚΠΑΙΔΕΥΤΙΚΗ ΤΕΧΝΟΛΟΓΙΑ ΠΟΛΥΜΕΣΑ (ΕΡΓΑΣΤΗΡΙΟ) Συνοπτικός οδηγός αξιοποίησης βασικών δυνατοτήτων </p> <a href="/11714092-Geniko-tmima-paidagogikon-mathimaton.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/842874-Hrisimes-odigies-gia-tin-poreia-dimioyrgias-istoselidon.html">Χρήσιμες οδηγίες για την πορεία δημιουργίας ιστοσελίδων</a> </h3> <p> <img alt="Χρήσιμες οδηγίες για την πορεία δημιουργίας ιστοσελίδων" title="Χρήσιμες οδηγίες για την πορεία δημιουργίας ιστοσελίδων" class="news-block-img pull-right" src="/thumbs/18/842874.jpg"> Χρήσιμες οδηγίες για την πορεία δημιουργίας ιστοσελίδων Η δημιουργία ιστοσελίδων και η φιλοξενία τους στο διαδίκτυο αποτελεί σήμερα ένα άμεσο και εύκολο τρόπο επικοινωνίας, ενημέρωσης, προβολής και προώθησης </p> <a href="/842874-Hrisimes-odigies-gia-tin-poreia-dimioyrgias-istoselidon.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2288262-Interactivecommunication-white-paper-2007-cybertechnics-ltd-all-rights-reserved.html">interactivecommunication White Paper 2007, Cybertechnics Ltd. All rights reserved.</a> </h3> <p> <img alt="interactivecommunication White Paper 2007, Cybertechnics Ltd. All rights reserved." title="interactivecommunication White Paper 2007, Cybertechnics Ltd. All rights reserved." class="news-block-img pull-right" src="/thumbs/24/2288262.jpg"> interactivecommunication ModusWEB TM CMS White Paper Φεβρουάριος 2007 2007, Cybertechnics Ltd. All rights reserved. Σήμερα κάθε επιχείρηση χρειάζεται να διαχειριστεί κάποια μορφή online ψηφιακούπεριεχομένου. </p> <a href="/2288262-Interactivecommunication-white-paper-2007-cybertechnics-ltd-all-rights-reserved.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2288183-Ti-einai-ena-systima-diaheirisis-periehomenoy-dynamiko-periehomeno.html">Τι είναι ένα σύστημα διαχείρισης περιεχομένου; δυναμικό περιεχόμενο</a> </h3> <p> <img alt="Τι είναι ένα σύστημα διαχείρισης περιεχομένου; δυναμικό περιεχόμενο" title="Τι είναι ένα σύστημα διαχείρισης περιεχομένου; δυναμικό περιεχόμενο" class="news-block-img pull-right" src="/thumbs/24/2288183.jpg"> Τι είναι ένα σύστημα διαχείρισης περιεχομένου; Παρά την μεγάλη εξάπλωση του διαδικτύου και τον ολοένα αυξανόμενο αριθμό ιστοσελίδων, πολλές εταιρείες ή χρήστες δεν είναι εξοικειωμένοι με την τεχνολογία </p> <a href="/2288183-Ti-einai-ena-systima-diaheirisis-periehomenoy-dynamiko-periehomeno.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4327639-Tehnologies-diadiktyoy-server-side-scripting-i-php.html">Τεχνολογίες Διαδικτύου. Server Side Scripting I PHP</a> </h3> <p> <img alt="Τεχνολογίες Διαδικτύου. Server Side Scripting I PHP" title="Τεχνολογίες Διαδικτύου. Server Side Scripting I PHP" class="news-block-img pull-right" src="/thumbs/24/4327639.jpg"> Τεχνολογίες Διαδικτύου Server Side Scripting I PHP Εισαγωγή PHP PHP:Hypertext Preprocessor Mηχανή που συνοδεύει web servers όπως ο IIS και ο Apache Η PHP είναι γλώσσα προγραμματισμού για web εφαρμογές </p> <a href="/4327639-Tehnologies-diadiktyoy-server-side-scripting-i-php.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7412502-Pos-tha-kataskeyaso-to-proto-programma.html">Πως θα κατασκευάσω το πρώτο πρόγραμμα;</a> </h3> <p> <img alt="Πως θα κατασκευάσω το πρώτο πρόγραμμα;" title="Πως θα κατασκευάσω το πρώτο πρόγραμμα;" class="news-block-img pull-right" src="/thumbs/26/7412502.jpg"> Εργαστήριο Δομημένος Προγραμματισμός (C#) Τμήμα Μηχανολογίας Νικόλαος Ζ. Ζάχαρης Καθηγητής Εφαρμογών Σκοπός Να γίνει εξοικείωση το μαθητών με τον ΗΥ και το λειτουργικό σύστημα. - Επίδειξη του My Computer </p> <a href="/7412502-Pos-tha-kataskeyaso-to-proto-programma.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/341861-Powerpoint-2003-einai-to-dimofilestero-programma-paroysiaseon.html">POWERPOINT 2003. Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων.</a> </h3> <p> <img alt="POWERPOINT 2003. Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων." title="POWERPOINT 2003. Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων." class="news-block-img pull-right" src="/thumbs/19/341861.jpg"> POWERPOINT 2003 1. Τι είναι το PowerPoint (ppt)? Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων. 2. Τι δυνατότητες έχει? Δημιουργία παρουσίασης. Μορφοποίηση παρουσίασης. Δημιουργία γραφικών. Δημιουργία </p> <a href="/341861-Powerpoint-2003-einai-to-dimofilestero-programma-paroysiaseon.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7982139-Periehomena-prologos-13-kefalaio-1-o-arhes-diaheirisis-pliroforias-ston-pagkosmio-isto-15.html">ΠΕΡΙΕΧΟΜΕΝΑ. Πρόλογος... 13. Κεφάλαιο 1 ο Αρχές Διαχείρισης πληροφορίας στον Παγκόσμιο Ιστό... 15</a> </h3> <p> <img alt="ΠΕΡΙΕΧΟΜΕΝΑ. Πρόλογος... 13. Κεφάλαιο 1 ο Αρχές Διαχείρισης πληροφορίας στον Παγκόσμιο Ιστό... 15" title="ΠΕΡΙΕΧΟΜΕΝΑ. Πρόλογος... 13. Κεφάλαιο 1 ο Αρχές Διαχείρισης πληροφορίας στον Παγκόσμιο Ιστό... 15" class="news-block-img pull-right" src="/thumbs/26/7982139.jpg"> ΠΕΡΙΕΧΟΜΕΝΑ Πρόλογος... 13 Κεφάλαιο 1 ο Αρχές Διαχείρισης πληροφορίας στον Παγκόσμιο Ιστό... 15 1.1 Εισαγωγή... 16 1.2 Διαδίκτυο και Παγκόσμιος Ιστός Ιστορική αναδρομή... 17 1.3 Αρχές πληροφοριακών συστημάτων </p> <a href="/7982139-Periehomena-prologos-13-kefalaio-1-o-arhes-diaheirisis-pliroforias-ston-pagkosmio-isto-15.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3694570-Website-guide-b2b-e-shop.html">website guide B2B e-shop</a> </h3> <p> <img alt="website guide B2B e-shop" title="website guide B2B e-shop" class="news-block-img pull-right" src="/thumbs/24/3694570.jpg"> website guide B2B e-shop Η ιστοσελίδα της Sun Electronics κατασκευάστηκε για να παρέχει χρήσιμες πληροφορίες τόσο στους συνεργάτες της όσο και στους τελικούς καταναλωτές. Σχεδιάστηκε έτσι ώστε η τιμολογιακή </p> <a href="/3694570-Website-guide-b2b-e-shop.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2455951-Blog-sto-wordpress-epimeleia-deggleri-sofia.html">Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία</a> </h3> <p> <img alt="Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία" title="Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία" class="news-block-img pull-right" src="/thumbs/24/2455951.jpg"> Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Widgets Μετάβαση στο blog Πληκτρολογούμε </p> <a href="/2455951-Blog-sto-wordpress-epimeleia-deggleri-sofia.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/12584688-Vaseis-dedomenon-access.html">Βάσεις δεδομένων (Access)</a> </h3> <p> <img alt="Βάσεις δεδομένων (Access)" title="Βάσεις δεδομένων (Access)" class="news-block-img pull-right" src="/thumbs/28/12584688.jpg"> Βάσεις δεδομένων (Access) Όταν εκκινούμε την Access εμφανίζεται το παρακάτω παράθυρο: Κουμπί Κενή βάση δεδομένων Κουμπί του Office Για να φτιάξουμε μια νέα ΒΔ κάνουμε κλικ στο κουμπί «Κενή βάση δεδομένων» </p> <a href="/12584688-Vaseis-dedomenon-access.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9879733-Ergastirio-front-page-3.html">ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 3</a> </h3> <p> <img alt="ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 3" title="ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 3" class="news-block-img pull-right" src="/thumbs/27/9879733.jpg"> ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 3 Φόρµες Ένας τρόπος για να συλλέξετε πληροφορία από τους επισκέπτες του δικτυακού σας τόπου είναι οι φόρµες. Με τα εξειδικευµένα αυτά εργαλεία µπορείτε να κάνετε έρευνες ή τεστ, </p> <a href="/9879733-Ergastirio-front-page-3.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7950945-Odigies-hrisis-classweb-eisagogi-vathmologion-apo-didaskontes-meso-diadiktyoy.html">ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ CLASSWEB Εισαγωγή βαθμολογιών από διδάσκοντες μέσω Διαδικτύου</a> </h3> <p> <img alt="ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ CLASSWEB Εισαγωγή βαθμολογιών από διδάσκοντες μέσω Διαδικτύου" title="ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ CLASSWEB Εισαγωγή βαθμολογιών από διδάσκοντες μέσω Διαδικτύου" class="news-block-img pull-right" src="/thumbs/26/7950945.jpg"> ΠΑΝΕΠΙΣΤΗΜΙΟ ΙΩΑΝΝΙΝΩΝ ΔΙΕΥΘΥΝΣΗ ΜΗΧΑΝΟΡΓΑΝΩΣΗΣ ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ CLASSWEB Εισαγωγή βαθμολογιών από διδάσκοντες μέσω Διαδικτύου Συντάκτες: Παναγιώτα Μπούγια Θεοδώρα Νάνου Ιανουάριος 2015 Περιεχόμενα 1. Εισαγωγή... </p> <a href="/7950945-Odigies-hrisis-classweb-eisagogi-vathmologion-apo-didaskontes-meso-diadiktyoy.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2765909-Dimioyrgia-kai-syntirisi-istotopoy-me-hrisi-wordpress.html">Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress</a> </h3> <p> <img alt="Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress" title="Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress" class="news-block-img pull-right" src="/thumbs/24/2765909.jpg"> Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress Διήμερο σεμινάριο για δημιουργία ιστοσελίδων με WordPress στο περιβάλλον του ΠΣΔ για τους εκπαιδευτικούς ΠΕ19/20 Βερύκιος Α., ΚΕΠΛΗΝΕΤ Λευκάδας Διήμερο </p> <a href="/2765909-Dimioyrgia-kai-syntirisi-istotopoy-me-hrisi-wordpress.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2096187-World-wide-web-o-pagkosuios-istos-pliroforion.html">World Wide Web: Ο παγκόσµιος ιστός Πληροφοριών</a> </h3> <p> <img alt="World Wide Web: Ο παγκόσµιος ιστός Πληροφοριών" title="World Wide Web: Ο παγκόσµιος ιστός Πληροφοριών" class="news-block-img pull-right" src="/thumbs/26/2096187.jpg"> Περιεχόµενα World Wide Web: Ο παγκόσµιος ιστός Πληροφοριών Εισαγωγή Ιστορική Αναδροµή Το ιαδίκτυο και το WWW Υπερκείµενο Εντοπισµός πληροφοριών στο WWW Search Engines Portals Unicode Java Plug-Ins 1 2 </p> <a href="/2096187-World-wide-web-o-pagkosuios-istos-pliroforion.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10423058-Synoptiko-egheiridio-hrisis-toy-microsoft-visual-studio-2010.html">Συνοπτικό εγχειρίδιο χρήσης του Microsoft Visual Studio 2010</a> </h3> <p> <img alt="Συνοπτικό εγχειρίδιο χρήσης του Microsoft Visual Studio 2010" title="Συνοπτικό εγχειρίδιο χρήσης του Microsoft Visual Studio 2010" class="news-block-img pull-right" src="/thumbs/27/10423058.jpg"> Τμήμα Πληροφορικής & Επικοινωνιών Τομέας Υπολογιστικών Τεχνικών & Συστημάτων Συνοπτικό εγχειρίδιο χρήσης του Microsoft Visual Studio 2010 Ιωάννης Γεωργουδάκης - Πάρις Μαστοροκώστας Σεπτέμβριος 2011 ΠΕΡΙΕΧΟΜΕΝΑ </p> <a href="/10423058-Synoptiko-egheiridio-hrisis-toy-microsoft-visual-studio-2010.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/289070-To-microsoft-word-xp-as-xekinisoyme-loipon.html">ΤΟ MICROSOFT WORD XP. Ας ξεκινήσουμε λοιπόν!</a> </h3> <p> <img alt="ΤΟ MICROSOFT WORD XP. Ας ξεκινήσουμε λοιπόν!" title="ΤΟ MICROSOFT WORD XP. Ας ξεκινήσουμε λοιπόν!" class="news-block-img pull-right" src="/thumbs/19/289070.jpg"> XP ΚΑΡΤΕΛΑ ΕΡΓΑΣΙΑΣ 1 Το Microsoft Word είναι ένα πρόγραμμα στον υπολογιστή που σας βοηθά να γράφετε όμορφα κείμενα στα οποία μπορείτε να προσθέσετε εικόνες, γραφικά ακόμα και ήχους. Aφού γράψετε ένα κείμενο, </p> <a href="/289070-To-microsoft-word-xp-as-xekinisoyme-loipon.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4303051-Eisagogi-sto-libre-office-paroysiaseis-me-to-impress-baios-kolofotias-epistimonikos-synergatis-sweng-lab-a-p-th.html">Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress. Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ</a> </h3> <p> <img alt="Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress. Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ" title="Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress. Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ" class="news-block-img pull-right" src="/thumbs/24/4303051.jpg"> Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ Εισαγωγικά Οι παρουσιάσεις είναι μια εφαρμογή που χρησιμεύει στην παρουσίαση των εργασιών </p> <a href="/4303051-Eisagogi-sto-libre-office-paroysiaseis-me-to-impress-baios-kolofotias-epistimonikos-synergatis-sweng-lab-a-p-th.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9622369-Odigies-hrisis-tis-platformas-typo3-gia-toys-diaheiristes-istoselidon-ton-tmimaton-toy-panepistimioy-athinon.html">Οδηγίες χρήσης της πλατφόρμας TYPO3. για τους Διαχειριστές Ιστοσελίδων των Τμημάτων του. Πανεπιστημίου Αθηνών</a> </h3> <p> <img alt="Οδηγίες χρήσης της πλατφόρμας TYPO3. για τους Διαχειριστές Ιστοσελίδων των Τμημάτων του. Πανεπιστημίου Αθηνών" title="Οδηγίες χρήσης της πλατφόρμας TYPO3. για τους Διαχειριστές Ιστοσελίδων των Τμημάτων του. Πανεπιστημίου Αθηνών" class="news-block-img pull-right" src="/thumbs/27/9622369.jpg"> Οδηγίες χρήσης της πλατφόρμας TYPO3 για τους Διαχειριστές Ιστοσελίδων των Τμημάτων του Πανεπιστημίου Αθηνών Αθήνα, Φεβρουάριος 2012 Έκδοση 2.0 Οι οδηγίες χρήσης ενημερώθηκαν και προσαρμόστηκαν στις ανάγκες </p> <a href="/9622369-Odigies-hrisis-tis-platformas-typo3-gia-toys-diaheiristes-istoselidon-ton-tmimaton-toy-panepistimioy-athinon.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9732246-Tehnologiko-panepistimio-kyproy.html">ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΉΜΙΟ ΚYΠΡΟΥ</a> </h3> <p> <img alt="ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΉΜΙΟ ΚYΠΡΟΥ" title="ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΉΜΙΟ ΚYΠΡΟΥ" class="news-block-img pull-right" src="/thumbs/27/9732246.jpg"> ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΉΜΙΟ ΚYΠΡΟΥ ΟΔΗΓΟΣ ΣΥΝΔΕΣΗΣ ΣΤO ΔΙΚΤΥΟ ΤΟΥ ΤΠΚ ΜΕΣΩ ΤΗΣ ΥΠΗΡΕΣΙΑΣ ΑΠΟΜΑΚΡΥΣΜΕΝΗΣ ΠΡΟΣΒΑΣΗΣ VPN ΥΣΠΤ Η υπηρεσία πρόσβασης στο δίκτυο δεδομένων του ΤΠΚ μέσω εικονικού ιδιωτικού δικτύου </p> <a href="/9732246-Tehnologiko-panepistimio-kyproy.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3404174-Egheiridio-hrisis-odigos-ekpaideysis-hriston-dimos-delta-aristoteleio-panepistimio-thessalonikis.html">Εγχειρίδιο Χρήσης-Οδηγός Εκπαίδευσης Χρηστών. - Δήμος Δέλτα - Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης</a> </h3> <p> <img alt="Εγχειρίδιο Χρήσης-Οδηγός Εκπαίδευσης Χρηστών. - Δήμος Δέλτα - Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης" title="Εγχειρίδιο Χρήσης-Οδηγός Εκπαίδευσης Χρηστών. - Δήμος Δέλτα - Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης" class="news-block-img pull-right" src="/thumbs/24/3404174.jpg"> Ανάπτυξη διαδικτυακής εφαρμογής υποστήριξης των δράσεων περιβαλλοντικής διαχείρισης της παράκτιας ζώνης του Θερμαϊκού Κόλπου και διαδραστικής εφαρμογής αναφοράς περιβαλλοντικών προβλημάτων Εγχειρίδιο Χρήσης-Οδηγός </p> <a href="/3404174-Egheiridio-hrisis-odigos-ekpaideysis-hriston-dimos-delta-aristoteleio-panepistimio-thessalonikis.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7982264-Gavalas-damianos-dgavalas-aegean-gr.html">Γαβαλάς Δαμιανός dgavalas@aegean.gr</a> </h3> <p> <img alt="Γαβαλάς Δαμιανός dgavalas@aegean.gr" title="Γαβαλάς Δαμιανός dgavalas@aegean.gr" class="news-block-img pull-right" src="/thumbs/26/7982264.jpg"> Δικτυακά Πολυμέσα ΙΙ Διάλεξη #1 η : Οργάνωση & στόχοι μαθήματος, καλές αρχές σχεδιασμού στο web, τα μεγαλύτερα λάθη στον web σχεδιασμό Γαβαλάς Δαμιανός dgavalas@aegean.gr 1 Στόχοι μαθήματος Κατανόηση της </p> <a href="/7982264-Gavalas-damianos-dgavalas-aegean-gr.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1096117-Egheiridio-hrisis-ilektroniki-platforma-diapolitismikon-mesolaviton-www-intermediation-gr-ekdosi-1i.html">ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΗΛΕΚΤΡΟΝΙΚΗ ΠΛΑΤΦΟΡΜΑ ΔΙΑΠΟΛΙΤΙΣΜΙΚΩΝ ΜΕΣΟΛΑΒΗΤΩΝ WWW.INTERMEDIATION.GR. ΕΚΔΟΣΗ 1η</a> </h3> <p> <img alt="ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΗΛΕΚΤΡΟΝΙΚΗ ΠΛΑΤΦΟΡΜΑ ΔΙΑΠΟΛΙΤΙΣΜΙΚΩΝ ΜΕΣΟΛΑΒΗΤΩΝ WWW.INTERMEDIATION.GR. ΕΚΔΟΣΗ 1η" title="ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΗΛΕΚΤΡΟΝΙΚΗ ΠΛΑΤΦΟΡΜΑ ΔΙΑΠΟΛΙΤΙΣΜΙΚΩΝ ΜΕΣΟΛΑΒΗΤΩΝ WWW.INTERMEDIATION.GR. ΕΚΔΟΣΗ 1η" class="news-block-img pull-right" src="/thumbs/21/1096117.jpg"> ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΗΛΕΚΤΡΟΝΙΚΗ ΠΛΑΤΦΟΡΜΑ ΔΙΑΠΟΛΙΤΙΣΜΙΚΩΝ ΜΕΣΟΛΑΒΗΤΩΝ WWW.INTERMEDIATION.GR ΕΚΔΟΣΗ 1η ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΥΠΟΥΡΓΕΙΟ ΕΣΩΤΕΡΙΚΩΝ ΕΥΡΩΠΑΪΚΟ ΤΑΜΕΙΟ ΕΝΤΑΞΗΣ ΥΠΗΚΟΩΝ ΤΡΙΤΩΝ ΧΩΡΩΝ ΣΤΗΝ ΕΛΛΑΔΑ ΕΥΡΩΠΑΪΚΗ </p> <a href="/1096117-Egheiridio-hrisis-ilektroniki-platforma-diapolitismikon-mesolaviton-www-intermediation-gr-ekdosi-1i.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2820764-Odigies-hrisis-efarmogis-ilektronikis-ypovolis-isozygion-kreatos.html">ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ ΕΦΑΡΜΟΓΗΣ ΗΛΕΚΤΡΟΝΙΚΗΣ ΥΠΟΒΟΛΗΣ ΙΣΟΖΥΓΙΩΝ ΚΡΕΑΤΟΣ</a> </h3> <p> <img alt="ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ ΕΦΑΡΜΟΓΗΣ ΗΛΕΚΤΡΟΝΙΚΗΣ ΥΠΟΒΟΛΗΣ ΙΣΟΖΥΓΙΩΝ ΚΡΕΑΤΟΣ" title="ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ ΕΦΑΡΜΟΓΗΣ ΗΛΕΚΤΡΟΝΙΚΗΣ ΥΠΟΒΟΛΗΣ ΙΣΟΖΥΓΙΩΝ ΚΡΕΑΤΟΣ" class="news-block-img pull-right" src="/thumbs/24/2820764.jpg"> 1. Γενικά ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ ΕΦΑΡΜΟΓΗΣ ΗΛΕΚΤΡΟΝΙΚΗΣ ΥΠΟΒΟΛΗΣ ΙΣΟΖΥΓΙΩΝ ΚΡΕΑΤΟΣ Η ηλεκτρονική υποβολή των ισοζυγίων κρέατος πραγματοποιείται μέσα από το λογισμικό Άρτεμις του Ελληνικού Γεωργικού Οργανισμού </p> <a href="/2820764-Odigies-hrisis-efarmogis-ilektronikis-ypovolis-isozygion-kreatos.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/8424842-Silverplatter-webspirs-4-1.html">SilverPlatter WebSPIRS 4.1.</a> </h3> <p> <img alt="SilverPlatter WebSPIRS 4.1." title="SilverPlatter WebSPIRS 4.1." class="news-block-img pull-right" src="/thumbs/26/8424842.jpg"> WebSPIRS 4.1. Η υπηρεσία WebSPIRS από τη SilverPlatter αποτελεί ένα φιλικό εργαλείο πρόσβασης και αναζήτησης σε περιεχόμενα βάσεων δεδομένων. Η Βιβλιοθήκη και Κέντρο Πληροφόρησης του Πανεπιστημίου Θεσσαλίας </p> <a href="/8424842-Silverplatter-webspirs-4-1.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> </div> <!-- END RIGHT SIDEBAR --> </div> </div> </div> <!-- END CONTENT --> </div> <!-- END SIDEBAR & CONTENT --> </div> </div> <!-- BEGIN FOOTER --> <div class="footer"> <div class="container"> <div class="row"> <!-- BEGIN COPYRIGHT --> <div class="col-md-10 col-sm-10 padding-top-10"> 2016 © DocPlayer.gr <a href="/support/privacy-policy/">Πολιτική Απορρήτου</a> | <a href="/support/terms-of-service/">Όροι Χρήσης</a> | <a href="/support/feedback/">Σχόλια</a> </div> <!-- END COPYRIGHT --> <!-- BEGIN PAYMENTS --> <div class="col-md-6 col-sm-6"> </div> <!-- END PAYMENTS --> </div> </div> </div> <!-- END FOOTER --> <!--[if lt IE 9]> <script src="/static/theme/global/plugins/respond.min.js"></script> <![endif]--> <script src="/static/js/2fd1/total.js" type="text/javascript"></script> <div style="display: none;"> <script> var page_data = {"domain_id":30,"design_id":0,"page_id":0}; (function(){ var img = new Image(); var pixel_image_src = '/pix/'+Math.random()+'/report/pixel.gif?type=pageview&domain_id=30&page_id=0&design_id=0&l='+encodeURIComponent(navigator.language)+'&p='+encodeURIComponent(navigator.platform)+'&url='+encodeURIComponent(document.location); document.write('<img src="'+pixel_image_src+'"> '); }()); </script> </div> </body> </html>