ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ

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

Download "ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ"

Transcript

1 ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ 4.1. Εισαγωγή Το παρόν κεφάλαιο πραγματεύεται τις αρχές του προσαρμοστικού σχεδιασμού στον ιστό. Εξηγεί την ανάγκη που οδήγησε στην επινόηση του προσαρμοστικού σχεδιασμού και αναλύει τα βασικά συστατικά του στοιχεία, παρουσιάζοντας σειρά παραδειγμάτων. Εν συνεχεία προτείνει τεχνικές για τη βελτιστοποίηση της απόδοσης ιστοτόπων που σχεδιάζονται με βάση τις αρχές του προσαρμοστικού σχεδιασμού και ανακεφαλαιώνει τα συγκριτικά πλεονεκτήματα και μειονεκτήματα του προσαρμοστικού σχεδιασμού έναντι της προσέγγισης της σχεδίασης ιστοτόπων ειδικά για κινητές συσκευές. Τέλος, καλύπτονται θέματα που αφορούν στη χρήση CSS πλαισίων (frameworks) τα οποία μπορούν να διευκολύνουν και να επιταχύνουν τη διαδικασία ανάπτυξης προσαρμοστικών ιστοτόπων Προσαρμοστικός Σχεδιασμός στον Ιστό Οι τεχνικές και οι τεχνολογίες σχεδίασης ιστοτόπων έχει εξελιχθεί δραματικά τα τελευταία 20 χρόνια. Η δεκαετία του 1990 κυριαρχήθηκε από ιστοσελίδες που σχεδιάζονταν με χρήση HTML πινάκων (αξιοποιώντας το γεγονός ότι οι πίνακες όριζαν ένα πλέγμα που εξυπηρετούσε την κατάτμηση της οθόνης σε ορθογώνιες περιοχές). Παρόλο που η τεχνολογία των φύλλων στυλ (CSS) προτυποποιήθηκε το 1996, η δημοτικότητα των CSS παρέμεινε σε χαμηλά επίπεδα μέχρι το 2003, περίπου. Τότε η κοινότητα των σχεδιαστών και προγραμματιστών ιστού στόχευε,

2 86 Κινητές Τεχνολογίες συνήθως, σε οθόνες με ανάλυση 1024 x 768 (ώστε να απευθύνονται στο ευρύτερο δυνατό κοινό), με τις μεγαλύτερες οθόνες να προσθέτουν λευκό χώρο γύρω από τις άκρες του ιστότοπου και τις μικρότερες οθόνες να απαιτούν οριζόντια κύλιση. Με το λανσάρισμα, ωστόσο, του iphone το 2007, η πλήρη εμπειρία της περιήγησης στο διαδίκτυο ήταν διαθέσιμη πλέον οπουδήποτε. Αφήνοντας πίσω τους δύσχρηστους κινητούς περιηγητές του παρελθόντος, οι χρήστες ξαφνικά βρέθηκαν με πλήρη προγράμματα περιήγησης (εφάμιλλων, σχεδόν, δυνατοτήτων με επιτραπέζιους Η/Υ) στις τσέπες τους. Η πρώτη αντίδραση των εταιριών στη διάδοση του κινητού ιστού ήταν να αναπτύξουν έναν ξεχωριστό βελτιστοποιημένο για κινητά ιστότοπο (βλ. προηγούμενο κεφάλαιο), στη βάση του επιχειρήματος ότι προσφέρει μια στοχευμένη εμπειρία χρήστη και μετην προσδοκία της αύξησης των πωλήσεων. Τις περισσότερες φορές, αυτοί οι ιστότοποι δεν ήταν παρά περιεκτικές εκδοχές των αντίστοιχων πλήρων ιστοτόπων και, συχνά, αποτύγχαναν να προσφέρουν στους επισκέπτες το περιεχόμενο που αναζητούσαν, με αποτέλεσμα εκείνοι να εγκαταλείπουν τον ιστότοπο ή να μεταβαίνουν στον πλήρη ιστότοπο. Το 2010, τα «ερωτήματα μέσων» των CSS3 (βλ. επόμενη ενότητα στο παρόν κεφάλαιο) υποστηρίχθηκαν από κινητούς περιηγητές (αρχικά από το Android 2.1 και εν συνεχεία από το ios 3.2). Η έλευση των ερωτημάτων μέσων προσέφερε τη δυνατότητα εφαρμογής διαφορετικών στυλ σε διαφορετικές αναλύσεις οθόνης. Αυτό αποτελεί και το βασικό υπόστρωμα μιας νέας προσέγγισης στον σχεδιασμό ιστού που αργότερα ονομάστηκε προσαρμοστικός σχεδιασμός και που σύντομα αποτέλεσε τη σημαντικότερη νέα τάση στη σχεδίαση και ανάπτυξη ιστοτόπων. Το παρόν κεφάλαιο στοχεύει ακριβώς στο να παρουσιάσει τα κύρια συστατικά του αποτελεσματικού προσαρμοστικού σχεδιασμού. Ορισμός Ο όρος «Προσαρμοστικός Σχεδιασμός στον Ιστό» (Responsive Web Design, RWD) προέρχεται από τον τρόπο με τον οποίο ο περιηγητής προσαρμόζεται στο εκάστοτε περιβάλλον. Ο προσαρμοστικός σχεδιασμός αφορά σε μια προσέγγιση ανάπτυξης ιστοτόπων που στοχεύει στο να παρέχει στους χρήστες ικανοποιητική εμπειρία χρήσης, ανεξάρτητα από τον περιηγητή, συσκευή ή μέγεθος/προσανατολισμό της οθόνης που χρησιμοποιείται.

3 Κεφ.4: Σχεδιασμός Προσαρμοστικών Ιστοτόπων 87 Εικόνα 4.1: Προσαρμογή του ιδίου περιεχομένου ώστε να εμφανίζει ικανοποιητική εμπειρία χρήσης σε διαφορετικές συσκευές ιστού (πηγή: Ο προσαρμοστικός σχεδιασμός απομακρύνει τη λογική της σχεδίασης από τη χρήση σταθερών μονάδων (όπως τα pixels) προς σχετικές μονάδες, όπως τα ποσοστά. Αυτό σημαίνει ότι τα πλάτη των διαφόρων τμημάτων ενός ιστοτόπου σχεδιάζονται ώστε να καταλάβουν ένα ποσοστό του παραθύρου θέασης (viewport). Η Εικόνα 4.1 δείχνει πως το ίδιο περιεχόμενο μπορεί να αποδοθεί σε διαφορετικές συσκευές ιστού, ακολουθώντας τις αρχές του προσαρμοστικού σχεδιασμού. Ο άνθρωπος που επινόησε τον όρο προσαρμοστικός σχεδιασμός ήταν ο Ethan Marcotte (το 2010) σε άρθρο του που δημοσίευσε στον ιστότοπο A List Apart, στo οποίo συγκρίνει τον ιστό με την αρχιτεκτονική. Σε αυτό το άρθρο θεμελίωσε μια νέα προσέγγιση σχετικά με το πώς θα πρέπει να αντιμετωπίζουμε τον αυξανόμενο αριθμό των συσκευών που προσπελάζουν τον ιστό ως διαφορετικές όψεις της ίδιας εμπειρίας: Αντί της προσαρμογής αποσυνδεδεμένων σχεδιασμών για κάθε μία από τις συνεχώς αυξανόμενες συσκευές ιστού, μπορούμε να τις αντιμετωπίσουμε όλες ως όψεις της ιδίας εμπειρίας. Μπορούμε να σχεδιάσουμε για βέλτιστη εμπειρία θέασης, ωστόσο, ενσωματώνοντας τεχνολογίες βασισμένες σε πρότυπα ώστε ο σχεδιασμός να γίνει όχι απλώς πιο ευέλικτος, αλλά και πιο προσαρμοστικός στα μέσα που τον αποδίδουν (rendering media). Εν ολίγοις, πρέπει να υιοθετήσουμε τις αρχές του προσαρμοστικού σχεδιασμού.

4 88 Κινητές Τεχνολογίες Εικόνα 4.2: Ο ιστότοπος όπως εμφανίζεται στις οθόνες ενός laptop, tablet και έξυπνου τηλεφώνου. Αυτό που προτείνει ο Marcotte εδώ είναι πως όλες οι συσκευές πρέπει να λάβουν το ίδιο περιεχόμενο. Ωστόσο, το περιεχόμενο πρέπει να δημιουργηθεί ώστε να είναι ευέλικτο και να αποδίδεται σωστά στην οθόνη. Ο ιστότοπος θα πρέπει να προσαρμοστεί κατά τρόπο που να βελτιστοποιεί την εμπειρία χρήσης σε κάθε τύπο συσκευής.

5 Κεφ.4: Σχεδιασμός Προσαρμοστικών Ιστοτόπων 89 Η Εικόνα 4.2 εμφανίζει έναν από τους γνωστότερους ιστοτόπους που υιοθετεί τις αρχές της προσαρμοστικής σχεδίασης. ΠΡΟΤΑΣΗ ΠΕΡΑΙΤΕΡΩ ΜΕΛΕΤΗΣ Μελετήστε το περίφημο άρθρο του Ethan Marcotte που επινόησε και θεμελίωσε τον όρο Responsive Web Design : web design 4.3. Βασικά Συστατικά Αποτελεσματικού Προσαρμοστικού Σχεδιασμού Ένας ιστότοπος που σχεδιάζεται με βάση την προσέγγιση του προσαρμοστικού σχεδιασμού επιτυγχάνει την προσαρμογή στο οπτικό περιβάλλον του χρήστη χρησιμοποιώντας τεχνικές που βασίζονται στα παρακάτω τρία συστατικά, τα ο ποία και θα αναλυθούν στις υποενότητες που ακολουθούν: Ρευστή διάταξη (fluid layout) Ευέλικτες εικόνες (flexible images) Ερωτήματα μέσων (media queries) Ρευστή διάταξη Μια βασική παράμετρος του σχεδιασμού στον ιστό είναι η διάταξη, δηλαδή η διευθέτηση των διαφόρων οπτικών στοιχείων (τμημάτων περιεχομένου) σε μια ιστοσελίδα. Οι συνήθεις επιλογές των σχεδιαστών είναι μεταξύ των καθορισμένων διατάξεων (fixed layouts) και των ρευστών διατάξεων (fluid ή liquid layouts). Στις καθορισμένες διατάξεις το συνολικό πλάτος της ιστοσελίδας είναι συνδεδεμένο με έναν ορισμένο αριθμό εικονοστοιχείων (pixels) 1. Το ίδιο ισχύει και για τμήματα περιεχομένου που καταλαμβάνουν ένα μέρος της ιστοσελίδας. Η ακαμψία αυτού του τρόπου διάταξης παρέχει στους σχεδιαστές σταθερότητα και α πόλυτο έλεγχο πάνω στο αποτέλεσμα (π.χ. επιτρέπει τη δημιουργία γραφικών βελτιστοποιημένων για το πλάτος που προβλέπεται να καταλάβουν). Ωστόσο, το αποτέλεσμα δεν είναι ικανοποιητικό όταν η ιστοσελίδα εμφανίζεται σε μεγαλύ 1 Το συνηθέστερα επιλεγμένο μέτρο είναι τα 960 pixels, το οποίο έχει αποδειχθεί βέλτιστο για διατάξεις πλέγματος (grid layouts), καθώς ο αριθμός αυτός διαιρείται εύκολα με τα 3, 4, 5, 6, 8, 10, 12 και 15.

6 90 Κινητές Τεχνολογίες τερες ή μικρότερες οθόνες. Για παράδειγμα, όταν μία σελίδα πλάτους 960 pixels εμφανιστεί σε οθόνη έξυπνου τηλεφώνου 480 x 800 pixels, ένα μέρος της θα μείνει εκτός παραθύρου προβολής και θα εμφανιστεί μια μη ελκυστική οριζόντια μπάρα κύλισης. Αντίθετα, σε οθόνες με πλάτος πολύ μεγαλύτερο των 960 pixels η διάταξη θα περιβληθεί από πολύ κενό (λευκό) χώρο, κάτι που είναι συνήθως ανεπιθύμητο. Η λογική του ρευστού σχεδιασμού επιτρέπει τον ορισμό μιας διάταξης, της ο ποίας το μέγεθος αντί να δηλώνεται σε απόλυτο αριθμό pixels ορίζεται σε ποσοστιαίες μονάδες ως προς το συνολικό πλάτος της οθόνης στην οποία θα προβληθεί. Με αυτό τον τρόπο, όταν η διάταξη θα συμπιέζεται στη μικρή οθόνη μιας φορητής συσκευής ή θα εκτείνεται σε μία μεγάλη οθόνη ενός επιτραπέζιου υπολογιστή, όλα τα στοιχεία που περιλαμβάνει θα προσαρμόζουν το μέγεθός τους αναλογικά με το πλάτος του διαθέσιμου παραθύρου προβολής. Η Εικόνα 4.3 παρουσιάζει τον HTML5 και CSS κώδικα που υλοποιεί μια ρευστή διάταξη δύο στηλών με την αριστερή και δεξιά στήλη να καταλαμβάνουν 30% και 64% αντίστοιχα και τα κενά διαστήματα (gutters) στα αριστερά τους 3%. <!doctype html> <html> <head> <meta charset="utf 8"> <title> 3 col fluid layout</title> <link href="fluid.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header id="header"> <h1>επικεφαλίδα</h1> </header> <section id="main_row"> <aside id="navigation" class="col"> <h2>τίτλος 1ης στήλης</h2> <p>lorem ipsum..</p> </aside> <section id="content" class="col"> <h2>τίτλος 2ης στήλης</h2> <p>lorem "utf 8"; #header { height: 50px; margin bottom: 10px; background color: #666;.col { float: left; margin left: 3%; background color: #bbb; margin bottom: 10px; #navigation { width: 30%; #content { width: 64%; #footer { clear: both; height: 50px;

7 Κεφ.4: Σχεδιασμός Προσαρμοστικών Ιστοτόπων 91 </section> </section> <footer id="footer"> <h1>υποσέλιδο</h1> </footer> </div> </body> </html> h1 { h2 { h2, p { background color: #666; margin: 0; padding: 5px; margin top: 0; padding top: 7px; margin left: 7px; margin right: 7px; Εικόνα 4.3: Παράδειγμα HTML/CSS κώδικα που δημιουργεί μια ρευστή διάταξη δύο στηλών και η εμφάνιση του αποτελέσματος στην οθόνη ενός περιηγητή επιτραπέζιου Η/Υ. Εάν μετατρέπαμε μια καθορισμένη διάταξη ενός ιστοτόπου με πλάτος κυρίου πλαισίου 960 pixels και πλάτος πλαισίου κυρίως περιεχομένου 640 pixels, σε ρευστή διάταξη, διατηρώντας τις ίδιες αναλογίες, τότε πλάτος του πλαισίου περιεχομένου θα υπολογίζονταν σε 640/960 x 100% = 66,66% (βλ. Εικόνα 4.4, αρι

8 92 Κινητές Τεχνολογίες στερά). Σε κάθε περίπτωση, μια ρευστή διάταξη από μόνη της δεν μπορεί να δώσει ικανοποιητικές λύσεις για κάθε μέγεθος οθόνης. Για παράδειγμα, μια ρευστή διάταξη 3 στηλών που εμφανίζεται ικανοποιητικά σε οθόνη πλάτους 1024 pixels πιθανότατα δεν θα δείχνει καθόλου ελκυστική με τις 3 στήλες της να έχουν συμπιεστεί ώστε να χωρέσουν σε οθόνη πλάτους 320 pixels. Σε μια τέτοια μικρή οθόνη θα είχε μάλλον νόημα μια ριζική αναπροσαρμογή της διάταξης με μείωση των στηλών σε μία (βλ. Εικόνα 4.4, δεξιά). Μια τέτοια προσαρμογή καθίσταται δυνατή με τη χρήση των ερωτημάτων μέσων που συζητούνται σε επόμενη υποενότητα. ΠΡΟΤΑΣΗ ΠΕΡΑΙΤΕΡΩ ΜΕΛΕΤΗΣ ΜΕ ΠΑΡΑΛΛΗΛΑ ΚΕΙΜΕΝΑ Μελετήστε ένα βοηθητικό tutorial για τη δημιουργία ρευστών διατάξεων με HTML5 και CSS3: fluid layouts html5 and css pixels (100%) Header 320 pixels Header Navigation bar Navigation bar 640 pixels (66,6%) Content Content Footer Footer Εικόνα 4.4: Αριστερά: Αντιστοιχία απόλυτων και σχετικών τιμών πλάτους σε καθορισμένες και ρευστές διατάξεις, αντίστοιχα. Δεξιά: Προσαρμογή της διάταξης σε μικρή οθόνη. Μία περίπτωση ρευστής διάταξης, που τίθεται συχνά σε εφαρμογή σε σύγχρονα έργα σχεδιασμού ιστοτόπων είναι η διάταξη ρευστού πλέγματος (fluid grid layout). Όπως υποδηλώνει το όνομά της, αφορά σε διάταξη στην οποία ο χώρος διαμοιράζεται σε γραμμές και στήλες βάσει ενός πλέγματος. Η έννοια του πλέγ

9 Κεφ.4: Σχεδιασμός Προσαρμοστικών Ιστοτόπων 93 ματος χρησιμοποιείται από πολλούς σχεδιαστές, τόσο σε έντυπα μέσα όσο και στον ιστό. Μια βασική ιδιότητα του πλέγματος είναι το σταθερό πλάτος των στηλών και των κενών διαστημάτων μεταξύ των στηλών. Το πλάτος ρυθμίζεται από CSS κανόνες με χρήση ποσοστιαίων μονάδων (ώστε να διασφαλίζεται η ρευστότητα). Τυπικά, ο αριθμός των στηλών ποικίλλει από 1 έως και 12. Μάλιστα, ο α ριθμός των στηλών μπορεί να διαφέρει ανά γραμμή, ενώ τμήματα περιεχομένου που εμφανίζονται σε μια γραμμή ενδέχεται να καταλαμβάνουν διαφορετικό α ριθμό στηλών (βλ. Εικόνα 4.5). Εικόνα 4.5: Παράδειγμα διάταξης ρευστού πλέγματος με 12 στήλες (πηγή: Η Εικόνα 4.6 παρουσιάζει την προσαρμογή μιας διάταξης πλέγματος, όπου η διάταξη προσαρμόζεται ανάλογα με το πλάτος οθόνης της συσκευής του χρήστη.

10 94 Κινητές Τεχνολογίες Εικόνα 4.6: Παράδειγμα προσαρμοστικής διάταξης ρευστού πλέγματος (πηγή: Επισήμανση Σήμερα διατίθενται ελεύθερα μια σειρά από CSS πλαίσια (CSS frameworks) που βελτιώνουν την αποδοτικότητα σχεδιασμού ιστοτόπων βάσει διάταξης ρευστού πλέγματος. Τα CSS πλαίσια διευκολύνουν το συμβατό με τα πρότυπα ιστού σχεδιασμό ιστοσελίδων χρησιμοποιώντας την τεχνολογία CSS. Τα περισσότερα από αυτά επιτρέπουν το σχεδιασμό με διάταξη ρευστού πλέγματος. Κάποια μάλιστα ενσωματώνουν περισσότερες λειτουργίες (συνήθως JavaScript βιβλιοθήκες), οι οποίες είναι ως επί το πλείστον προσανατολισμένες στο σχεδιασμό (αυτό το στοιχείο τα διαφοροποιεί από τα αμιγώς

11 Κεφ.4: Σχεδιασμός Προσαρμοστικών Ιστοτόπων 95 Javascript πλαίσια). Ένα δημοφιλές CSS πλαίσιο, το Bootstrap, θα παρουσιασθεί στη συνέχεια αυτού του κεφαλαίου Ευέλικτες εικόνες Οι ρευστές διατάξεις προσφέρουν ικανοποιητική λύση για την προσαρμογή κειμένου μέσα σε ευέλικτα «δοχεία 2» (containers). Το κείμενο των ιστοσελίδων είναι εξ ορισμού ρευστό: όσο το παράθυρο του περιηγητή στενεύει, το κείμενο ρέει διαφορετικά, δηλαδή προσαρμόζεται καταλαμβάνοντας το διαθέσιμο χώρο. Οι εικόνες, απεναντίας, δεν είναι εκ φύσεως ρευστές: το μέγεθος και ο προσανατολισμός τους παραμένουν σταθερά ανεξαρτήτως διαμόρφωσης του παραθύρου προβολής. Έτσι «κόβονται» όταν γίνουν πολύ μεγάλες ώστε να χωρέσουν στο δοχείο τους. Αυτό δημιουργεί ένα γρίφο σχετικά με την εμφάνιση εικόνων σε έναν κινητό περιηγητή: επειδή διατηρούνται στις αρχικές τους διαστάσεις, οι εικόνες είτε θα αποκοπούν είτε θα εμφανιστούν εκτός κλίμακας σε σύγκριση με το περιβάλλον κείμενο του οποίου το μέγεθος προσαρμόζεται καθώς το παράθυρο του περιηγητή στενεύει. Η απλούστερη λύση σε αυτό το πρόβλημα είναι να οριστούν οι μέγιστες διαστάσεις που μπορεί να έχει η εικόνα: img { max width: 100%; height: auto; Η ρύθμιση της ιδιότητας max width σε 100% θα κάνει την εικόνα να αλλάξει κλίμακα ώστε το πλάτος της να ταυτιστεί με εκείνο του δοχείου της, μόνο όταν το πλάτος του τελευταίου γίνει μικρότερο από το πλάτος της εικόνας (όσο το πλάτος του δοχείου είναι μεγαλύτερο από το πλάτος της εικόνας, το τελευταίο θα παραμείνει στη φυσική του τιμή). Όποτε το πλάτος της εικόνας κλιμακώσει (μειωθεί) ώστε να χωρέσει στο πλάτος του δοχείου, τότε το ύψος της θα ρυθμιστεί αυτόματα (auto) ώστε η αναλογία πλάτος:ύψος να παραμείνει αμετάβλητη. 2 Ως δοχείο ενός html στοιχείου νοείται το περιβάλλον στοιχείο στο οποίο ενσωματώνεται. Για παράδειγμα, στον κώδικα <body><div id="mycontainer"><p>bla bla</p></div></body>, το δοχείο της παραγράφου (<p>) είναι το <div> με αναγνωριστικό "mycontainer", ενώ στον κώδικα <body> <p>bla bla</p> </body>, το δοχείο της παραγράφου (<p>) είναι το <body>.

12 96 Κινητές Τεχνολογίες Οι παραπάνω ρυθμίσεις θέτουν μέγιστο αλλά όχι και ελάχιστο όριο στις διαστάσεις της εικόνας. Αυτό σημαίνει ότι εφόσον το δοχείο μικρύνει πολύ, αντίστοιχα θα μικρύνει και η εικόνα με αποτέλεσμα να καταστεί δυσανάγνωστη και να απαιτεί από το χρήστη να μεγεθύνει/σμικρύνει. Το πρόβλημα αυτό αντιμετωπίζεται με τη συνδυαστική χρήση της ιδιότητας min width η οποία προσδιορίζει το ελάχιστο πλάτος μιας εικόνας στο οποίο θεωρείται αναγνώσιμη. Όταν το δοχείο μικρύνει πέραν του ορίου αυτού, οι διαστάσεις της εικόνας δεν θα μειωθούν περαιτέρω και η εικόνα θα εμφανιστεί με οριζόντια κύλιση. img { width:auto; max width: 100%; min width:350px; height: auto; Εικόνα 4.7: Αποτέλεσμα της εφαρμογής της ιδιότητας max width (μεσαία εικόνα) και συνδυασμού max width και min width (δεξιά εικόνα) σε μια εικόνα με φυσικές διαστάσεις 600x463.

13 Κεφ.4: Σχεδιασμός Προσαρμοστικών Ιστοτόπων 97 Οι οθόνες που παρουσιάζονται στην Εικόνα 4.7 δείχνουν διαδοχικά την εμφάνιση μιας εικόνας χωρίς τη χρήση των ιδιοτήτων max width ή min width, με χρήση μόνο της max width και με χρήση αμφότερων των max width και min width, α ντίστοιχα. Επισήμανση Η υποστήριξη της CSS ιδιότητας min width είναι προβληματική σε μια σειρά από περιηγητές, όπως ο Internet Explorer και ο Opera Mobile Ερωτήματα μέσων Τα ερωτήματα μέσων (media queries) αποτελούν μέρος των προδιαγραφών των CSS3 και επιτρέπουν στην απόδοση περιεχομένου να προσαρμόζεται στις εκάστοτε συνθήκες, π.χ. στην ανάλυση οθόνης της συσκευής. Πρακτικά, αποτελεί συνιστώμενο πρότυπο (recommended standard) του W3C από τον Ιούνιο του 2012 και θεωρείται ο ακρογωνιαίος λίθος του προσαρμοστικού σχεδιασμού. Τα ερωτήματα μέσων επιτρέπουν τη συλλογή πληροφοριών για τη συσκευή και τον περιηγητή του χρήστη. Οι πληροφορίες αυτές μπορούν στη συνέχεια να χρησιμοποιηθούν υπό συνθήκες (conditionally) για την εφαρμογή διαφορετικών στυλ (CSS). Για παράδειγμα, ανάλογα με την ανάλυση της οθόνης του χρήστη θα επιλέγεται και το κατάλληλο εξωτερικό CSS αρχείο που θα διασφαλίζει μία βέλτιστη διάταξη των στοιχείων της ιστοσελίδας. Ήδη από τις ημέρες των CSS 2.1, δίνονταν η δυνατότητα κάποιου βαθμού επίγνωσης του τύπου του μέσου (media type) και εφαρμογής των κατάλληλων CSS κανόνων για κάθε τύπο. Για παράδειγμα, ένα έγγραφο θα εφάρμοζε διαφορετικά φύλλα στυλ ανάλογα με το αν προορίζονταν για προβολή σε οθόνη ή εκτύπωση. Στην HTML4, αυτό θα γραφόταν ως εξής: <link rel="stylesheet" type="text/css" media="screen" href="sans serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> Τα ερωτήματα μέσων βελτιώνουν κατά πολύ την παραπάνω δυνατότητα επιτρέποντας τη στόχευση όχι μόνο ορισμένων κατηγοριών μέσων, αλλά στην πραγματικότητα την εξέταση των φυσικών χαρακτηριστικών της συσκευής που αποδίδει μια ιστοσελίδα. Για παράδειγμα, ένα κατάλληλα διατυπωμένο ερώτημα μέσου θα επέτρεπε την παροχή ενός προσαρμοσμένου φύλλου στυλ σε iphone και Android τηλέφωνα (και όμοιά τους), ως εξής: <link rel="stylesheet" type="text/css" media="screen and (max device width: 480px)" href="smartphone.css" />

14 98 Κινητές Τεχνολογίες Το παραπάνω ερώτημα περιλαμβάνει δύο μέρη: Ένα τύπο μέσου (screen), και Το ερώτημα καθεαυτό, το οποίο περικλείεται σε παρένθεση, και περιέχει ένα ιδιαίτερο χαρακτηριστικό του μέσου (max device width) που ελέγχεται, ακολουθούμενο από την τιμή στόχο (480px). Ουσιαστικά ρωτάμε τη συσκευή κατά πόσο η οριζόντια ανάλυσή της (max devicewidth) είναι ίση ή μικρότερη των 480px. Εφόσον ο έλεγχος αυτός περάσει (πρέπει να επισημανθεί ότι ο έλεγχος γίνεται στην πλευρά του πελάτη, από τον περιηγητή), εφόσον δηλαδή ο χρήστης εμφανίζει τη σελίδα σε μικρή οθόνη τότε η συσκευή θα εφαρμόσει στην ιστοσελίδα το smartphone.css. Διαφορετικά, η <link> ετικέτα θα αγνοηθεί εντελώς. Επιπλέον, μπορούμε να ελέγξουμε πολλαπλές τιμές ιδιοτήτων values με ένα μόνο ερώτημα συνδέοντας τους επιμέρους ελέγχους με τη λέξη κλειδί and : <link rel="stylesheet" type="text/css" media="screen and (max device width: 480px) and (resolution: 200dpi)" href="smartphone.css" /> Τα ερωτήματα μέσων δεν διατυπώνονται μόνο σε <link> ετικέτες, αλλά μπορούν να περιλαμβάνονται και σε CSS με χρήση screen and (orientation: portrait) {.column { width:50%; Το παρακάτω παράδειγμα αφορά σε μια σελίδα η οποία προσαρμόζεται όταν αποδοθεί σε συσκευή που περνάει το ερώτημα μέσων (έχει πλάτος μικρότερο από 480px). Το αποτέλεσμα φαίνεται στις οθόνες που ακολουθούν (βλ. Εικόνα 4.8). <!doctype html> <html> <head> <meta charset="utf 8"> <title>media query "utf 8"; /* CSS Document */ body { background color: pink;

15 Κεφ.4: Σχεδιασμός Προσαρμοστικών Ιστοτόπων 99 <link href="media_1.css" rel="stylesheet" type="text/css"> <meta name="viewport" cotent="width=device width, initialscale=1.0, maximum scale=10.0, user scalable=yes" /> </head> <body> <p>αυτή η παράγραφος προσαρμόζεται όταν η ιστοσελίδα φορτώνεται σε οθόνη με πλάτος < 320px. το χρώμα υπόβαθρου αλλάζει σε πορτοκαλί και το μέγεθος της γραμματοσειράς μειώνεται στο μισό.</p> </body> </html> font screen and (max width: 480px) { body { background color: orange; font size:1.5em; Εικόνα 4.8: Απόδοση της ιστοσελίδας σε οθόνες 800x480 και 480x800.

Στοιχεία ορισμού θέσης (Positioning Elements)

Στοιχεία ορισμού θέσης (Positioning Elements) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS

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

Απαντήστε στις παρακάτω ερωτήσεις πολλαπλής επιλογής (μόνο μία ερώτηση είναι σωστή):

Απαντήστε στις παρακάτω ερωτήσεις πολλαπλής επιλογής (μόνο μία ερώτηση είναι σωστή): Απαντήστε στις παρακάτω ερωτήσεις πολλαπλής επιλογής (μόνο μία ερώτηση είναι σωστή): 1. Ο Παγκόσμιος Ιστός (world wide web): a. Ταυτίζεται με το Internet b. Είναι υπηρεσία διαχείρισης και πρόσβασης σε

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

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

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

Το απεικονιστικό μοντέλο μορφοποίησης των CSS

Το απεικονιστικό μοντέλο μορφοποίησης των CSS Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει

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

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

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

Περιεχόμενα. Γαβαλάς Δαμιανός

Περιεχόμενα. Γαβαλάς Δαμιανός Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα

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

Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες

Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

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

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

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

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

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

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

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML Δικτυακά Πολυμέσα ΙΙ Διάλεξη #2 η : Βασικές έννοιες σχεδιασμού στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Τρέχον status της HTML Μετάβαση από την HTML στην XHTML Κλέ Καλές πρακτικές συγγραφής

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

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box

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

ΠΡΟΛΟΓΟΣ. Σε ποιους απευθύνεται αυτό το βιβλίο... vi Διάρθρωση του βιβλίου... vi

ΠΡΟΛΟΓΟΣ. Σε ποιους απευθύνεται αυτό το βιβλίο... vi Διάρθρωση του βιβλίου... vi Πίνακας Περιεχομένων ΠΡΟΛΟΓΟΣ V Σε ποιους απευθύνεται αυτό το βιβλίο... vi Διάρθρωση του βιβλίου... vi 1η Ενότητα: Κινητός ιστός... vii 2η Ενότητα: Κινητές εφαρμογές στην πλατφόρμα Android... vii 3η Ενότητα:

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

Σενάρια ανάκτησης πληροφορίας στο «παραδοσιακό» Internet

Σενάρια ανάκτησης πληροφορίας στο «παραδοσιακό» Internet Δικτυακά Πολυμέσα ΙΙ Διάλεξη #10 η : Σχεδιασμός web sites για κινητές συσκευές Γαβαλάς Δαμιανός dgavalas@aegean.gr Σενάρια ανάκτησης πληροφορίας στο «παραδοσιακό» Internet 1o επίπεδο (1-tier) HTTP αίτηση

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

Η Βίβλος των CSS. Εισαγωγή στα CSS

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

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

Γαβαλάς Δαμιανός 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 προσδιορίζει τη βασική

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

Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards

Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards Η Βίβλος των CSS - Μέρος 4 Positioning, Layers και Web Standards Τα Επιπλέοντα Στοιχεία Ένα στοιχείο μπορεί να τοποθετηθεί στα δεξιά (right) ή στα αριστερά (left) με χρήση της ιδιότητας float. Αυτό πρακτικά

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

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

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

Ermis Digital. Θα χρησιµοποιηθεί, σε περίπτωση βράβευσης, για την παρουσίαση της συµµετοχής στην τελετή απονοµής και στα έντυπα της διοργάνωσης.

Ermis Digital. Θα χρησιµοποιηθεί, σε περίπτωση βράβευσης, για την παρουσίαση της συµµετοχής στην τελετή απονοµής και στα έντυπα της διοργάνωσης. Ermis Digital Η έκθεση δεν θα πρέπει να ξεπερνάει συνολικά τις 10 σελίδες (µαζί µε τις οδηγίες συµπλήρωσης των πεδίων). Για τις απαντήσεις θα πρέπει να χρησιµοποιηθεί µέγεθος γραµµατοσειράς 10 ή και µεγαλύτερο.

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

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

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

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

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

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

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

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

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

Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets

Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ CSS - Cascading Style Sheets Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο

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

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

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

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

Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 8: Mobile Web. Καθ. Ιωάννης Γαροφαλάκης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής

Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 8: Mobile Web. Καθ. Ιωάννης Γαροφαλάκης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 8: Mobile Web Καθ. Ιωάννης Γαροφαλάκης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής Σκοποί ενότητας Σκοπός της παρούσας ενότητας είναι να εξοικειωθούν

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

Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress

Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress Δημιουργία και συντήρηση ιστοτόπου με χρήση WordPress Διήμερο σεμινάριο για δημιουργία ιστοσελίδων με WordPress στο περιβάλλον του ΠΣΔ για τους εκπαιδευτικούς ΠΕ19/20 Βερύκιος Α., ΚΕΠΛΗΝΕΤ Λευκάδας Διήμερο

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

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο

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

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

Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας

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

Γραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις

Γραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Γαβαλάς Δαμιανός dgavalas@aegean.gr Γραπτή εξέταση H διάρκεια της εξέτασης θα είναι 2 ώρες και 15 Θα απαντήσετε σε

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

Διάλεξη 6η CSS Advanced

Διάλεξη 6η CSS Advanced Διάλεξη 6η CSS Advanced Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e. (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Block & Inline elements Advanced

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

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

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

Σπουδές 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 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative

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

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

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

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

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

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

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

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

5.1.1 Περιγραφή των συστατικών τμημάτων ενός γραφήματος

5.1.1 Περιγραφή των συστατικών τμημάτων ενός γραφήματος 5. Γραφήματα 5.1 Εισαγωγή 5.1.1 Περιγραφή των συστατικών τμημάτων ενός γραφήματος Το Discoverer παρέχει μεγάλες δυνατότητες στη δημιουργία γραφημάτων, καθιστώντας δυνατή τη διαμόρφωση κάθε συστατικού μέρους

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

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

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

12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή».

12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή». 12. HTML και CSS Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στην τεχνολογία Cascading Style Sheets (CSS), η εξοικείωση με τις βασικές αρχές και χρήσεις της και τη

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

Υπερσυνδέσεις (hyperlinks)

Υπερσυνδέσεις (hyperlinks) Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)

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

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

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

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

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης

Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες

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

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο Το περιβάλλον εργασίας Ανοίγοντας την Ελληνική Έκδοση του FrontPage, για πρώτη φορά, η εικόνα που θα συναντήσουμε είναι αυτή της Εικόνας 1 με τα Μενού Εντολών και τη Γραμμή Εργαλείων, στο πάνω μέρος της

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

Προαπαιτούμενες Ρυθμίσεις: Για την σωστή εκτύπωση των προσφορών απαιτούνται οι εξής ρυθμίσεις στο φυλλομετρητή (browser) που χρησιμοποιείτε:

Προαπαιτούμενες Ρυθμίσεις: Για την σωστή εκτύπωση των προσφορών απαιτούνται οι εξής ρυθμίσεις στο φυλλομετρητή (browser) που χρησιμοποιείτε: Ελάχιστες Απαιτήσεις Εφαρμογής Η εφαρμογή για να λειτουργήσει σωστά απαιτεί τα εξής: Internet Explorer 6.0 ή νεότερο / Mozilla Firefox 1.5 ή νεότερο / Safari Οποιοδήποτε συνδυασμό υπολογιστή (PC/MAC/Linux/Unix)

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

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

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

Παράδειγμα 6 Προσομοίωση και επίλυση Επίπεδων Πλακών

Παράδειγμα 6 Προσομοίωση και επίλυση Επίπεδων Πλακών Παράδειγμα 6 Προσομοίωση και επίλυση Επίπεδων Πλακών 2 Σημείωση Η ACE-HELLAS στο πλαίσιο της ανάπτυξης και βελτιστοποίησης των προϊόντων της, και συγκεκριμένα της εφαρμογής SCADA Pro, δημιούργησε τη νέα

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

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

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

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

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

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

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

Οδηγός γρήγορης εκκίνησης του PowerSuite Το PowerSuite είναι η ολοκληρωμένη λύση απόδοσης για τον υπολογιστή σας. Ενσωματώνοντας το RegistryBooster, το DriverScanner και το SpeedUpMyPC σε ένα ενιαίο περιβάλλον εργασίας σάρωσης, το PowerSuite

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

Περιεχόμενα. Περιεχόμενα...v

Περιεχόμενα. Περιεχόμενα...v Περιεχόμενα Περιεχόμενα...v Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...1 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...18 Κεφάλαιο 3: Εύρεση, αντικατάσταση, και μετάβαση σε συγκεκριμένο στοιχείο...35

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

Στοιχεία παρουσίασης. Εισαγωγή Θεωρητικό υπόβαθρο Υλοποίηση λογισμικού μέρους συστήματος Συμπεράσματα Μελλοντικές Επεκτάσεις

Στοιχεία παρουσίασης. Εισαγωγή Θεωρητικό υπόβαθρο Υλοποίηση λογισμικού μέρους συστήματος Συμπεράσματα Μελλοντικές Επεκτάσεις ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ Σχεδιασμός Πληροφοριακού Συστήματος Καταγραφής μετρήσεων κοινής ωφελείας Υποβοηθούμενο από οπτική αναγνώριση μέσω Κινητού τηλεφώνου Μπούντας Δημήτρης Επιβλέπων Καθηγητής : Δασυγένης

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

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

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

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

Δημιουργώντας μια εφαρμογή ζωγραφικής. 2 η Εργασία

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

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

ΠΕΡΙΕΧΟΜΕΝΑ. Κεφάλαιο 3: Προσθήκη πλαισίων...65 Τρόπος λειτουργίας των πλαισίων Δημιουργία πλαισιοσυνόλου Χρήση του πάνελ Frames...

ΠΕΡΙΕΧΟΜΕΝΑ. Κεφάλαιο 3: Προσθήκη πλαισίων...65 Τρόπος λειτουργίας των πλαισίων Δημιουργία πλαισιοσυνόλου Χρήση του πάνελ Frames... ΠΕΡΙΕΧΟΜΕΝΑ Εισαγωγή...11 Κεφάλαιο 1: Προσθήκη πινάκων...15 Δημιουργία διάταξης χωρίς πίνακες... 16 Δημιουργία πίνακα... 18 Επιλογή στοιχείων πίνακα... 23 Χρήση κατάστασης Διευρυμένων πινάκων για επιλογή...

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

ICOP - ΥΠΗΡΕΣΙΕΣ INTERNET-WEBSOLUTIONS ΠΡΟΤΑΣΗ-ΑΝΑΘΕΣΗ ΕΡΓΟΥ

ICOP - ΥΠΗΡΕΣΙΕΣ INTERNET-WEBSOLUTIONS ΠΡΟΤΑΣΗ-ΑΝΑΘΕΣΗ ΕΡΓΟΥ Θρασυμάχου 14, Αθήνα - 6ος όροφος Τηλέφωνο: 210 2139880 Fax: 210 2139916 E-mail: sales@icop.gr www.icop.gr ICOP - ΥΠΗΡΕΣΙΕΣ INTERNET-WEBSOLUTIONS ΠΡΟΤΑΣΗ-ΑΝΑΘΕΣΗ ΕΡΓΟΥ Ημερομηνία: E-mail:.. Εταιρεία:..

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

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

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

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!). Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

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

Εισαγωγή στην εφαρμογή Βασική Σελίδα (Activity) Αναζήτηση Πελάτη... 6 Προβολή Πελάτη... 7 Επεξεργασία Πελάτη... 10

Εισαγωγή στην εφαρμογή Βασική Σελίδα (Activity) Αναζήτηση Πελάτη... 6 Προβολή Πελάτη... 7 Επεξεργασία Πελάτη... 10 Περιεχόμενα Εισαγωγή στην εφαρμογή... 2 Βασική Σελίδα (Activity)... 3 Ρυθμίσεις... 3 Πελάτες... 6 Αναζήτηση Πελάτη... 6 Προβολή Πελάτη... 7 Επεξεργασία Πελάτη... 10 Αποθήκη... 11 Αναζήτηση προϊόντος...

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

Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων.

Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων. Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων. Στην παρούσα άσκηση πρόκειται να δημιουργήσετε έναν ιστότοπο, ο οποίος θα αποτελείται από πολλές ιστοσελίδες που θα προβάλουν τα εκθέματα

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

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

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

Επεξεργασία κειμένου: Word 2003

Επεξεργασία κειμένου: Word 2003 Περιεχόμενα Λίγα λόγια από το συγγραφέα...7 Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...9 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...26 Κεφάλαιο 3: Εύρεση, αντικατάσταση, και μετάβαση σε συγκεκριμένο

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

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

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

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

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

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

Οικονομική Προσφορά Κατασκευή Ιστοσελίδας

Οικονομική Προσφορά Κατασκευή Ιστοσελίδας Οικονομική Προσφορά Κατασκευή Ιστοσελίδας 2015 Η εταιρία μας Η Moving up είναι μια εταιρία που δραστηριοποιείται στον τομέα των ολοκληρωμένων μορφών επικοινωνίας και διαφήμισης.όποιο και αν είναι το διαφημιστικό

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

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

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

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

9. Τοπογραφική σχεδίαση

9. Τοπογραφική σχεδίαση 9. Τοπογραφική σχεδίαση 9.1 Εισαγωγή Το κεφάλαιο αυτό εξετάζει τις παραμέτρους, μεθόδους και τεχνικές της τοπογραφικής σχεδίασης. Η προσέγγιση του κεφαλαίου γίνεται τόσο για την περίπτωση της συμβατικής

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

Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver.

Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. 37 Αφού καθορίσετε τα βασικά στοιχεία του νέου κανόνα css, όπως είδαµε στις προηγούµενες διαφάνειες,

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

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table. DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη

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

Εκπαιδευτικά Περιβάλλοντα Διαδικτύου

Εκπαιδευτικά Περιβάλλοντα Διαδικτύου ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται

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

Advertising Options. Advertising Options

Advertising Options. Advertising Options Advertising Options Οι τρόποι διαφημιστικής προβολής που προσφέρονται μέσω της ιστοσελίδας του www.skroutz.gr είναι οι εξής: Front Page Sponsorhip Category Skin Flash Banner Στην επιλογή Front Page Sponsorship

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

ICOP - ΥΠΗΡΕΣΙΕΣ INTERNET-WEBSOLUTIONS ΠΡΟΤΑΣΗ-ΑΝΑΘΕΣΗ ΕΡΓΟΥ(760) Εταιρεία:.. Προς:. Tηλ.:.. Πωλητής:

ICOP - ΥΠΗΡΕΣΙΕΣ INTERNET-WEBSOLUTIONS ΠΡΟΤΑΣΗ-ΑΝΑΘΕΣΗ ΕΡΓΟΥ(760) Εταιρεία:.. Προς:. Tηλ.:.. Πωλητής: Θρασυμάχου 14, Αθήνα - 6ος όροφος Τηλέφωνο: 210 2139880 Fax: 210 2139916 E-mail: sales@icop.gr www.icop.gr ICOP - ΥΠΗΡΕΣΙΕΣ INTERNET-WEBSOLUTIONS ΠΡΟΤΑΣΗ-ΑΝΑΘΕΣΗ ΕΡΓΟΥ(760) Ημερομηνία:.. E-mail: Εταιρεία:..

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

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

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

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

ZTrade One version 1.1

ZTrade One version 1.1 ZTrade One version 1.1 Περιεχόμενα 1. Πλοήγηση 2. Κατάσταση Εφαρμογής 3. Λίστα Μετοχών 4. Χαρτοφυλάκια 5. Ξένοι Δείκτες 6. Τεχνική Ανάλυση 7. Ειδοποιήσεις 8. Ρυθμίσεις 1. Πλοήγηση Η εφαρμογή οργανώνεται

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

Με την αλλαγή των μεταβλητών σελιδοποίησης αυτόματα ρυθμίζετε το νέο όριο για τα άρθρα και τα αποτελέσματα αναζήτησης.

Με την αλλαγή των μεταβλητών σελιδοποίησης αυτόματα ρυθμίζετε το νέο όριο για τα άρθρα και τα αποτελέσματα αναζήτησης. Γενικές Ρυθμίσεις Στην ενότητα αυτή θα περιγράψουμε τις λειτουργίες των Γενικών Ρυθμίσεων. Εκεί αποθηκεύονται όλες οι ρυθμίσεις του Guru CMS. Εάν κάνετε κλικ στο σύνδεσμο "Γενικές Ρυθμίσεις" από την κύρια

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

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ Τμήμα Ψηφιακών Συστημάτων ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ «ΔΙΔΑΚΤΙΚΗ ΤΗΣ ΤΕΧΝΟΛΟΓΙΑΣ ΚΑΙ ΨΗΦΙΑΚΑ ΣΥΣΤΗΜΑΤΑ» ΚΑΤΕΥΘΥΝΣΗ: ΗΛΕΚΤΡΟΝΙΚΗ ΜΑΘΗΣΗ ΜΕΤΑΠΤΥΧΙΑΚΗ ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΕΦΑΡΜΟΖΟΝΤΑΣ

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

Ένα διαδικτυακό εργαλείο δημιουργίας παρουσιάσεων

Ένα διαδικτυακό εργαλείο δημιουργίας παρουσιάσεων Ένα διαδικτυακό εργαλείο δημιουργίας παρουσιάσεων Περιεχόμενα 1. Περιγραφή 2. Οδηγίες χρήσης 2.1 Δημιουργία λογαριασμού 2.2 Περιβάλλον εργασίας 2.3 Βασικές λειτουργίες 2.3.1 Εισαγωγή (Insert) 2.3.2 Πλαίσιο

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

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει

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

Δημιουργώντας γραφικά στο περιβάλλον 3Ds Max χρησιμοποιώντας βασικά εργαλεία

Δημιουργώντας γραφικά στο περιβάλλον 3Ds Max χρησιμοποιώντας βασικά εργαλεία Δημιουργώντας γραφικά στο περιβάλλον 3Ds Max χρησιμοποιώντας βασικά εργαλεία Στην άσκηση αυτή θα μάθετε πώς να χρησιμοποιήσετε βασικά εργαλεία στο περιβάλλον 3Ds Max για να δημιουργήσετε ένα τρισδιάστατο

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

ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ

ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ 1. ΠΕΡΙΒΑΛΛΟΝ ΗΛΕΚΤΡΟΝΙΚΟΥ ΥΠΟΛΟΓΙΣΤΗ 1.1. Βασικές Λειτουργίες και Ρυθµίσεις 1.1.1 Εκκίνηση, Τερµατισµός, Επανεκκίνηση του Η/Υ ακολουθώντας τις κατάλληλες διαδικασίες 1.1.2

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

1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών

1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Προσθήκη Πίνακα (Table) 2. Εισαγωγή Και Μετακίνηση Κειμένου Σε Πίνακα 3. Εισαγωγή Στηλών Και Γραμμών Σε Πίνακα 4. Διαγραφή Στηλών Και Γραμμών Σε Πίνακα 5. Αλλαγή Πλάτους Στηλών Και

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

Δημιουργία ενός κενού πίνακα

Δημιουργία ενός κενού πίνακα 3.4.1.1 Δημιουργία ενός κενού πίνακα Ένας πίνακας αποτελείται από έναν αριθμό γραμμών και στηλών που δημιουργούν ένα πλέγμα. Σε αυτό το πλέγμα είναι πιθανή η ύπαρξη ή μη περιθωρίων. Κάθε κελί του πίνακα

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

Stroke.

Stroke. Το φυλλάδιο οδηγιών που κρατάτε στα χέρια σας βρίσκεται και σε ηλεκτρονική μορφή (αρχείο Acrobatpdf) στον φάκελο PDF του υπολογιστή (υπάρχει η σχετική συντόμευση την επιφάνεια εργασίας). Για την καλύτερη

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

ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΑΡΑΓΩΓΗ ΔΙΑΦΗΜΙΣΗΣ

ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΑΡΑΓΩΓΗ ΔΙΑΦΗΜΙΣΗΣ ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΑΡΑΓΩΓΗ ΔΙΑΦΗΜΙΣΗΣ Η διαφήμιση με μία μόνο λέξη χαρακτηρίζεται και ως «υπόσχεση», καθώς δίνει μια υπόσχεση στον υποψήφιο αγοραστή, για το προϊόν που διαφημίζει και αναφέρεται στην επίδραση

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

Θέματα Ψηφιακής Οικονομίας

Θέματα Ψηφιακής Οικονομίας Θέματα Ψηφιακής Οικονομίας Ενότητα 3: Δημιουργία mockup δικτυακής επιχείρισης Μανώλης Τζαγκαράκης, Βικτωρία Δασκάλου Σχολή Οργάνωσης και Διοίκησης Επιχειρήσεων Τμήμα Οικονομικών Επιστημών Σκοποί ενότητας

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

Τροποποίηση συνδυασμών κίνησης

Τροποποίηση συνδυασμών κίνησης Τροποποίηση συνδυασμών κίνησης Σε αυτήν την πρακτική εξάσκηση, θα τροποποιήσετε τους συνδυασμούς που έχουν εφαρμοστεί στην παρουσίαση της εταιρείας σας. Βήμα 1: Αλλαγή του εφέ για το κείμενο του τίτλου

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

Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ

Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΠΕΡΙΕΧΟΜΕΝΑ Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΘΕΜΑΤΙΚΗ ΕΝΟΤΗΤΑ Α Δομή και λειτουργία προσωπικού υπολογιστή...11 ΘΕΜΑΤΙΚΗ ΕΝΟΤΗΤΑ Β Δομή και χρήση λειτουργικών συστημάτων DOS, UNIX και λειτουργικού

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

ΠΙΝΑΚΙΔΕΣ ΠΑΡΟΥΣΙΑΣΗΣ

ΠΙΝΑΚΙΔΕΣ ΠΑΡΟΥΣΙΑΣΗΣ ΠΙΝΑΚΙΔΕΣ ΠΑΡΟΥΣΙΑΣΗΣ ΥΠΑΡΧΟΝΤΟΣ ΚΤΗΡΙΟΥ Ή ΣΧΕΔΙΑΣΜΟΥ ΝΕΟΥ ΚΤΗΡΙΟΥ Ένα από τα πιο κρίσιμα σημεία της διαδικασίας σχεδιασμού είναι η παρουσίαση της ανάλυσης της ιδέας σας 1. Έχετε εργαστεί στη διαδικασία

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

Λύσεις Epson για συσκέψεις ΒΙΝΤΕΟΠΡΟΒΟΛΕΑΣ Ή ΕΠΙΠΕΔΗ ΟΘΟΝΗ;

Λύσεις Epson για συσκέψεις ΒΙΝΤΕΟΠΡΟΒΟΛΕΑΣ Ή ΕΠΙΠΕΔΗ ΟΘΟΝΗ; Λύσεις Epson για συσκέψεις ΒΙΝΤΕΟΠΡΟΒΟΛΕΑΣ Ή ΕΠΙΠΕΔΗ ΟΘΟΝΗ; ΤΙ ΑΠΑΙΤΉΣΕΙΣ ΠΡΈΠΕΙ ΝΑ ΈΧΕΤΕ ΑΠΌ ΜΙΑ ΟΘΌΝΗ; Αυτός ο οδηγός διερευνά τη σημασία του μεγέθους της οθόνης, της απόδοσης κόστους και της ποιότητας

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

Άσκηση 6 η Ανύψωση Σχημάτων. Στόχος της άσκησης

Άσκηση 6 η Ανύψωση Σχημάτων. Στόχος της άσκησης Άσκηση 6 η Ανύψωση Σχημάτων Στόχος της άσκησης Στην παρούσα άσκηση θα δούμε πως μπορούμε να ανυψώσουμε μία διατομή κατά μήκος μίας καμπύλης spline, η οποία παίζει το ρόλο της διαδρομής, με σκοπό να δημιουργήσουμε

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

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

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

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

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς Εργασία-3: Παρουσίαση Εργασίας Ομάδα Α. Προετοιμασία Αναφοράς Αρκετοί πιστεύουν πως η επιτυχία μιας παρουσίασης είναι δεδομένη εάν ο παρουσιαστής κατέχει το θέμα που πρόκειται να παρουσιάσει και είναι

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

Γενική Παρουσίαση ADMAN

Γενική Παρουσίαση ADMAN Γενική Παρουσίαση ADMAN Phaistos Networks 2011 Καλώς ήλθατε στην υπηρεσία ADMAN Η πλατφόρμα ADMAN είναι μία προηγμένη υπηρεσία διαχείρισης, διανομής και παρακολούθησης στοχευμένων διαφημιστικών εκστρατειών

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

Λύσεις βιντεοπροβολέων. Το μέγεθος της οθόνης έχει σημασία στην εκπαίδευση

Λύσεις βιντεοπροβολέων. Το μέγεθος της οθόνης έχει σημασία στην εκπαίδευση Λύσεις βιντεοπροβολέων Το μέγεθος της οθόνης έχει σημασία στην εκπαίδευση ΤΙ ΑΠΑΙΤΉΣΕΙΣ ΠΡΈΠΕΙ ΝΑ ΈΧΕΤΕ ΑΠΌ ΜΙΑ ΟΘΌΝΗ; Αυτός ο οδηγός διερευνά τη σημασία του μεγέθους της οθόνης, της απόδοσης κόστους και

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

Άνοιγμα (και κλείσιμο) της εφαρμογής Εγγράφου Κειμένου

Άνοιγμα (και κλείσιμο) της εφαρμογής Εγγράφου Κειμένου 3.1.1.1 Άνοιγμα (και κλείσιμο) της εφαρμογής Εγγράφου Κειμένου Ως επί το πλείστον δεν υπάρχουν διαφορές στη χρήση του Εγγράφου Κειμένου στα λειτουργικά Windows ή Linux. Η σημαντικότερη διαφορά παρουσιάζεται

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

Γαβαλάς Δαμιανός dgavalas@aegean.gr

Γαβαλάς Δαμιανός dgavalas@aegean.gr Δικτυακά Πολυμέσα ΙΙ Διάλεξη #1 η : Οργάνωση & στόχοι μαθήματος, καλές αρχές σχεδιασμού στο web, τα μεγαλύτερα λάθη στον web σχεδιασμό Γαβαλάς Δαμιανός dgavalas@aegean.gr 1 Στόχοι μαθήματος Κατανόηση της

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

ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL

ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL 1. Εισαγωγή δεδομένων σε φύλλο εργασίας του Microsoft Excel Για να τοποθετήσουμε τις μετρήσεις μας σε ένα φύλλο Excel, κάνουμε κλικ στο κελί στο οποίο θέλουμε να τοποθετήσουμε

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

<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="/30748661-Se-ayto-to-mathima-tha-asholithoyme-me-ti-veltiosi-tis-emfanisis-enos-istotopoy-alla-kai-ton-eykolo-heirismo-olon-ton-allagon-tis-opoies-epithymoyme-na.html">Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να</a> </h3> <p> <img alt="Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να" title="Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να" class="news-block-img pull-right" src="/thumbs/52/30748661.jpg"> Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό </p> <a href="/30748661-Se-ayto-to-mathima-tha-asholithoyme-me-ti-veltiosi-tis-emfanisis-enos-istotopoy-alla-kai-ton-eykolo-heirismo-olon-ton-allagon-tis-opoies-epithymoyme-na.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10949159-2-epilexte-tin-sosti-etiketa-html-poy-prosferei-to-megalytero-fonto-keimenoy-head-heading-h6-h1.html">2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1></a> </h3> <p> <img alt="2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>" title="2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>" class="news-block-img pull-right" src="/thumbs/27/10949159.jpg"> ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά </p> <a href="/10949159-2-epilexte-tin-sosti-etiketa-html-poy-prosferei-to-megalytero-fonto-keimenoy-head-heading-h6-h1.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/40679230-Prosohi-oi-apantiseis-pollaplis-epilogis-uono-pano-sto-fyllo-apantiseon.html">ΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ</a> </h3> <p> <img alt="ΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ" title="ΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ" class="news-block-img pull-right" src="/thumbs/57/40679230.jpg"> ΤΕΙ Σερρών Σχολή Τεχνολογικών Εφαρμογών, Τμήμα Πληροφορικής και Επικοινωνιών Προγραμματιστικές Εφαρμογές στο Διαδίκτυο (Θ) Τελική Εξέταση Διδάσκων: Δ. Κοτζίνος Όνοµα: Α.Μ. : Εξάµηνο : Αίθουσα Έδωσα Project </p> <a href="/40679230-Prosohi-oi-apantiseis-pollaplis-epilogis-uono-pano-sto-fyllo-apantiseon.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"> 2017 © 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/836ca/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>