Προγραμματισμός Παγκόσμιου Ιστού

Transcript

1 Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 6 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 3 Απριλίου 2017

2 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Positioning Responsive Website Design Εισαγωγή Responsive και Adaptive Τεχνικές για RWD: Flexible, grid-based layout Viewport Περισσότερα stylesheet Τεχνικές για RWD: Media queries Τεχνικές για RWD: Flexible media και εικόνες Παράδειγμα Βέλτιστες πρακτικές Σύνδεσμοι τηλεφώνου και μηνυμάτων CSS για εκτύπωση Έλεγχος Αναφορές 2

3 CSS Selectors Selector Σημασία Παράδειγμα Universal Selector Όλα τα elements της σελίδας * {} Type Selector Συγκεκριμένα elements της σελίδας h1, h2, h3 {} Class Selector Όλα τα elements (ή τα elements τύπου) που έχουν το συγκεκριμένο class attribute.note {} p.note {} ID Selector Όλα τα elements που έχουν το συγκεκριμένο attribute #introduction {} Child Selector Descendant Selector Μόνο τα elements που είναι «απ ευθείας παιδιά» ενός άλλου element (σε πρώτο επίπεδο) Όλα τα elements συγκεκριμένου τύπου που είναι «απόγονοι» ενός άλλου element li>a {} p a {} Adjacent Sibling Selector Το πρώτο element που ακολουθεί ένα άλλο element h1+p {} General Sibling Selector Όλα τα elements συγκεκριμένου τύπου που ακολουθούν ένα άλλο element h1~p {} Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 3

4 CSS Box Model Αν θεωρήσουμε κάθε ένα html element σαν ένα κουτί (box) τότε στο css μπορούμε να ορίζουμε αντίστοιχα τις ακόλουθες παραμέτρους Margin : Η περιοχή γύρω από το border. Είναι διαφανή / transparent Border : Το πλαίσιο γύρω από το padding και το content Padding : Η περιοχή γύρω από το content. Έχει το χρώμα του background Content : Εδώ εμφανίζεται το κείμενο και οι εικόνες Παράδειγμα: width:250px; padding:10px; border:5px solid gray; margin:10px; Total width= 300px!! Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 4

5 Μέγεθος width, height: Tο μέγεθος της συγκεκριμένης περιοχής π.χ. div.mydiv {height: 300px; width: 50%;} min-width, min-height: Tο ελάχιστο μέγεθος της συγκεκριμένης περιοχής π.χ. div.mydiv {min-height: 300px; min-width: 300px;} max-width, max-height: Tο μέγιστο μέγεθος της συγκεκριμένης περιοχής π.χ. div.mydiv {max-height: 300px; max-width: 300px;} Overflow: Η ιδιότητα αυτή καθορίζει πως θα εμφανίζεται το κείμενο αν δε χωράει σε συγκεκριμένη περιοχή visible (default), hidden, scroll Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 5

6 Borders border-style: Δηλώνει τον τύπο του border. Μπορούν να δηλώνονται μεγέθη για κάθε πλευρά του border (border-top-style, border-right-style, border-bottom-style, border-left-style) π.χ. div.mydiv {border-style:solid;} border-width: Δηλώνει το μέγεθος του border. Μπορούν να δηλώνονται μεγέθη για κάθε πλευρά του border (border-top-width, border-rightwidth, border-bottom-width, border-left-width). Εκτός από απόλυτα μεγέθη μπορεί να πάρει τιμές: thin medium thick π.χ. div.mydiv {border-width:5px;} border-color: Δηλώνει το χρώμα του border π.χ. div.mydiv {border-color:red;} Οι ιδιότητες δηλώνονται είτε ξεχωριστά για κάθε πλευρά ή όλες μαζί π.χ. div.mydiv {border-left-color:red; border-right-style:dotted;} π.χ. div.mydiv {border:5px solid red;} Στα tables, η ιδιότητα border-collapse:collapse; ορίζει ότι τα borders των κελιών ταυτίζονται με τα borders των διπλανών τους Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 6

7 Padding Η ιδιότητα αυτή καθορίζει την απόσταση του περιεχομένου μιας περιοχής από το border της Ομοίως με το border μπορούν να ορίζονται με διαφορετικές αποστάσεις για κάθε πλευρά ή όλες μαζί padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; padding:25px 50px; top/bottom = 25px, right/left = 50px padding:25px 50px 75px; top = 25px, right/left = 50px, bottom = 75px padding:25px 50px 75px 100px; top = 25px, right = 50px, bottom = 75px, left = 100px Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 7

8 Margin Η ιδιότητα αυτή καθορίζει το κενό γύρω από την περιοχή Ομοίως με το border και το padding μπορούν να ορίζονται διαφορετικές αποστάσεις για κάθε πλευρά ή όλες μαζί margin-top:25px; margin-bottom:25px; margin-right:50px; margin-left:50px; margin:25px 50px; top/bottom = 25px, right/left = 50px margin:25px 50px 75px; top = 25px, right/left = 50px, bottom = 75px margin:25px 50px 75px 100px; Σημειώσεις: top = 25px, right = 50px, bottom = 75px, left = 100px Τόσο για το padding όσο και για το margin είναι προτιμότερο να χρησιμοποιούνται τιμές «em» ώστε το μέγεθος να αλλάζει αντίστοιχα με το κείμενο Προσοχή τα margins μπορεί να συμπτυχθούν! Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 8

10 Σχεδιασμός διεπαφών Βασικές προσεγγίσεις Liquid layouts Fixed layouts Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 10

11 Παράδειγμα Fixed Layout <div id="container"> <div id="header"> Masthead and headline </div> <div id="links"> List of links </div> <div id="main"> Main article... </div> <div id="news"> News and announcements... </div> <div id="footer"> Copyright information </div> </div> #container { width: 750px; border: solid 1px; } #header { background: #CCC; padding: 15px; } #links { background-color: fuchsia; float: left; width: 175px; } #main { background-color: aqua; float: left; width: 400px; } #news { background-color: green; float: left; width: 175px; } 11

12 Παράδειγμα Liquid Layout <div id="header"> Head and headline </div> <div id="main"> Main article... </div> <div id="extras"> List of links and news </div> <div id="footer"> Copyright information </div> #header { background: #CCC; padding: 15px; } #main { background-color: aqua; float: left; /* floats the whole main article to the left */ width: 60%; margin-right: 5%; /* adds space between columns */ margin-left: 5%; } #extras { margin-right: 5%} /* space on the right of the side column */ #footer { clear: left; /* starts the footer below the floated content */ padding: 15px; background: #CCC; } 12

13 Position position:static: Η standard επιλογή των browsers όπου το περιεχόμενο ακολουθεί το ένα το άλλο position:relative: Τοποθετεί το περιεχόμενο σε σχέση με εκεί που θα έπρεπε με βάση την static επιλογή. Το αρχικό σημείο παραμένει κενό π.χ. div.content {position: relative; top:10px; left:100px; background-color: fuchsia;} position:absolute: Το περιεχόμενο δεν ακολουθεί τη ροή και δεν επηρεάζει τα άλλα στοιχεία της σελίδας π.χ. h1 { position: absolute; top: 0px; left: 500px;} position:fixed: Το περιεχόμενο τοποθετείται σε συγκεκριμένο σημείο του παραθύρου π.χ. h1 { position:fixed ; top: 0px; left: 0px;} Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 13

14 Absolute Τα αντικείμενα μετακινούνται «εκτός» της κανονικής ροής της σελίδας (όπως έχει οριστεί από το HTML) Με τη χρήση absolute τα αντικείμενα δεν συνδέονται πλέον με τη ροή του εγγράφου Άλλα αντικείμενα καλύπτουν το χώρο που μένει κενός από ένα αντικείμενο με absolute positioning Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 14

15 Relative βάσει containing block Όταν ένα element βρίσκεται «μέσα» σε κάποιο άλλο που έχει το position του relative, absolute, ή fixed, το element θα τοποθετηθεί με βάση το συγκεκριμένο element στο οποίο βρίσκεται p { } img { } position: relative; background-color: green; border: 2px solid black; position: absolute; bottom: 0%; right: 0%; Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 15

16 Relative To αντικείμενο τοποθετείται σε σχέση με την τρέχουσα τοποθεσία του στην κανονική ροή του εγγράφου Άλλα αντικείμενα ΔΕΝ γεμίζουν το χώρο που μένει κενός στη ροή του εγγράφου Αυτός ο χώρος μένει κενός Left:250px Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 16

17 Float To float χρησιμοποιείται για να τοποθετούμε περιεχόμενο δεξιά (float:right) ή αριστερά (float:left) στη σελίδα μας και το υπόλοιπο περιεχόμενο να το «περικυκλώνει» Η επιλογή clear σταματά τα element να συνεχίσουν γύρω από ένα floating element, όπως για παράδειγμα όταν θέλω να έχω μια νέα γραμμή p#end {clear: left;} <p id="end"> </p> Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 17

18 Floating inline elements Υπάρχει η δυνατότητα ένα element να τοποθετείται παράλληλα με κάποιο άλλο inline element <span class="disclaimer">probably a disclaimer in the page.</span> span.disclaimer { } float: right; margin: 10px; width: 200px; color: white; background-color: red; padding: 4px; Σημείωση: Σε κείμενο πρέπει πάντα να δίνεται width Περιορίζεται στη συγκεκριμένη περιοχή Δε γίνεται collapse με άλλα elements Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 18

19 Floating block elements Η ιδιότητα των inline elements μπορεί να χρησιμοποιηθεί και για block elements <p id="float">this will be floating text...</p> #float { float: left; width: 200px; margin-top: 0px; background: #A5D3DE; } Σημείωση: Πρέπει πάντα να δίνεται width σε κείμενο Περιορίζεται στη συγκεκριμένη περιοχή Αυτός είναι ο σκοπός του floating Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 19

20 Cursor Μπορούμε να αλλάζουμε δυναμικά την εμφάνιση του cursor μέσα από το css π.χ. a{cursor: move;} Επιλογές auto crosshair default pointer move text wait help url("cursor.gif") Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 20

21 Reset css Οι διάφοροι browsers έχουν διαφορετικά αρχικά styles με αποτέλεσμα οι html σελίδες να εμφανίζονται ανομοιόμορφα Για να αντιμετωπιστεί αυτό το πρόβλημα έχουν δημιουργηθεί css styles που δημιουργούν ένα ομοιογενές περιβάλλον για την «υλοποίηση» συγκεκριμένων style Παραδείγματα: Eric Meyer s Reset CSS 2.0 Yahoo! (YUI 3) Reset CSS Πλήρης λίστα: Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 21

23 Περιορισμοί mobile web Μικρό μέγεθος οθόνης Χρήση δικτύου Περιορισμένες γραμματοσειρές Περιορισμένα χρώματα Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 23

24 Σχεδιαστικές τεχνικές για mobile web Μοναδική στήλη Αποφυγή πινάκων, floating, frames Περιγραφικός τίτλος Περιγραφικά headings Βελτιστοποιημένες εικόνες Περιγραφικά alt text για τις εικόνες Περιορισμός μη αναγκαίων εικόνων Πλοήγηση με λίστες Em ή ποσοστό για τα μεγέθη Μεγάλη αντίθεση μεταξύ κειμένου και χρώματος φόντου Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 24

25 Responsive Web Design Αναφέρεται στην υιοθέτηση ενός πιο ευέλικτου, μησυνδεδεμένου με τη συσκευή τρόπου για το σχεδιασμό Σχεδιασμός όπου το layout και το περιεχόμενο προσαρμόζεται στις συσκευές των χρηστών: μέγεθος οθόνης, πλατφόρμα και προσανατολισμός Ένα responsive site δεν είναι ένα mobile site. Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 25

27 Responsive και Adaptive Και οι 2 μέθοδοι στοχεύουν στην παροχή βέλτιστης εμπειρίας στους χρήστες κινητών συσκευών Οι χρήστες που έχουν πρόσβαση σε sites μέσω των κινητών τους δεν ενδιαφέρονται πρακτικά για τη μέθοδο που χρησιμοποιείται Η βασική διαφορά αναφέρεται στην υλοποίηση της λύσης για κινητές συσκευές Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 27

28 Responsive Web Design Το responsive web design στοχεύει στη βελτιστοποίηση της παρουσίασης για διαφορετικές συσκευές 1 website για όλες τις συσκευές desktop, tablets, smartphones Διαμόρφωση του layout της σελίδας ανά ανάλυση οθόνης Ιδανικό για sites με μικρή πολυπλοκότητα Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 28

29 Adaptive Web Design To adaptive web design αναγνωρίζει τις διαφορετικές συσκευές του χρήστη. Όπως και το responsive design, επίσης στοχεύει στη βελτιστοποίηση της παρουσίασης για διαφορετικές συσκευές Διαφορετικά website για desktop και mobile συσκευές Αναγνωρίζει τη συσκευή του χρήστη, όχι την ανάλυση της οθόνης Ιδανικό για website με μεγάλη λειτουργικότητα 29

30 Responsive Web Design Το 2010 ο E. Marcotte εισήγαγε τον όρο Responsive Web Design Χρήση 3 εργαλείων Media queries Fluid grids / layout Scalable / flexible images για την παρουσίαση περιεχομένου σε διαφορετικές συσκευές / αναλύσεις οθονών Βασικό κομμάτι αποτελεί το media query, μια «αίτηση» για την πληροφορία σχετικά με την ανάλυση των συσκευών των χρηστών Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 30

31 Τεχνικές για RWD 3 βασικές τεχνικές: Flexible, grid-based layouts Τα sites υλοποιούνται με χρήση ποσοστών για τα πλάτη Media queries Χρήση CSS3 Flexible media & images Όταν αλλάζει η οθόνη, τα media/εικόνες προσαρμόζονται αντίστοιχα στο μέγεθος της οθόνης Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 31

32 Responsive και Adaptive: Τεχνικές και σύνοψη Responsive web design Media queries Fluid layouts Fluid media Adaptive web design Media queries Fixed-width layouts Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 32

34 Τεχνικές για RWD: Flexible, gridbased layout Βασική ιδέα: Έχει σχεδιαστεί με βάση τις αναλογίες -> χρήση ποσοστών Η αναλογία για κάθε αντικείμενο της σελίδας είναι ο χώρος που θα του αποδοθεί διαιρούμενος με την ολική σελίδα / χώρο Παράδειγμα Έστω ότι το desktop layout έχει πλάτος 960px Έστω ότι το αντικείμενο έχει πλάτος 300px Άρα η αναλογία θα είναι 31.25% 300px / 960px = 31.25% Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 34

35 Fluid grids / layouts στόχος ολικός χώρος = αποτέλεσμα Τίτλος στόχος = 700px 700px 988px = *100 =70.85% Ολικό πλάτος = 988px Στόχος 1 στήλης = 329px 329px 988px = 33.29% Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 35

36 Viewport Meta Tag (1/3) Η default ενέργεια για την πλειοψηφία των κινητών συσκευών είναι να κάνουν zoom out και να προσαρμόζουν αντίστοιχα τη σελίδα Viewport Meta Tag Ορίζει στο browser πώς να παρουσιάσει τη σελίδα πόσο μεγάλο να είναι το viewport Διαμορφώνει το πλάτος και την αρχική κλιμάκωση Ουσιαστικά αναφέρεται σε ένα χώρο όπου θα παρουσιάζεται η σελίδα Είναι εφικτός ο ορισμός τιμών pixel σε CSS pixels ανεξάρτητα από τα pixels της συσκευής Με 100% zoom, pixels συσκευής = CSS pixels Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 25

37 Viewport Meta Tag (2/3) Χρήση του viewport meta tag στο <head> Υπάρχουν 2 τρόποι για την προσθήκη του viewport tag Χρήση του CSS Σχετικά νέο και γενικά δεν υποστηρίζεται /* CSS Document {width: 480px; zoom: 1;} Χρήση του viewport meta tag Υποστηρίζεται <meta name="viewport" content="width=device-width, initial-scale=1 > Προσαρμογή στο πλάτος της συσκευής Χωρίς zoom Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 37

38 Viewport Meta Tag (3/3) width=device-width Η σελίδα προσαρμόζεται στο πλάτος της συσκευής Συγχρονίζεται με το αντίστοιχο πλάτος initial-scale=1 Αρχική κλίμακα 100% Αν το viewport είναι μεγαλύτερο από το πλάτος της οθόνης, η αντίστοιχη κλίμακα θα μικρύνει τα περιεχόμενα ώστε να χωράνε στο viewport Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 38

39 Περισσότερα stylesheet Διαφορετική χρήση ανάλογα με το screen{ body { background: blue; } print { body { background: white; } } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 39

41 Τεχνικές για RWD: Media queries (1/14) Η W3C δημιούργησε τα media queries ως μέρος του προτύπου CSS3 Είναι το βασικό εργαλείο του RWD, επιτρέποντας τη διατύπωση Διαφορετικών στυλ για ξεχωριστές συσκευές Πλάτους του viewport ή προσανατολισμού συσκευής Επιπλέον Αναγνωρίζει δυνατότητες κινητών συσκευών, όπως η ανάλυση οθόνης Διαμορφώνει την παρουσίαση (μέσω του browser) των στυλ βάσει των δυνατοτήτων Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 41

42 Τεχνικές για RWD: Media queries (3/14) <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href= test.css" /> Τύπος media: screen Το βασικό query είναι στις παρενθέσεις, που περιλαμβάνει ένα χαρακτηριστικό του media (max-device-width) το οποίο θα εξεταστεί την τιμή στόχο (480px) Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 42

43 Τεχνικές για RWD: Media queries (4/14) <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="onecss.css" /> Πρακτικά ελέγχει εάν η οριζόντια ανάλυση της συσκευής (max-device-width) είναι ίση ή μικρότερη από 480px Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 43

44 Τεχνικές για RWD: Media queries (5/14) Σύνταξη για εξωτερικά query <link rel="stylesheet" media="screen and (min-width:320px) and (max-width:480px)" href="css/mobile.css" /> Viewport! Viewport! Περισσότερα του ενός viewport! Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 44

45 Τεχνικές για RWD: Media queries (6/14) Τα πολλαπλά viewport υλοποιούνται με χρήση πολλαπλών τιμών ιδιοτήτων σε ένα query συνδέοντας τις τιμές με το and <link rel="stylesheet" media="only screen and (min-width:200px) and (maxwidth: 500px)" href= small.css"> <link rel="stylesheet" media="only screen and (min-width:501px) and (maxwidth: 1100px)" href= large.css"> Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 45

46 Τεχνικές για RWD: Media queries (7/14) Σύνταξη για εσωτερικά query Είναι εφικτή η προσθήκη media queries ως μέρος του CSS με τη χρήση screen and (max-device-width: 480px) {.column { float: none; } } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 46

47 Τεχνικές για RWD: Media queries (8/14) Παράδειγμα 1 body { background: gray; screen and (max-width:500px) { body { background: blue; } } Χρώμα φόντου γκρι ΑΛΛΑ για μέγιστο πλάτος μέχρι 500 pixels το χρώμα φόντου είναι μπλε Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 47

48 Τεχνικές για RWD: Media queries (9/14) Παράδειγμα 2 body { background: blue; screen and (min-width:501px) { body { background: gray; } } Χρώμα φόντου μπλε ΑΛΛΑ από και για μεγαλύτερο πλάτος 501 pixels το χρώμα φόντου είναι γκρι Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 48

49 Τεχνικές για RWD: Media queries (10/14) Μη screen and (min-width: 551px) and (max-width: 760px) { } /*μικρές screen and (max-width: 550px) { /*πολύ μικρές οθόνες*/ } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 49

50 Τεχνικές για RWD: Media queries (11/14) Ο παρακάτω κώδικας θα εμφανίσει το μέγεθος των γραμμάτων στο 100% εάν το πλάτος είναι τουλάχιστον screen and (min-width: 1024px) { body {font-size: 100%;} } Ο παρακάτω κώδικας ελέγχει τον προσανατολισμό και το πλάτος της screen and (min-device-width: 480px) and (orientation: landscape) { body { font-size: 100%; } } Οι λογικοί τελεστές μπορούν να προσαρμοστούν Το and μπορεί να αντικατασταθεί με το not Ο προσανατολισμός portrait μπορεί να αντικατασταθεί με το landscape 50

51 Τεχνικές για RWD: Media queries (12/14) Ο παρακάτω κώδικας οδηγεί σε μια σελίδα που το χρώμα θα αλλάζει σε μπλε μόνο μεταξύ 500px και screen (min-width:500px) and (max-width:700px){ body {background: blue;} } Ο παρακάτω κώδικας οδηγεί σε πορτοκαλί φόντο όταν η συσκευή φτάσει πλάτος 1024px και αλλάζει σε κίτρινο όταν η οθόνη μιας συσκευής είναι στο όριο των κινητών (max-width: 1024px) { body { background: orange;} (max-width: 768px) { body {background: yellow;} } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 51

52 Τεχνικές για RWD: Media queries (13/14) Ορισμοί Width = πλάτος περιοχής εμφάνισης Device-width = πλάτος συσκευής Orientation = προσανατολισμός συσκευής Aspect-ratio = Σχέση πλάτους / ύψους Ορίζει με 2 αριθμούς που διαχωρίζονται με slash / Device-aspect-ratio = Σχέση device-width / device-height Resolution = Dots per inch (dpi) Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 52

53 Τεχνικές για RWD: Media queries (14/14) Τα Media queries προτείνεται να συνδυάζονται με το Viewport Δεν προτείνεται η χρήση τους χωρίς ένα viewport meta tag Κάποιοι browsers κινητών έχουν default viewport περίπου pixels Η σελίδα θα είναι πολύ μεγαλύτερη από το πλάτος της συσκευής Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 53

55 Τεχνικές για RWD: Flexible media και εικόνες (1/3) Με χρήση media queries είναι εφικτή Η επέκταση διαφορετικών ορισμών για media ώστε να προστεθούν ιδιότητες βάσει της συσκευής που χρησιμοποιείται μέγεθος οθόνης, προσανατολισμός, χρώμα Η διατύπωση κανόνων που δεν επιτρέπει στις εικόνες να ξεπερνούν το πλάτος του σχετικού σημείου όπου περιλαμβάνονται Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 55

56 Τεχνικές για RWD: Flexible media και εικόνες (2/3) Προσαρμογή HTML Αφαίρεση ιδιοτήτων height και width CSS img { max-width: 100%; height: auto; } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 56

57 Τεχνικές για RWD: Flexible media και εικόνες (3/3) Παράδειγμα #logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; only screen and (max-device-width: 480px) { #logo { background: url(images/logo_mobile.png); width: 440px; } } Προσαρμογή logo για μικρό viewport Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 57

58 Παράδειγμα (1/4) Έστω μια σελίδα με την παρακάτω βασική δομή HTML <div id="header"> <div id="titlearea"></div> <div class= imagearea"></div> </div> <div id= article"> <div id="contentsidebar"> <div id="content"></div> <div id="sidebar"></div> </div> </div> Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 58

59 Παράδειγμα (2/4) Έστω η συγκεκριμένη σελίδα με την παρακάτω βασική δομή CSS #header {width: 960px;} #titlearea {width: 400px;} #header.imagearea {width: 540px;} #article {width: 960px;} #contentsidebar {width: 790px;} #content {width: 470px;} #sidebar {width: 300px;} Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 59

60 Παράδειγμα (3/4) Έστω ότι ο στόχος έχει πλάτος 960px #header {width: 100%;} #titlearea {width: %;} #header.imagearea {width: 56.25%;} #article {width: 100%;} #contentsidebar {width: %;} #content {width: %;} #sidebar {width: 31.25%;} Φόρμουλα (αρχικά pixels/pixels στόχου) * 100% Παράδειγμα για το #titlearea: (400px/960px)*100% = % Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 60

61 Παράδειγμα (4/4) Πρέπει να γίνει το αντίστοιχο και για τα υπόλοιπα elements /*Pixel για το margin = 25px */ ul { margin: 10px px;} /*Μετατροπή ποσοστών */ ul { margin: 10px %;} Προσαρμογή και των εικόνων img { max-width: 100%; } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 61

63 Βέλτιστες πρακτικές (1/4) Μοναδική στήλη: Μέγιστο πλάτος περίπου 300px Αλλαγή σε μοναδική screen and (max-width: 550px) { #content-main, #content-secondary, #about, #credits { float: none; width: 100%; } } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 63

64 Βέλτιστες πρακτικές (2/4) Ελάχιστο μέγεθος γραμματοσειράς 13px Κουμπιά touch-friendly H apple προτείνει ελάχιστο στόχο 44x44px Χρώματα υψηλής αντίθεσης Έλεγχος! Μεταξύ πολλαπλών πλατφορμών Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 64

65 Βέλτιστες πρακτικές (3/4) Ορισμός μέγιστου πλάτους (max-width) 480px είναι ένα iphone 4 Ορισμός στυλ μέσα σε media (max-width: 480px) { } /* στυλ */ Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 65

66 Βέλτιστες πρακτικές (4/4) Προσθήκη κλάσης για την απόκρυψη αντικειμένων σε κινητές (max-width: 480px) { }... td[class= hide ], span[class= hide ] { display:none!important; } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 66

68 Σύνδεσμοι τηλεφώνου και μηνυμάτων Τηλέφωνο SMS <a href="tel: ">call </a> Πολλοί browsers θα κάνουν την αντίστοιχη κλήση όταν πατηθεί ο σύνδεσμος <a href="sms: ">text </a> Πολλοί browsers θα εκκινήσουν την εφαρμογή γραπτών μηνυμάτων όταν πατηθεί ο σύνδεσμος Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 59

69 CSS για εκτύπωση (1/2) Υλοποίηση εξωτερικού style sheet με σχετικές ενότητες για την εμφάνιση στον browser Υλοποίηση 2 ου εξωτερικού style sheet με σχετικές ενότητες για εκτύπωση Σύνδεση και των 2 style sheet με τη σελίδα, με χρήση 2 <link > elements <link rel="stylesheet" href="mypage.css" media="screen"> <link rel="stylesheet" href="mypageprint.css" media="print"> Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 60

70 CSS για εκτύπωση (2/2) Απόκρυψη μη-αναγκαίου περιεχομένου Π.χ.: nav { display: none; } Διαμόρφωση μεγέθους γραμματοσειράς και χρώματος για εκτύπωση Χρήση pt για μεγέθη, χρήση σκούρου χρώματος Έλεγχος page breaks Π.χ.:.newpage { page-break-before: always; } Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 61

72 Έλεγχος Κινητή συσκευή Προσομοιωτές Browser (αλλαγή μεγέθους παραθύρου για την παρακολούθηση αλλαγών) Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 72

73 Αναφορές Λειτουργία Fluid Grids στο Responsive Web Design Τεχνικές, εργαλεία και στρατηγικές για Responsive Web Design Viewport meta tag Πληροφορίες για αρχάριους Προγραμματισμός Παγκόσμιου Ιστού, 6η Διάλεξη 73