ΕΦΑΡΜΟΓΕΣ ιστου (Web Applications) 2016 Καθ. Γ. Βούρος - Δρ. Κ. Κώτης georgev@unipi.gr – kotis@aegean.gr

Περιεχομενο διαλεξεων 1-5 Εισαγωγή στην HTML, βασικές εντολές, παραδείγματα προγραμματισμού σε HTML, εισαγωγή στο CSS Χρήση του cms WordPress: κατασκευή ιστότοπου, ιστοσελίδων Εισαγωγή στην XML, βασικά χαρακτηριστικά δομής XML εγγράφων, εμφάνιση εγγράφων XML με τη χρήση CSS Δημιουργία έγκυρων XML εγγράφων (DTD, XML Schema or XSD) Εμφάνιση εγγράφων XML με χρήση XSL (Style Sheets for XML) Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

αξιολογηςη Συμμετοχή στο μάθημα (Online παραδείγματα από τα W3C Schools tutorials) Και στις 5 διαλέξεις Εργασία HTML/CSS (WordPress) μετά την διάλεξη 2 Εργασία XML/DTD-XSD/XSL μετά την διάλεξη 5 2/3 στο βαθμό του μαθήματος Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Εισαγωγή 2016 Δρ. Κ. Κώτης kotis@aegean.gr

Internet Παγκόσμιος ιστός World-Wide Web (WWW) ένα σύστημα αναζήτησης υπερμεσικών πληροφοριών (hypermedia information) ιστοσελίδες (web pages) υπερμέσα (hypermedia) σύνδεσμοι (links) εξυπηρετητές (servers), και περιηγητές (browsers) Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Η αρχή ... Tim Berners-Lee HYPERTEXT PROJECT 1989 CERN: Conseil European pour la Recherche Nucleaire Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Η ιςτορια του WWW Το WWW ξεκίνησε το 1989 από το Ευρωπαϊκό Κέντρο Πυρηνικών Ερευνών, (CERN) στην Ελβετία. Βασικός του σκοπός ήταν να προσφέρει στους επιστήμονες ένα μέσο προκειμένου να ανταλλάσσουν στοιχεία επιστημονικά δεδομένα και μελέτες, μέσω του διαδικτύου. Η όλη προσπάθεια στηρίχτηκε στην υλοποίηση ενός μέσου που θα επιτρέπει τη σύνδεση μεταξύ διαφορετικών εγγράφων. Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Αρχικα … Το πρώτο λογισμικό ΙΣΤΟΥ δημιουργήθηκε τον Οκτώβριο 1990 Το πρώτο λογισμικό ΙΣΤΟΥ δημιουργήθηκε τον Οκτώβριο 1990 Καλοκαίρι 1991 το CERN διέθεσε το λογισμικό στη διεθνή κοινότητα Ηλεκτρονικά "έγγραφα" με συνδέσεις με άλλα αντικείμενα. Hyperlinks = Συνδέσεις HyperText Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Η ιςτορια του WWW Το μέσο αυτό ονομάστηκε υπερκείμενο(Hyper text) Το 1994 κατασκευάστηκε το πρόγραμμα Mosaic, το οποίο έδινε τη δυνατότητα στους χρήστες να προσπελαύνουν τις πληροφορίες που ήταν διαθέσιμες στο WWW με γραφικό τρόπο. Στα επόμενα χρόνια το WWW έγινε το απόλυτο μέσο αναζήτησης πληροφοριών για εκατομμύρια χρήστες του διαδικτύου. Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Οι σελίδες WEB δημιουργούνται χρησιμοποιώντας μία γλώσσα που λέγεται Hypertext Markup Language, ή HTML O όρος markup language δηλώνει ότι τα πρωτόγονα σύμβολα της γλώσσας έχουν τη μορφή των tags (ετικέτες), τα οποία βάζουμε σε ένα κείμενο για την επισημείωση (annotation, markup) της πληροφορίας που είναι αποθηκευμένη σε αυτό. Τα tags δείχνουν το πώς η πληροφορία θα πρέπει να εμφανιστεί. Π.χ. μέγεθος, χρώμα, στυλ γραμματοσειράς παράγραφος, εικόνα, λίστα από κουκκίδες, κλπ. Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML HTML = HyperText-Markup Language HTML: Γλώσσα προγραμματισμού που λέει στον web browser τι πληροφορίες να προβάλει και πώς Πώς να εντοπίσει αρχεία με κείμενο, ήχο, γραφικά, video ή multimedia Πώς να τα εμφανίσει στην ιστοσελίδα Δημιουργία ιστοσελίδων με HTML ή με χρήση web authoring εργαλείων όπως FrontPage (Intermediate Level), Dreamweaver (Advanced) WordPress (cms) Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML H HTML δεν είναι γλώσσα προγραμματισμού που στηρίζεται σε διαδικασίες-ρουτίνες όπως η Pascal, C ή η Fortran Αρχεία που περιέχουν κώδικα HTML έχουν την κατάληξη .htm ή .html Σε αντίθεση με άλλες γλώσσες προγραμματισμού τα λάθη που συμβαίνουν στο κώδικα της ΗΤΜL δεν είναι καταστροφικά – Fatal Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML ςελιδα Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML κειμενο Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Markup Languages Ο όρος Markup αναφέρεται σε ένα σύνολο από ενδείξεις / παρατηρήσεις που αναφέρονται και περιγράφουν τα δεδομένα ενός κειμένου Πρόκειται για οδηγούς στο τρόπο με τον οποίο πρέπει να ερμηνευτούν τα περιεχόμενα του κειμένου Μια συλλογή τέτοιων ενδείξεων, που ακολουθούν καθορισμένο συντακτικό και γραμματική, μπορεί να θεωρηθεί γλώσσα Μία Markup γλώσσα προσδίδει πληροφορία για τα περιεχόμενα ενός κειμένου Οι Markup Languages είναι μια μέθοδος για να δημιουργούμε μεταδεδομένα (metadata) Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Markup Languages To 1969 η ΙΒΜ κατασκεύασε την GML (Generalized Markup Language – Γενικευμένη Γλώσσα Σήμανσης), την πρώτη «σύγχρονη» markup γλώσσα Από τη GML προήλθε η SGML (Standard Generalized Markup Language – Πρότυπη Γενικευμένη Γλώσσα Σήμανσης) η οποία το 1986 έγινε ISO standard για αποθήκευση και ανταλλαγή δεδομένων Το 1991 όταν αναπτύχθηκε η HTML (HyperΤext Markup Language – Γλώσσα Σήμανσης Υπερκειμένου) αποτέλεσε μια εφαρμογή της SGML Η ταχύτατη ανάπτυξη του Web και οι περιορισμένες δυνατότητες της HTML γέννησαν την XML (Extensible Markup Language – Επεκτάσιμη Γλώσσα Σήμανσης στα τέλη των ’90s. Ο Σημασιολογικός Ιστός (Web 3.0), μια επέκταση του σημερινού Ιστού, που φέρει δομή στο ουσιαστικό περιεχόμενο των ιστοσελίδων, βασίζεται σε τεχνολογίες που ήδη υπάρχουν (URI και XML) αλλά και σε νέες τεχνολογίες (RDF, RDFS, OWL). Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML5 2016 Δρ. Κ. Κώτης kotis@aegean.gr

W3C School tutorial http://www.w3schools.com/default.asp (γενικά) http://www.w3schools.com/html/ (html5) http://www.w3schools.com/html/html_css.asp (Styling HTML with CSS) This HTML tutorial contains hundreds of HTML examples. With the online HTML editor, you can edit the HTML, and click on a button to view the result. At the end of the HTML tutorial, you can find more than 200 examples. With our online editor, you can edit and test each example yourself. Go to HTML Examples! Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page … http://www.w3schools.com/html/html_intro.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Editors Write HTML Using Notepad or TextEdit Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Follow the four steps below to create your first web page with Notepad or TextEdit. … http://www.w3schools.com/html/html_editors.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Basic Examples HTML Documents All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. … http://www.w3schools.com/html/html_basic.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Elements http://www.w3schools.com/html/html_elements.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Attributes http://www.w3schools.com/html/html_attributes.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Headings http://www.w3schools.com/html/html_headings.asp HTML Attributes Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Paragraphs http://www.w3schools.com/html/html_paragraphs.asp HTML Attributes Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Styles http://www.w3schools.com/html/html_styles.asp HTML Attributes Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Text Formatting http://www.w3schools.com/html/html_formatting.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Comment Tags http://www.w3schools.com/html/html_comments.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Colors http://www.w3schools.com/html/html_colors.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Styles - CSS http://www.w3schools.com/html/html_css.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Styles - CSS http://www.w3schools.com/html/html_css.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Styles - CSS http://www.w3schools.com/html/html_css.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Styles - CSS http://www.w3schools.com/html/html_css.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Styles - CSS http://www.w3schools.com/html/html_css.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Links http://www.w3schools.com/html/html_links.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Images http://www.w3schools.com/html/html_images.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Tables http://www.w3schools.com/html/html_tables.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Lists http://www.w3schools.com/html/html_lists.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Block and Inline Elements http://www.w3schools.com/html/html_blocks.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML The class Attribute http://www.w3schools.com/html/html_classes.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

HTML Iframes http://www.w3schools.com/html/html_iframe.asp Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018

Thank You! kotis_konstantinos (+30) 6974822712 http://ai-group.ds.unipi.gr/kotis/ kotis@aegean.gr Κ. Κώτης, Παν. Πειραιά, Τμήμα Ψηφιακών Συστημάτων 8/23/2018