Θέματα Ψηφιακής Οικονομίας Ενότητα 3: Δημιουργία mockup δικτυακής επιχείρισης Μανώλης Τζαγκαράκης, Βικτωρία Δασκάλου Σχολή Οργάνωσης και Διοίκησης Επιχειρήσεων Τμήμα Οικονομικών Επιστημών
Σκοποί ενότητας Να παρουσιάσει τις βασικές αρχές της γλώσσας HTML και CSS Να εισαγάγει στις έννοιες δόμησης ιστοσελίδων Να δώσει τις βάσεις για τη δημιουργία σχεδίου (mochup) δικτυακής επιχείρισης 2
Περιεχόμενα ενότητας Εισαγωγή στην HTML Εισαγωγή σε CSS Βασικές αρχές δόμησης ιστοσελίδας 3
Εισαγωγή στην HTML
HTML5 & CSS HTML: HyperText Markup Language Γλώσσα για δημιουργία ιστοσελίδων Συντακτικό και κανόνες για δομή ιστοσελίδας Χρήση ετικετών για καθορισμών στοιχείων (elements) ιστοσελίδας CSS: Cascading Style Sheets Γλώσσα για την περιγραφή της μορφής (style) ιστοσελίδων Συντακτικό και κανόνες για τη μορφοποίηση Χρήση επιλογών (selectors) για τη μορφή 5
HTML HTML αρχεία = αρχεία κειμένου HTML αρχεία = περιέχουν στοιχεία δομής (element) ιστοσελίδας: Επικεφαλίδες Παραγράφους Εικόνες Συνδέσμους Τι καθορίζει το είδος του κάθε στοιχείου; Η Ετικέτα (tag): <tagname>content</tagname> 6
Τι κάνει ο browser μία ιστοσελίδα; Εικ. 1: Ο ιστότοπος www.upatras.gr <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="el" version="xhtml+rdfa 1.0" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:article="http://ogp.me/ns/article#" xmlns:book="http://ogp.me/ns/book#" xmlns:profile="http://ogp.me/ns/profile#" xmlns:video="http://ogp.me/ns/video#"> <head profile="http://www.w3.org/1999/xhtml/voc ab"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="http://www.upatras.gr/sites/w ww.upatras.gr/files/favicon.ico" type="image/vnd.microsoft.icon" /> <meta name="viewport" content="width=devicewidth, initial-scale=1" /> <meta name="generator" content="drupal 7 (http://drupal.org)" /> <link rel="canonical" href="http://www.upatras.gr/el" />... Ο κώδικας HTML του ιστότοπου www.upatras.gr 7
Τι κάνει ο browser μία ιστοσελίδα; Διαβάζει την HTML και ερμηνεύει τις ετικέτες για να δομήσει το περιεχόμενο της σελίδας που θα εμφανίσει στην οθόνη Δεν εμφανίζει τις ετικέτες αλλά τις χρησιμοποιεί για να δομήσει το περιεχόμενο Ανακτά και εμφανίζει τις εικόνες που περιέχει το περιεχόμενο Ανακτά τα αρχεία στυλ (css) για να μορφοποιήσει το περιεχόμενο στην οθόνη 8
Η δομή κάθε σελίδας HTML <!DOCTYPE html> <html> <head> <title>page Title</title> </head> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> 9
Βασικές ετικέτες Δομής: <!DOCTYPE html> Στην αρχή του αρχείου για να δηλώσει ότι είναι HTML <html>όλη η σελίδα εδώ</html> <head>μεταδεδομένα: πληροφορίες για περιεχόμενο του αρχείου</head> <body>το περιεχόμενο που εμφανίζεται στην οθόνη</body> Επικεφαλίδας: <title>ο τίτλος της σελίδας</p> <link rel="stylesheet" href="styles.css"> -> για τον καθορισμό του αρχείου CSS 10
Ετικέτες περιεχομένου (1) Βασικές κειμένου <p>κείμενο παραγράφου</p> <em>κείμενο πλάγια</em> <strong>κείμενο έντονα</strong> Κεφαλίδες (επιπέδου 1 έως 6) <h1>κείμενο κεφαλίδας επιπέδου 1</h1> <h2>κείμενο κεφαλίδας επιπέδου 2</h2> Συνδέσμου <a href="http://www.upatras.gr">upatras web</a> 11
Ετικέτες περιεχομένου (2) Η έννοια των γνωρισμάτων (attributes) στις ετικέτες Καθορίζουν συμπληρωματικές πληροφορίες στο στοιχείο και πρέπει να γράφονται σε (double quotes) Εικόνας <img src="dxv.jpg" alt="victoria Daskalou" title="victoria Daskalou" height="400" width="300"> src: το URL της πηγής της εικόνας, αν είναι τοπικό μόνο όνομα αρχείου εικόνας alt: το κείμενο που εμφανίζεται στην περίπτωση που δεν βρεθεί το αρχείο ή για προγράμματα πλοήγησης τυφλών title: ο τίλος που εμφανίζεται όταν ο κέρσορας περνάει πάνω από την εικόνα height, width: ύψος και πλάτος εικόνας σε pixels 12
Γράψτε την πρώτη σας σελίδα Χρήση του notepad και γράφω html Save asindex.html (UTF-8) Open with... -> Επιλέξτε Chrome Χρήση Chrome Developer Tools για επισκόπηση & κατανόηση των αρχείων HTML Chrome menu -> More tools->developer tools 13
Ετικέτες λιστών Μη αριθμημένη λίστα <ul> <li>first list item</li> <li>second list item</li> </ul> Αριθμημένη λίστα <ol> <li>first list item</li> <li>second list item</li> </ol> 14
Εισαγωγή στη χρήση CSS
CSS: Cascading Style Sheets Καθορίζουν τη μορφή των στοιχείων ιστοσελίδων Ορίζονται: στο αρχείο HTML στο header με την ετικέτα <style> </style> Σε ξεχωριστό αρχείο π.χ. style.css, το οποίο αναφέρεται στο αρχείο HTML στο τμήμα head με την ετικέτα: <link rel="stylesheet" href="styles.css"> 16
Επιλογείς (selectors) Επιλέγουμε σε ποιό στοιχείο θέλουμε να αλλάξουμε μορφή επιλογέας { ιδιότητα: τιμή; ιδιότητα: τιμή;} Παραδείγματα: {font-family: Helvetica;} p {color:red; background-color:black;} 17
Δοκιμή <head> <style> * { font-family: Helvetica; border: 2px solid yellow; } p {color:red; background-color:black;} </style> </head> 18
Δομή ιστοσελίδων
Document Object Model (DOM) Εικόνα 2: Ο μοντέλο αντικειμένου εγγράφων (DOM) χρησιμοποιείται για την αναπαράσταση αντικειμένων σε HTML. Τα αντικείμενα κάθε εγγράφου αναπαρίστανται σε δεντρική μορφή (DOM tree). Πηγή: https://commons.wikimedia.org/wiki/category:document_object_models#/media/file:dom-model.svg 20
Παράδειγμα DOM <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN"> <HTML> <TITLE>My home page</title> <BODY> <H1>My home page</h1> <P>Welcome to my home page! Let me tell you about my favorite composers: <UL> <LI> Elvis Costello <LI> Johannes Brahms <LI> Georges Brassens </UL> </BODY> </HTML> Το δέντρο αντικειμένων (DOM tree) για τον συγκεκριμένο κώδικα: κάθε στοιχείο έχει ένα μόνο πατέρα (εκτός από τη ρίζα) Παράδειγμα κώδικα HTML 21
Box model (1) Τα στοιχεία (elements) μίας σελίδας HTML αναπαρίστανται στον περιηγητή με τετραγωνικό σχήμα (box model) Εικόνα 3: Το box model Πηγή: https://commons.wikimedia.org/wiki/file:css_b ox_model.svg 22
Box model (2) Κάθε τετραγωνικό στοιχείο έχει μία περιοχή περιεχομένου (content), π.χ. κείμενο, εικόνα, κλπ. και περιβάλλεται από περιοχές padding, border, και margin. Το μέγεθος κάθε περιοχής καθορίζεται από ιδιότητες όπως: margin-top margin-bottom margin-left margin-right border-top border-bottom Κλπ. 23
Box model (3) Παρουσίαση του DOM και Box model κάθε σελίδας: Chome->More tools->developer tools Δεξί κλικ->inspect element 24
Κλάσεις και ταυτότητες στοιχείων Για να διαφοροποιείται η μορφή των στοιχείων της ιστοσελίδας μπορούμε να ορίσουμε ιδιότητες σε κάθε στοιχείο της με: Την ιδιότητα κλάση (class): για πολλά στοιχεία π.χ. θέλουμε μία κλάση για την εμφάνιση θετικών σχολίων με πράσινο χρώμα (σε πολλά σημεία της σελίδας): Ορισμός στο CSS:.positive {color:green;} Χρήση στο HTML: <p class= positive >This is a positive comment</p> Την ιδιότητα ταυτότητα (id): για ένα στοιχείο Ορισμός στο CSS: #most_polite {text-decoration: underline;} Χρήση στο HTML: <p class= positive id= most_polite >The most polite comment</p> 25
Η τετραγωνισμένη δομή των ιστοσελίδων 26
Χωρισμός της σελίδας σε τμήματα Συνδυασμός 2 τρόπων: Χρήση πρότυπων ετικετών της HTML5 για ορισμό τμημάτων σελίδας π.χ. <nav> <section> <footer> Χρήση ετικέτας <div></div> σε φωλιασμένες μορφές header: ορίζει επικεφαλίδα εγγράφου ή τμήματος nav: το τμήμα για τους συνδέσμους πλοήγησης section: τμήμα κειμένου article: άρθρο κειμένου aside: πλάγια μπάρα περιεχομένου footer: υποσέλιδο Προσοχή! Πρέπει να οριστούν σωστά στο CSS για να οργανωθεί σωστά η σελίδα 27
Η τετραγωνισμένη δομή των ιστοσελίδων 28
Τέλος Ενότητας
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στo πλαίσιo του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Αθηνών» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 30
Σημειώματα
Σημείωμα Ιστορικού Εκδόσεων Έργου Το παρόν έργο αποτελεί την έκδοση 1.0 32
Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Πατρών, Μανώλης Τζαγκαράκης, Βικτωρία Δασκάλου, 2015. «Θέματα Ψηφιακής Οικονομίας. Δημιουργία mockup δικτυακής επιχείρισης». Έκδοση: 1.0. Πάτρα 2015. Διαθέσιμο από τη δικτυακή διεύθυνση: https://eclass.upatras.gr/courses/econ1315/. 33
Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 34
Διατήρηση Σημειωμάτων Οποιαδήποτε αναπαραγωγή ή διασκευή του υλικού θα πρέπει να συμπεριλαμβάνει: το Σημείωμα Αναφοράς το Σημείωμα Αδειοδότησης τη δήλωση Διατήρησης Σημειωμάτων το Σημείωμα Χρήσης Έργων Τρίτων (εφόσον υπάρχει) μαζί με τους συνοδευόμενους υπερσυνδέσμους. 35
Σημείωμα Χρήσης Έργων Τρίτων Το Έργο αυτό κάνει χρήση των ακόλουθων έργων: Εικόνες/Σχήματα/Διαγράμματα/Φωτογραφίες Εικόνα 2: Document Object Model, By Birger Eriksson (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons Πηγή: https://commons.wikimedia.org/wiki/category:document_object_models#/media/ File:DOM-model.svg Εικόνα 3: Box model, By Felix.leg (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons Πηγή: https://commons.wikimedia.org/wiki/file:css_box_model.svg 36