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

Transcript

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

2 Σημερινή διάλεξη Client-server programming HTML5 CSS Layouts Javascript PHP Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 2

3 Αρχιτεκτονική 2 επιπέδων Φυσική αρχιτεκτονική Τεχνική αρχιτεκτονική Διεπαφή Client Database Server PowerBuilder Visual Basic Visual C++ Access Paradox Oracle Sybase Informix MS SQLServer Ethernet Token Ring TCP/IP

4 Μοντέλο client server Client side Sever side 1. Request 3. Response 2. Data 4

5 Μεταφορά εφαρμογών στο server Φυσική αρχιτεκτονική Web Browser HTTP Web Server Application Server Data base HTML Pages Τεχνική αρχιτεκτονική Any Computer Any Network Server

7 Προγραμματισμός Παγκόσμιου Ιστού, 10η Διάλεξη 7

8 Βασική δομή σελίδας HTML5 (1/2) <header> <nav> <article> <aside> <section> <section> <section> <footer> 8

9 Βασική δομή σελίδας HTML5 (2/2) <body> <article> <header> <nav> <section> <section> <aside> <footer> <article> <header> <nav> <section> <section> <aside> <footer> 9

16 «Εικόνες» και περιγραφές (1/2) Το νέο figure element επιτρέπει την προσθήκη εικόνας και της σχετικής της περιγραφής Πριν την HTML5, χρειαζόταν div και στη συνέχεια προσθήκη της περιγραφής (χωρίς σχέση μεταξύ των 2) Το figure element δε χρειάζεται να περιλαμβάνει εικόνες Μπορεί να περιλαμβάνει κώδικα, ηχητικά μέρη, βίντεο, κλπ Σύνταξη <figure> </figure> <img alt= University of Piraeus src= unipi_logo.jpeg width= 100 height= 100 /> <figcaption> University of Piraeus </figcaption> 16

21 Φόρμες (1/2) Βασικό στοιχείο αλληλεπίδρασης με τον χρήστη Κάθε φόρμα αποτελείται από έναν αριθμό πεδίων στα οποία ο χρήστης εισάγει πληροφορία ή κάνει μια επιλογή Υπάρχουν 3 τύποι tags για δημιουργία πεδίων <textarea> <select> <input> Μπορεί να τοποθετηθεί οιοσδήποτε αριθμός τέτοιων tags Μπορούμε να έχουμε οποιοδήποτε αριθμό φορμών σε μια σελίδα αλλά δεν επιτρέπεται το φώλιασμα μεταξύ τους 21

22 Φόρμες (2/2) Το tag form οριοθετεί την αρχή της φόρμας Ορίζει το script ή το URL στο οποίο αποστέλλονται τα εισαχθέντα δεδομένα και την μέθοδο μετάδοσης τους Δύο βασικά attributes Action: Ορίζει την URL που θα τα λάβει Method: Λαμβάνει δύο δυνατές τιμές Παράδειγμα post στέλνει όλη την πληροφορία χωριστά από την URL get συνδέει την πληροφορία στο τέλος της URL Ενδείκνυται η χρήση της πρώτης μεθόδου επειδή τα URLs έχουν συγκεκριμένο μήκος που δεν μπορούν να υπερβούν <form method="post" action="/cgi-bin/my_script">...</form> 22

23 <input> (1/4) Επιτρέπει διάφορες επιλογές εισόδου περιεχομένου Simple text fields text Password fields password Radio buttons radio Check boxes checkbox Submit buttons submit Reset buttons reset 23

24 <input> (2/4) Τα πιο κοινά attributes για το <input> tag είναι τα εξής: type ορίζει τον τύπο του input field name το όνομα για τα δεδομένα Υποχρεωτικό για όλους τους τύπους εκτός από τα submit και reset size μέγεθος του πεδίου σε πλήθος χαρακτήρων maxlength μέγιστο πλήθος χαρακτήρων value έχει διάφορες σημασίες text ή password field: το default κείμενο που παρουσιάζεται check box ή radio button: την τιμή που επιστρέφεται submit και reset buttons: το κείμενο που παρουσιάζεται checked καθιστά ένα check box ή radio button ενεργό 24

25 <input> (3/4) text Παρουσιάζει μια απλή γραμμή κειμένου Attributes: name, size, maxlength, value password Παρουσιάζει τους χαρακτήρες που πληκτρολογούνται ως bullets Attributes: name, size, maxlength, value checkbox Attributes: name, value, checked radio Αποτελεί μια πιο περίπλοκη εκδοχή του check box επιτρέποντας σε ένα μόνο στοιχείο από το σύνολο να επιλεγεί Η ομαδοποίηση γίνεται με χρήση του name attribute Attributes: name, value, checked 25

26 <input type= radio > reset Απεικονίζεται ως push button το οποίο όταν πατηθεί επαναφέρει τα στοιχεία της φόρμας στην αρχική τους τιμή submit Απεικονίζεται ως push button το οποίο όταν πατηθεί στέλνει τα δεδομένα της φόρμας στον server Παράδειγμα <form> <input type="radio" name="choice" value="choice1" checked= checked"> Yes. <input type="radio" name="choice" <br> value="choice2"> No. <input type="submit" value="next"> <input type="reset"> 26 </form>

27 <select> Ομαδοποίηση επιλογών σε αντικείμενα επιλογής - optgroup Τίτλοι ομαδοποίησης label <select multiple name="network" size="6"> <optgroup label="ethernet"> <option value="ethernet"> Ethernet 4 <option selected ="selected" value="ethernet"> Ethernet 8 <option value="ethernet"> Ethernet 12 </optgroup> <optgroup label="token Ring"> <option value="token16"> Token Ring - 16mb <option value="token4"> Token Ring - 4mb </optgroup> <option value="localtalk"> LocalTalk <option value="other"> Other... </select> 27

28 Εμπλουτισμένα attributes Νέα attributes έχουν προστεθεί στην HTML5 Autofocus <input type="text" id="phone" name="phone" value="210" autofocus /> Required <input type="text" id="first_name" name="first_name" required="required" /> Placeholder <input type="text" id="first_name" name="first_name" placeholder="please enter your first name" /> Maxlength <textarea id="addr" name="addr" rows="10" cols="10" maxlength="200"></textarea> Pattern <input type="text" id="phone" name="phone" class="large" value="210" autofocus maxlength="15" pattern="[0-9]{4}" title="4 digits please"/> 28

29 Ημερολόγιο και ώρα Δεν απαιτείται πλέον η χρήση JavaScript λόγω νέων μεθόδων εισαγωγής Input type date Επιλογή ημέρας από ημερολόγιο Π.χ. <input type="date" name="birthday"> Input type datetime Επιλογή ημερομηνίας και ώρας (βάσει UTC) Π.χ. <input type="datetime" name="bdaytime"> Input type datetime-local Επιλογή ημερομηνίας και ώρας (βάσει τοπικής ώρας) Input type month / week Επιλογή μήνα / εβδομάδας Π.χ. <input type="month" name="bdaymonth"> Χρήση attributes min και max για τον ορισμό ελάχιστων / μέγιστων τιμών (στη μορφή YYYY-MM-DD) Π.χ. <input type="date" name="birthday" min=" "> 29

30 Επιλογή αριθμών (1/2) Νέο input type number για την εισαγωγή / επιλογή αριθμού Δεν επιτρέπεται η εισαγωγή μη αριθμητικών χαρακτήρων Με τα min και max attributes μπορεί να ορισθεί συγκεκριμένο εύρος τιμών Με το step attribute μπορεί να ορισθεί το βήμα Π.χ. <input type="number" id="numberitem" name="numberitem" min="1" max="10" step="2" /> 30

31 Επιλογή αριθμών (2/2) Νέο input type range για την επιλογή αριθμού Δεν υπάρχει πεδίο εισαγωγής αριθμού min, max, and step attributes. Εμφάνιση Περιορισμένες επιλογές (εμφάνιση κυρίως βάσει των browser) Εισαγωγή τιμών height και width Π.χ. Εάν το height είναι μεγαλύτερο του width εμφανίζεται κατακόρυφα HTML: <input type="range" id="range" name="range" min="0" max="10" step="1" /> CSS: #range { -webkit-appearance: slider-vertical; width: 20px; height: 100px; } 31

32 Επιπλέον input types Νέο input type color για την επιλογή βασικών χρωμάτων Π.χ. <input type="color" id="color" name="color" /> Νέο input type url για την εισαγωγή URL (επικύρωση κατά την αποστολή των δεδομένων) Π.χ. <input type="url" name="homepage"> Νέο input type color για την εισαγωγή τηλεφώνου Π.χ. <input type="tel" name="usrtel"> 32

33 Datalist element Νέο element της HTML5 για την πρόταση «προεπιλογών» σε κάποιο πεδίο Σε συνδυασμό με το list attribute μπορεί να υλοποιήσει μια «autocomplete» λύση Συγκριτικά με το select element, ο χρήστης μπορεί να εισάγει επιπλέον δεδομένα (εκτός των προτεινόμενων) Π.χ. <input list="playerlist" type="text" id="favplayer" name="favplayer" /> <datalist id="playerlist" width="500px"> <option value="messi" /> <option value="ronaldo" /> </datalist> 33

34 Meter element Χρησιμοποιείται για να προσδιορίσει την ποσοστιαία μεταβολή μιας τιμής Υποστηρίζει διάφορα attributes Value: Η μοναδική που απαιτείται καθώς ορίζει την τιμή που θα εμφανιστεί στο meter Min / max: Προεπιλεγμένες τιμές στο 0 και 1.0 Low / high / optimum: Χρησιμοποιούνται για να ορίσουν κομμάτια για τα συγκεκριμένα σημεία του meter Παραδείγματα <p>course completion status: <meter value="0.80">80%</meter></p> <p>lectures completed: <meter min="0" max="10" value="8">8 out of 10</meter></p> 34

35 Audio element To audio element χρησιμοποιείται για την εισαγωγή ηχητικών αποσπασμάτων στις σελίδες Οι browsers επιτρέπουν την αναπαραγωγή συγκεκριμένων μορφών Υποστηρίζει διάφορα attributes src: Ορίζει το αρχείο αναπαραγωγής controls: Ορίζει αν θα εμφανίζονται στοιχεία ελέγχου (προεπιλογή να μην εμφανίζονται). Μπορούν να οριστούν συγκεκριμένα στοιχεία μέσω JavaScript autoplay: Ορίζει αν θα αρχίσει αυτόματα η αναπαραγωγή preload: Ορίζει τι να κάνει ο browser αν δεν έχει επιλεγεί autoplay. Μπορεί να λάβει τιμές: none: Ο browser δεν αναπαράγει το αρχείο μέχρι ο χρήστης να το επιλέξει auto: Ο browser «κατεβάζει» το αρχείο όταν «φορτώσει» η σελίδα metadata: Ο browser απλά αποθηκεύει πληροφορία αναφορικά με το μέγεθος, την πρώτη εικόνα και τη διάρκεια loop: Ορίζει αν θα επαναλαμβάνεται η αναπαραγωγή όταν ολοκληρωθεί 35

36 Video element To video element χρησιμοποιείται για την εισαγωγή αποσπασμάτων βίντεο στις σελίδες Υποστηρίζει διάφορα attributes src: Ορίζει το αρχείο αναπαραγωγής poster: Ορίζει την εικόνα που θα εμφανίζεται όσο «κατεβαίνει» το βίντεο ή μέχρι ο χρήστης να επιλέξει την αναπαραγωγή του width, height: Ορίζουν το μέγεθος του player σε pixels controls: Ορίζει αν θα εμφανίζονται στοιχεία ελέγχου (προεπιλογή να μην εμφανίζονται) autoplay: Ορίζει αν θα αρχίσει αυτόματα η αναπαραγωγή loop: Ορίζει αν θα επαναλαμβάνεται η αναπαραγωγή όταν ολοκληρωθεί preload: Ορίζει τι να κάνει ο browser αν δεν έχει επιλεγεί autoplay. Μπορεί να λάβει τιμές: none: Ο browser δεν αναπαράγει το βίντεο μέχρι ο χρήστης να το επιλέξει auto: Ο browser «κατεβάζει» το βίντεο όταν «φορτώσει» η σελίδα metadata: Ο browser απλά αποθηκεύει πληροφορία αναφορικά με το μέγεθος, την πρώτη εικόνα και τη διάρκεια 36

38 Σύνταξη CSS Η σύνταξη CSS αποτελείται από 3 τμήματα: selector, property και value selector {property:value} Ο selector είναι το element/tag που επιθυμούμε να ορίσουμε, το property είναι η παράμετρος που θέλουμε να αλλάξουμε και τέλος, το value η τιμή της Σχόλια σε /* Αυτό είναι ένα σχόλιο */ Εισαγωγή CSS σε url("layout.css"); Παραδείγματα: body {background-color:black} p {font-family:"sans serif";} "" εάν υπάρχουν περισσότερες λέξεις p {text-align:center; color:red;} ; εάν υπάρχουν περισσότερες παράμετροι h1,h2,h3,h4,h5,h6 {color:green;} ομαδοποίηση στοιχείων 38

39 Fonts font-family: Μια λίστα με fonts για την περίπτωση όπου κάποιο font δεν είναι διαθέσιμο στο σύστημα του χρήστη π.χ. p {font-family:"times New Roman", Times, serif;} font-style: Το στυλ του font π.χ. p.normal {font-style:normal;} ή p.italic {font-style:italic;} font-size: Το μέγεθος του font. Μπορεί να πάρει και τιμές xx-small xx-large, smaller, larger π.χ. p {font-size:14px;} ή h1 {font-size:2.5em;} font-weight: Πόσο σκούρο είναι το font. Μπορεί να πάρει και τιμές , bolder, lighter π.χ. p.bold {font-weight:bold;} font-variant: Σε κάποιες γραμματοσειρές επιτρέπεται το small-caps π.χ. p.var {font-variant:small-caps;} Shortcut: font { font: style weight variant size font-family } π.χ. p {font: oblique bold small-caps 1.5em Verdana, Arial, sans-serif;} 39

40 Κείμενο text-align: Στοίχιση του κειμένου σε left, right, center, justify π.χ. p {text-align: justify;} text-transform: Μετατροπή του κειμένου σε uppercase, lowercase, capitalize π.χ. p.uppercase {text-transform:uppercase;} text-decoration: Παρουσίαση του κειμένου σε none, underline, overline, line-through π.χ. h2 {text-decoration:line-through;} letter-spacing, word-spacing: Αποστάσεις ανάμεσα στους χαρακτήρες και τις λέξεις αντίστοιχα text-indent: Διάστημα κειμένου από border π.χ. p#par1 { text-indent: 2em; } π.χ. p#par2 { text-indent: 25%; } π.χ. p#par3 { text-indent: -35px; } 40

41 Σύνδεσμοι Στα link μπορεί να αλλάζει η εμφάνιση των καταστάσεων που βρίσκονται a:link {color:#ff0000;} /* unvisited link */ a:visited {color:#00ff00;} /* visited link */ a:hover {color:#ff00ff;} /* mouse over link */ for rollover effects a:active {color:#0000ff;} /* selected link */ 41

42 Pseudo-elements Elements που παρέχουν συγκεκριμένη λειτουργία όπου εφαρμόζονται :first-line color, font, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height :first-letter Color, font, text-decoration, text-transform, vertical-align, text-transform, background, margin, padding, border, float, letter-spacing, word-spacing :first-child :lang() π.χ. p:first-letter {font-size: 300%; color: orange;} π.χ. a:hover {color: maroon; text-decoration: underline; background-color: #C4CEF8; } <a href=" of Piraeus, Department of Digital Systems</a> 42

43 Backgrounds background-color: Το χρώμα του background π.χ. body {background-color:#b0c4de;} background-image: Μια εικόνα σαν background που μάλιστα μπορεί και να επαναλαμβάνεται π.χ. body {background-image: url('gradient.png'); background-repeat: repeat-x;} background-position: Η θέση του background. Μπορεί να πάρει τιμές left, center, right, top, bottom, ποσοστά και τιμές σε pixels π.χ. { background-position: 200px 50px; } 43

44 Εισαγωγή CSS σε HTML Εξωτερικό style sheet (χαμηλή προτεραιότητα) Χρήσιμα για πολλές σελίδες, έτσι αλλάζοντας το CSS αλλάζει ολόκληρο το web site ή για διαφορετικούς λόγους (screen, media, handheld, κλπ) Το CSS «φορτώνεται» με το <link> tag στο <head> της σελίδας <head> <link rel="stylesheet" href="/path/stylesheet.css" type="text/css" media="print"/> </head> Εσωτερικό style sheet - στο head (μεσαία προτεραιότητα) <head> <style type="text/css > h1 {color:black} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style> </head> Inline style (υψηλή προτεραιότητα) <p style="color:black;margin-left:20px">this is a paragraph.</p> 44

45 Ιεραρχία στα CSS Μπορούμε να δημιουργήσουμε πιο πολύπλοκα CSS που να αναφέρονται σε συγκεκριμένα στοιχεία της σελίδας Παράδειγμα.aclass h3 { } Aφορά όλα τα <h3> elements κάτω από element με class= aclass table.aclass tr {magrin:20px;} Aφορά όλα τα <tr> elements κάτω από element <table> με class= aclass 45

46 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 {} 46

47 Προτεραιότητα Εάν δύο selectors είναι ίδιοι, τότε εφαρμόζεται μόνο ο τελευταίος ( last one listed wins ) Εάν ένας selector είναι πιο συγκεκριμένος από κάποιον άλλο, τότε ο πιο συγκεκριμένος είναι αυτός που εφαρμόζεται π.χ. το h1 είναι πιο συγκεκριμένο από το * Εάν στο τέλος κάποιας ιδιότητας προσθέσουμε το!important, τότε η ιδιότητα αυτή θεωρείται πιο σημαντική από άλλους κανόνες που σχετίζονται με το συγκεκριμένο element. Cascading? Για την περίπτωση των conflicts! h1 {color: green!important;} <h1 style="color:yellow">cascading case</h1> 47

48 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!! 48

50 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;} 50

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

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

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

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

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

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

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

58 Viewport Meta Tag Χρήση του 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 58

59 Τεχνικές για RWD: Media queries Τα πολλαπλά 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"> Προγραμματισμός Παγκόσμιου Ιστού, 10η Διάλεξη 59

60 Τεχνικές για RWD: Media queries Ο παρακάτω κώδικας θα εμφανίσει το μέγεθος των γραμμάτων στο 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 60

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

62 Τεχνικές για RWD: Flexible media και εικόνες Παράδειγμα #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 Προγραμματισμός Παγκόσμιου Ιστού, 10η Διάλεξη 62

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