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

Σχετικά έγγραφα
Τ.Ε.Ι. Δυτικής Ελλάδας Τμήμα Διοίκησης Επιχειρήσεων Μεσολόγγι. 7 η Διάλεξη. Μάθημα: Τεχνολογίες Διαδικτύου

Τ.Ε.Ι. Δυτικής Ελλάδας Τμήμα Διοίκησης Επιχειρήσεων Μεσολόγγι. 7 η Διάλεξη. Μάθημα: Τεχνολογίες Διαδικτύου

Ανα πτυξη εφαρμογών για τον κινητο παγκο σμιο ιστο

Ανα πτυξη εφαρμογών για τον κινητο παγκο σμιο ιστο

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

1 η Διάλεξη. Ενδεικτικές λύσεις ασκήσεων

Εισαγωγή στους Αλγορίθμους

Μαθηματικά Διοικητικών & Οικονομικών Επιστημών

Εισαγωγή στους Αλγορίθμους

Εισαγωγή στους Αλγορίθμους

Κβαντική Επεξεργασία Πληροφορίας

Θερμοδυναμική. Ανοικτά Ακαδημαϊκά Μαθήματα. Πίνακες Νερού σε κατάσταση Κορεσμού. Γεώργιος Κ. Χατζηκωνσταντής Επίκουρος Καθηγητής

Ανοικτά Ακαδημαϊκά Μαθήματα στο ΤΕΙ Αθήνας. Βιοστατιστική (Ε) Ενότητα 3: Έλεγχοι στατιστικών υποθέσεων

Ανοικτά Ακαδημαϊκά Μαθήματα στο ΤΕΙ Αθήνας. Βιοστατιστική (Ε) Ενότητα 1: Καταχώρηση δεδομένων

Εισαγωγή στους Υπολογιστές

Ανοικτά Ακαδημαϊκά Μαθήματα στο ΤΕΙ Αθήνας. Βιοστατιστική (Ε) Ενότητα 2: Περιγραφική στατιστική

Λογιστική Κόστους Ενότητα 12: Λογισμός Κόστους (2)

Διοικητική Λογιστική

Μαθηματικά Διοικητικών & Οικονομικών Επιστημών

Θεωρία Λήψης Αποφάσεων

Κβαντική Επεξεργασία Πληροφορίας

Προσχολική Παιδαγωγική Ενότητα 2: Οργάνωση χρόνου και χώρου στα νηπιαγωγεία

Τίτλος Μαθήματος: Μαθηματική Ανάλυση Ενότητα Γ. Ολοκληρωτικός Λογισμός

Μαθηματικά Διοικητικών & Οικονομικών Επιστημών

Ενδεικτικές λύσεις ασκήσεων διαγραμμάτων περίπτωσης χρήσης (1ο Μέρος)

ΣΥΣΤΗΜΑΤΑ ΗΛΕΚΤΡΙΚΗΣ ΕΝΕΡΓΕΙΑΣ ΙIΙ

ΣΥΣΤΗΜΑΤΑ ΗΛΕΚΤΡΙΚΗΣ ΕΝΕΡΓΕΙΑΣ ΙIΙ

ΣΥΣΤΗΜΑΤΑ ΗΛΕΚΤΡΙΚΗΣ ΕΝΕΡΓΕΙΑΣ ΙIΙ

Μεθοδολογία Έρευνας Κοινωνικών Επιστημών Ενότητα 2: ΣΥΓΚΕΝΤΡΩΣΗ ΠΛΗΡΟΦΟΡΙΩΝ ΜΑΡΚΕΤΙΝΓΚ Λοίζου Ευστράτιος Τμήμα Τεχνολόγων Γεωπόνων-Kατεύθυνση

Εισαγωγή στους Υπολογιστές

Ευφυής Προγραμματισμός

Λογιστική Κόστους Ενότητα 8: Κοστολογική διάρθρωση Κύρια / Βοηθητικά Κέντρα Κόστους.

Μυελού των Οστών Ενότητα #1: Ερωτήσεις κατανόησης και αυτόαξιολόγησης

Εκπαιδευτική Διαδικασία και Μάθηση στο Νηπιαγωγείο Ενότητα 1: Εισαγωγή

Μαθηματικά Διοικητικών & Οικονομικών Επιστημών

Διοίκηση Ολικής Ποιότητας & Επιχειρηματική Αριστεία Ενότητα 1.3.2: Παραδοσιακή VS νέα προσέγγιση της ΔΟΠ

Ψηφιακή Επεξεργασία και Ανάλυση Εικόνας Ενότητα 10 η : Ανάλυση Εικόνας. Καθ. Κωνσταντίνος Μπερμπερίδης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής

Θερμοδυναμική. Ανοικτά Ακαδημαϊκά Μαθήματα. Πίνακες Νερού Υπέρθερμου Ατμού. Γεώργιος Κ. Χατζηκωνσταντής Επίκουρος Καθηγητής

Προγραμματισμός Η/Υ. Βασικές Προγραμματιστικές Δομές. ΤΕΙ Ιονίων Νήσων Τμήμα Τεχνολόγων Περιβάλλοντος Κατεύθυνση Τεχνολογιών Φυσικού Περιβάλλοντος

Βέλτιστος Έλεγχος Συστημάτων

Ενότητα. Εισαγωγή στις βάσεις δεδομένων

Εισαγωγή στην Διοίκηση Επιχειρήσεων

Εισαγωγή στην Διοίκηση Επιχειρήσεων

Διεθνείς Οικονομικές Σχέσεις και Ανάπτυξη

Εφαρμογές των Τεχνολογιών της Πληροφορίας και των Επικοινωνιών στη διδασκαλία και τη μάθηση

Διδακτική των εικαστικών τεχνών Ενότητα 1

Πληροφοριακά Συστήματα Διοίκησης Ενότητα 10: Διαχείριση Έργων (2ο Μέρος)

ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ

Διαχείριση Έργων. Ενότητα 10: Χρονοπρογραμματισμός έργων (υπό συνθήκες αβεβαιότητας)

Τεχνικό Σχέδιο - CAD

Πρακτική Άσκηση σε σχολεία της δευτεροβάθμιας εκπαίδευσης

Τηλεματική και Νέες Υπηρεσίες

Μαθηματικά Διοικητικών & Οικονομικών Επιστημών

Εισαγωγή στους Αλγορίθμους Ενότητα 10η Άσκηση Αλγόριθμος Dijkstra

Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 3: Server Side Scripting II PHP & MySQL

Μάρκετινγκ Αγροτικών Προϊόντων

ΤΠΕ στη Διδακτική των γλωσσών - Πολύγλωσσα ψηφιακά περιβάλλοντα γλωσσικής διδασκαλίας

Δυναμική και Έλεγχος E-L Ηλεκτρομηχανικών Συστημάτων

Εισαγωγή στην Διοίκηση Επιχειρήσεων

Εισαγωγή στους Η/Υ. Ενότητα 2β: Αντίστροφο Πρόβλημα. Δημήτρης Σαραβάνος, Καθηγητής Πολυτεχνική Σχολή Τμήμα Μηχανολόγων & Αεροναυπηγών Μηχανικών

Κβαντική Επεξεργασία Πληροφορίας

Μαθηματικά Διοικητικών & Οικονομικών Επιστημών

Διοίκηση Ολικής Ποιότητας & Επιχειρηματική Αριστεία Ενότητα 1.3.3: Μεθοδολογία εφαρμογής προγράμματος Ολικής Ποιότητας

Θεατρικές Εφαρμογές και Διδακτική της Φυσικής Ι

Εισαγωγή στους Αλγορίθμους Ενότητα 9η Άσκηση - Αλγόριθμος Kruskal

Οντοκεντρικός Προγραμματισμός

ΦΥΣΙΚΟΧΗΜΕΙΑ I Ασκήσεις

Μαθηματικά Διοικητικών & Οικονομικών Επιστημών

Εισαγωγή στους Αλγορίθμους Ενότητα 11η Άσκηση - Σταθμισμένος Χρονοπρογραμματισμός Διαστημάτων

Έλεγχος και Διασφάλιση Ποιότητας Ενότητα 4: Μελέτη ISO Κουππάρης Μιχαήλ Τμήμα Χημείας Εργαστήριο Αναλυτικής Χημείας

Εισαγωγή στους Αλγορίθμους Ενότητα 9η Άσκηση - Αλγόριθμος Prim

Λογιστική Κόστους Ενότητα 11: Λογισμός Κόστους (1)

Διδακτική των εικαστικών τεχνών Ενότητα 3

Βάσεις Περιβαλλοντικών Δεδομένων

Γενική Φυσική Ενότητα: Εισαγωγή στην Ειδική Θεωρία της Σχετικότητας

Πληροφοριακά Συστήματα Διοίκησης (ΜΒΑ) Ενότητα 3: Εφαρμογές Δικτυωτής Ανάλυσης (2 ο Μέρος)

Κβαντική Φυσική Ι. Ενότητα 12: Ασκήσεις. Ανδρέας Τερζής Σχολή Θετικών Επιστημών Τμήμα Φυσικής

Διδακτική των εικαστικών τεχνών Ενότητα 2

Διδακτική των εικαστικών τεχνών Ενότητα 2

Διδακτική των εικαστικών τεχνών Ενότητα 2

Διδακτική των εικαστικών τεχνών Ενότητα 2

Αερισμός. Ενότητα 1: Αερισμός και αιμάτωση. Κωνσταντίνος Σπυρόπουλος, Καθηγητής Σχολή Επιστημών Υγείας Τμήμα Ιατρικής

Διοίκηση Επιχειρήσεων

Διοικητική Λογιστική

Διαφήμιση και Δημόσιες Σχέσεις Ενότητα 9: Σχέσεις διαφημιστή-διαφημιζόμενου

Πληροφοριακά Συστήματα Διοίκησης (ΜΒΑ) Ενότητα 2: Εφαρμογές Δικτυωτής Ανάλυσης (1 ο Μέρος)

ΘΕΡΜΟΔΥΝΑΜΙΚΗ Ι. Ενότητα 2: Θερμοδυναμικές συναρτήσεις. Σογομών Μπογοσιάν Πολυτεχνική Σχολή Τμήμα Χημικών Μηχανικών

Δυναμική και Έλεγχος E-L Ηλεκτρομηχανικών Συστημάτων

Τεχνικές Εκτίμησης Υπολογιστικών Συστημάτων Ενότητα 1: Εισαγωγή. Γαροφαλάκης Ιωάννης Πολυτεχνική Σχολή Τμήμα Μηχ/κών Η/Υ & Πληροφορικής

Εισαγωγή στην Διοίκηση Επιχειρήσεων

Εισαγωγή στους Αλγορίθμους Φροντιστήριο 1

ΕΦΑΡΜΟΣΜΕΝΗ ΗΘΙΚΗ. Ενότητα 9: Σχέση Ηθικής και Δικαιοσύνης. Παρούσης Μιχαήλ. Τμήμα Φιλοσοφίας

Μαθηματικά Διοικητικών & Οικονομικών Επιστημών

Μηχανολογικό Σχέδιο Ι

Ενότητα 1: Εισαγωγή στην έννοια της Φιλοσοφίας του Δικαίου

Διδακτική των εικαστικών τεχνών Ενότητα 2

Ανάπτυξη ηλεκτρονικών μαθημάτων στην πλατφόρμα Open eclass. Γνωριμία με την Open eclass

6 η Διάλεξη. Ενδεικτικές λύσεις ασκήσεων

ΕΡΓΑΣΤΗΡΙΟ ΦΥΣΙΚΗΣ Ι ΘΕΩΡΙΑ ΣΦΑΛΜΑΤΩΝ. Κανονισμός Μαθήματος και Εργαστηρίου Καθηγήτρια Γεωργά Σταυρούλα Τμήμα Φυσικής

Κβαντική Φυσική Ι. Ενότητα 19: Εισαγωγή στα τετραγωνικά δυναμικά. Ανδρέας Τερζής Σχολή Θετικών Επιστημών Τμήμα Φυσικής

Transcript:

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

Σκοποί ενότητας Σκοπός της παρούσας ενότητας είναι να εξοικειωθούν οι φοιτητές με τις βασικές αρχές ανάπτυξης εφαρμογών για κινητές συσκευές 2

Περιεχόμενα ενότητας Εισαγωγή Native Vs Web Apps Layout Engines HTML 5 CSS3 - JavaScript SVG Media Queries 3

Εισαγωγή Σκοπός του WWW: Διάχυση της πληροφορίας Τρο πος δια χυσης: Ιστοσελι δες (κει μενα) Πολυμε σα Τρο πος ευ ρεσης Αναζη τηση Συστα σεις Περιη γηση 4

Εισαγωγή Υποθέσεις εργασίας (παραδοσιακή χρήση): Ο χρήστης είναι σταθερός Ο χρήστης έχει πρόσβαση από μία οθόνη (σχετικά) υψηλής ανάλυσης Ο χρήστης είναι διατεθιμένος να ξοδέψει αρκετό χρόνο στην διαδικασία αναζήτησης Μέχρι να βρει αυτό που θέλει Μέχρι να αποφασίσει ότι αυτό δεν είναι δυνατόν να βρεθεί Ο χρήστης είναι συγκεντρωμένος στη δραστηριότητα αναζήτησης και δεν αποσπάται Ο χρήστης έχει μια (σχετικά) αξιόπιστη και ταχεία σύνδεση 5

Τρόποι πρόσβασης στον Παγκόσμιο Ιστό Παραδοσιακα Desktop Laptop Αναδυο μενα Κινητο τηλε φωνο (smartphone) Tablet Photo-frame Ψυγει o... 6

Τι ωθεί τη χρήση από τα κινητά; Δια δοση των Smartphones (iphone) Κοινωνικα δι κτυα Video Location-based services Flat-rate data tariffs 7

Εμπρός προς το mobile Web Δεν είναι τόσο απλό...! Υπάρχουν πολλά προβλη ματα Χρη στες Συσκευε ς Συνδεσιμο τητα 8

Χρήστες Ο χρήστης είναι κινούμενος Συνήθως απασχολημένος σε μια άλλη δραστηριότητα Η προσοχή του είναι διασπασμένη σε πολλά ερεθίσματα Δεν έχει το χρόνο να ψάξει ή να περιηγηθεί ασκόπως Χρειάζεται κάποιο μικρό κομμάτι πληροφορίας για να υποστηρίξει την τρέχουσα δραστηριότητα Ο χρήστης είναι σταθερός Χαζεύει περιμένοντας (στο σταθμό, στο αεροδρόμιο κτλ) Πάμε στα άλλα προβλήματα 9

Συσκευές Η οθόνη είναι πολύ μικρή και σχετικά χαμηλής ανάλυσης Πυκνότητα κειμένου Ποσότητα πληροφορίας Ταξινόμηση πληροφορίας Το πληκτρολόγιο δεν βολεύει Δυ σκολη εισαγωγη URL / αναζητη σεων Δυ σκολη πλοη γηση Οι υπολογιστικοί πόροι είναι περιορισμένοι Δεν μπορεί να έχει ανοικτά πολλαπλά παράθυρα Ταχύτητα rendering, ικανότητα scripting 10

Συνδεσιμότητα 3G Ευρεία κάλυψη Ο χι ιδιαίτερα υψηλή ταχύτητα Ακριβό (flat-rate tariffs?) Wi-Fi Τοπική κάλυψη Υψηλή ταχύτητα Δωρεάν (όχι πάντα!) Η συνδεσιμότητα είναι διακεκομμένη ιδιαίτερα όταν ο χρήστης κινείται (λεωφορείο,τραίνο) 11

Άρα τι κάνουμε; Προσεγγίσεις για ανάπτυξη στον κινητό ιστό Τι ποτα :D Μετατροπει ς Mobile Style Sheets Mobile Optimisation Apps (χρήση του ιστού σαν υπηρεσία) 12

Native Vs Web Apps Web Apps - θετικά Εφαρμογές γραμμένες για τον παγκόσμιο ιστό με γνωστές γλώσσες προγραμματισμού HTML/CSS, Javascript, PHP/.NET/JSP Cross-platform (με μερικούς περιορισμούς) Web Apps - αρνητικά Περιορισμένη πρόσβαση στο υλικό (ανάλογα με την πλατφόρμα) Προσβάσιμες και εκτελέσιμες μόνο όταν ο χρήστης είναι συνδεδεμένος 13

Native Apps: Γιατί είναι τόσο δημοφιλείς; $$$ (οκ, η πιθανότητα για $$$) Οι χρήστες μπορούν να δούν εύκολα και γρήγορα κριτικές, σχόλια κτλ Η αλληλεπίδραση με το hardware ανοίγει νέες ευκαιρίες (ευκολότερη αλληλεπίδραση, νέες υπηρεσίες, επαύξηση επερωτήσεων κτλ) Οι χρήστες «εκπαιδεύονται» από τις εταιρίες να ψάξουν πρώτα στο marketplace Πολλοί χρήστες δεν καταλαβαίνουν την διαφορά μεταξύ native και web app Επίσης, $$$ 14

Πότε συμφέρει η ανάπτυξη Web Apps; Cross-platform ευκαιρίες με μικρότερο κόστος Εύκολη πρόσβαση σε υπάρχουσες υπηρεσίες web χωρίς εκτενή ανάπτυξη με ετερογενείς τεχνολογι ες Ο ταν δεν είναι κρίσιμη η πρόσβαση στο hardware και η χρήση χωρίς σύνδεση Αν υπάρχει ήδη μια μεγάλη βάση χρηστών έτοιμη να χρησιμοποιήσει την εφαρμογή 15

Layout Engines Οι κύριες «μηχανές» πίσω από τους browsers σε κινητα ει ναι Webkit (Firefox, Chrome/Android, Palm, Symbian, Blackberry 6.0+) Trident (Internet Explorer/IE Mobile) Presto (Opera, Opera Mini) [http://en.wikipedia.org/wiki/mobile_browser] 16

HTML + css3 + JavaScript Ζωντανές, δυναμικές ιστοσελίδες με υψηλά επίπεδα αλληλεπίδρασης Ολοκλήρωση web services χωρίς τη χρήση τοπικών πηγών πληροφορίας Η HTML5 υποστηρίζει video, audio input Η CSS3 επιτρέπει το animation και κάποιο 3D rendering Τέρμα το Flash (!!!!!!) Δυστυχώς η υποστήριξη, ακόμα και από desktop browsers, ποικίλλει http://caniuse.com 17

HTML5 Canvas tag ζωγραφική Media playback με ενσωματωμένα controls(δεν χρειάζεται πλέον plug-in) Offline storage database Geolocation Web SQL database File API Directories & System File Writer 18

HTML5 + css3 = responsive design Σχεδιασμός που προσαρμόζεται στις συσκευές που χρησιμοποιούνται Απαιτεί προετοιμασία και γνώση των δυνατοτήτων των συσκευών 19

1. Κρατάμε το Layout απλό Εξαλει φουμε Α σκοπα πολυ πλοκα divs Inline styles (όλα αλλιώς δε θα δουλέψει τίποτα) JS ή flash που είναι απαραίτητο και δεν έχει εναλλακτικη Α σκοπες absolute η floating τοποθετη σεις Οτιδήποτε μη απαραίτητο ή 100% χρήσιμο 20

2. Χρήση Media Queries IF <this size> THEN <this style> Επικεντρώνουμε στο πλάτος (width) <style> @import url(tiny.css) (min-width:300px); @import url(small.css) (min-width:600px); </style> @media screen and (min-width:240px) and (max-width:300px) { /* tiny styles */ } @media screen and (max-width:600px) and (orientation:landscape) { /* landscape styles */ } 21

3. Αποφασίζουμε για τα breakpoints Κινητά 1ης γενιάς με κανόνες για <480px Σύγχρονα high-end κινητά και tablets σε πορτρέτο με <768px Ο λα τα μεγαλύτερα με >768px Ο χι απαραίτητα αλλά καλό να έχουμε <320px για χαμηλή ανάλυση Tablets & ipads σε landscape >768px and <1024px Πλατύ design για desktops με >1024px (full desktop version) 22

4. Κάνουμε ευπροσάρμοστο layout Αποφεύγουμε απόλυτα μεγέθη Σε συνδυασμό με τα media queries μπορούμε να προσαρμοστούμε σε κάθε συσκευή 23

5. Εικόνες Προσαρμόζουμε και εδώ το μέγεθος: 100% πλάτος img {width:100%} 100% πλάτος με μέγιστο ότι είναι το αρχείο img {max-width:100%} 24

6. Μέγιστο και Ελάχιστο ΟΚ, τώρα είναι 100% πλατιά όλα αλλά δείχνει απαίσιο στο monitor μου που έχει πλάτος 2560px! Θέτουμε περιορισμούς Ευπροσάρμοστο αλλά όχι κάτω από 768 και όχι πάνω από 1024 min-width:768px; max-width:1024px; Τουλάχιστον 350px σε ύψος min-height:350px; Ο χι λιγότερο από 1000px πλάτος όταν το βλέπουμε σε κάποιο desktop @media screen and (min-width:1024px) { #main { min-width:1000px; } } 25

7. Σχετικότητα Φτιάχνουμε ένα master container με προσαρμοζόμενο ή σταθερό μέγεθος τα πάντα είναι τέκνα του Ο λα (διαστάσεις, margins, paddings, κτλ) υπολογίζονται σε % Χρησιμοποιούμε ephemeral units (em) αντί για px στις γραμματοσειρές δίνουμε ένα απόλυτο font size μόνο στο master container 26

8. Γραμμικότητα Ο λα τα layouts για χαμηλές αναλύσεις πρέπει να είναι σε ΜΙΑ στήλη! Override το πλάτος! Width -> 100% 27

9. Κρατάμε μόνο τα απαραίτητα Ο τι δεν πρόκειται ποτέ να χρησιμεύσει σε κινητές συνθήκες χρήσης, πρέπει να αφεραιθεί. Μπορείτε να φτιάξετε μια κλάση.not_mobile @media screen and (maxwidth: 300px) {.not_mobile {display:none;} } Τι είναι απαραίτητο; Μια σελίδα = μια λειτουργία 28

10. Η χρήση του meta viewport Πολλοί κινητοί browsers εξομοιώνουν μεγαλύτερες οθόνες, στριμώχνονταςτεράστιες αναλύσες σεμικρές οθόνες. Λύση: <head> <meta name= viewport content= width=device-width > </head> 29

Τέλος Ενότητας

Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στo πλαίσιo του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Πατρών» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 31

Σημείωμα Ιστορικού Εκδόσεων Έργου Το παρόν έργο αποτελεί την έκδοση 1.0. 32

Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Πατρών, Ιωάννης Γαροφαλάκης, 2015. «Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό». Έκδοση: 1.0. Πάτρα 2015. Διαθέσιμο από τη δικτυακή διεύθυνση: https://eclass.upatras.gr/courses/ceid1093/. 33

Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 34