ΑΝΑΠΣΤΞΖ ΓΗΑΓΗΚΣΤΑΚΖ ΔΦΑΡΜΟΓΖ ΔΝΖΜΔΡΧΖ ΓΗΑ ΔΞΤΠΝΔ ΣΖΛΔΟΡΑΔΗ

Transcript

1 ΣΔΗ ΑΝΑΣΟΛΗΚΖ ΜΑΚΔΓΟΝΗΑ ΚΑΗ ΘΡΑΚΖ ΥΟΛΖ ΣΔΥΝΟΛΟΓΗΚΧΝ ΔΦΑΡΜΟΓΧΝ ΣΜΖΜΑ ΜΖΥΑΝΗΚΧΝ ΠΛΖΡΟΦΟΡΗΚΖ ΑΝΑΠΣΤΞΖ ΓΗΑΓΗΚΣΤΑΚΖ ΔΦΑΡΜΟΓΖ ΔΝΖΜΔΡΧΖ ΓΗΑ ΔΞΤΠΝΔ ΣΖΛΔΟΡΑΔΗ ΥΑΣΕΗΟΓΛΟΤ ΓΖΜΖΣΡΗΟ Δπίβιεςε Γξ. ΚΑΡΑΜΠΑΣΕΑΚΖ ΓΖΜΖΣΡΗΟ Καβάια 2013

2 Ζ παξνύζα εξγαζία αθηεξώλεηαη κε αγάπε ζηε κεηέξα κνπ Αλαζηαζία. Φαηδηόγινπ Γεκήηξηνο Σειίδα 2

3 ΔΤΥΑΡΗΣΗΔ Πξηλ ηελ παξνπζίαζε ησλ απνηειεζκάησλ ηεο παξνύζαο πηπρηαθήο εξγαζίαο, αηζζάλνκαη ηελ ππνρξέσζε λα επραξηζηήζσ νξηζκέλνπο από ηνπο αλζξώπνπο πνπ γλώξηζα, ζπλεξγάζηεθα καδί ηνπο θαη παίμαλε πνιύ ζεκαληηθό ξόιν ζηελ πξαγκαηνπνίεζή ηεο. Αξρηθά, ζα ήζεια λα επραξηζηήζσ ηνλ επηβιέπνληα θαζεγεηή θ. Γ. Καξακπαηδάθε γηα ηελ θαζνδήγεζε θαη ππνζηήξημε ηνπ θαηά ηε δηάξθεηα ηεο εξγαζίαο θαζώο θαη γηα ηε δπλαηόηεηα πνπ κνπ έδσζε λα απνθηήζσ εκπεηξία πάλσ ζηελ αλάπηπμε εθαξκνγώλ γηα έμππλεο ηειενξάζεηο. Δπίζεο, επραξηζηώ ηα κέιε ηεο εμεηαζηηθήο επηηξνπήο ηεο παξνύζαο πηπρηαθήο εξγαζίαο γηα ηελ αλάγλσζε ηνπ θεηκέλνπ. Τέινο, ζα ήζεια λα επραξηζηήζσ ηελ νηθνγέλεηα κνπ γηα ηελ ππνζηήξημε πνπ κνπ επέδεημε θαζώο θαη ηνπο θίινπο κνπ γηα ηελ ζπκπαξάζηαζε θαη ηελ ππνκνλή ηνπο. Φαηδηόγινπ Γεκήηξηνο Σειίδα 3

4 ΠΔΡΗΛΖΦΖ Ο ζρεδηαζκόο θαη ε πινπνίεζε εθαξκνγώλ γηα έμππλεο ηειενξάζεηο είλαη έλαο λένο ηερλνινγηθόο ρώξνο πνπ ζα αλαπηπρζεί ηα επόκελα ρξόληα. Η παξνύζα πηπρηαθή πξαγκαηεύεηαη ηελ πινπνίεζε κηαο δηαδηθηπαθήο εθαξκνγήο ελεκέξσζεο κε πνηθίιε ζεκαηνινγία. Η πξνηεηλόκελε εθαξκνγή είλαη αλνηθηνύ θώδηθα θαη βαζίδεηαη ζε δηαδηθηπαθέο ηερλνινγίεο όπσο HTML, CSS, JavaScript θαη jquery. Ιδηαίηεξε έκθαζε δόζεθε ζηελ δηεπαθή-ui γηα έμππλεο ηειενξάζεηο. Τν ινγηζκηθό πξνζθέξεη δπλαηόηεηεο πξνζνκνίσζεο ησλ εθαξκνγώλ κε ηνλ δηαζέζηκν Samsung TV Emulator. Η εθαξκνγή ιεηηνύξγεζε θαλνληθά θαη ζε εκπνξηθή έμππλε ηειεόξαζε ηεο Samsung. Γηα ηε δεκηνπξγία ηεο παξνύζαο πηπρηαθήο εξγαζίαο ρξεζηκνπνηήζεθαλ ην Samsung SDK 4.X, Eclipse, HTML, CSS, JavaScript θαη jquery. Φαηδηόγινπ Γεκήηξηνο Σειίδα 4

5 ABSTRACT Design and implementation of applications for smart TVs is a new technological area that will be developed in the coming years. This work deals with the implementation of a web application for mass media content. The implemented application is open source and based on web technologies like HTML, CSS, JavaScript and jquery. During implementation particular emphasis was given to the UI for smart TVs. The Samsung TV Emulator software offers simulation capabilities of the applications. Finally, the app tested on a commercial Smart Samsung TV. To implement this app used the Samsung SDK 4.X, Eclipse, HTML, CSS, JavaScript and jquery. Φαηδηόγινπ Γεκήηξηνο Σειίδα 5

6 0 ΠΔΡΗΔΥΌΜΔΝΑ Πεξηερόκελα... 6 Κεθάιαην 1 ν : Έμππλε Τειεόξαζε - Smart TV Ιζηνξηθή αλαδξνκή Έμππλε Τειεόξαζε - Smart TV... 8 Κεθάιαην 2 ν : Δηζαγσγή ζην πξνγξακκαηηζηηθό πεξηβάιινλ Αξρηηεθηνληθή HTML & HTML CSS & CSS JavaScript jquery Samsung SDK (Emulator) Κεθαιαίν 3 ν : Samsung Smart TV apps Δγθαηάζηαζε εθαξκνγώλ Samsung account Σύλδεζε ππνινγηζηή - TV Αξρέο γηα ην ζρεδηαζκό Apps Γηάηαμε νζόλεο Κεθαιαίν 4 ν : Δθαξκνγή X-SMART Γεληθά Αξρηθή νζόλε Δηδήζεηο RSS Web radio Web TV Καηξόο θαη ώξα Help bar Βηβιηνγξαθία Βηβιία Ιζηνζειίδεο Φαηδηόγινπ Γεκήηξηνο Σειίδα 6

7 1 ΚΔΦΑΛΑΗΟ 1 Ο : ΈΞΤΠΝΖ ΣΖΛΔΟΡΑΖ - SMART TV Φαηδηόγινπ Γεκήηξηνο Σειίδα 7

8 1.1 ΗΣΟΡΗΚΖ ΑΝΑΓΡΟΜΖ Κάπνπ ζηα κέζα ηνπ 1927 μεθηλάεη ε ηζηνξία ηεο ηειενπηηθήο κεηάδνζεο ηνπ πξώηνπ δειηίνπ εηδήζεσλ ζηηο ΗΠΑ. Η θαηαζθεπή ηεο ηειεόξαζεο είρε μεθηλήζεη πνιιά ρξόληα πξηλ θαη ηειεηνπνηήζεθε ην Αξρηθά ην ηειενπηηθό ζήκα ήηαλ αζπξόκαπξν θαη κεηαδηδόηαλ ζηηο ηειενξάζεηο 30 γξακκώλ. Έπεηηα αθνινύζεζε ε δεκηνπξγία ηεο έγρξσκεο ηειεόξαζεο ην 1956 θαη ε θπθινθνξία ηεο ην Λόγσ ηεο δεκηνπξγίαο ηνπ έγρξσκνπ ζήκαηνο ήηαλ αλαγθαία ε θάιπςε θαη ησλ δύν ζεκάησλ απ όιεο ηηο ηειενπηηθέο ζπζθεπέο. Γη απηόλ ηνλ ιόγν ηέζεθε ε αλάγθε δεκηνπξγίαο πξνηύπσλ πνπ ζα επέηξεπαλ ζηελ έγρξσκε ηειεόξαζε λα ιακβάλεη αζπξόκαπξν ζήκα θαη ζηελ αζπξόκαπξε ηειεόξαζε λα ιακβάλεη έγρξσκν ζήκα, λα ην κεηαηξέπεη ζε αζπξόκαπξν θαη λα ην αλαπαξάγεη. Τα παξαθάησ πξόηππα έδσζαλ ιύζε ζην ζπγθεθξηκέλν πξόβιεκα: 1. PAL (Phase Alternating Line) Γεξκαληθήο πξνέιεπζεο SECAM (Séquentiel Couleur à mémoire) Γαιιηθήο πξνέιεπζεο NTSC (National Television System Committee) Ακεξηθαληθήο πξνέιεπζεο 1953 Η κεηάδνζε γίλεηαη αζύξκαηα (κέζν θεξαίαο) ή ελζύξκαηα (θαισδηαθή ηειεόξαζε). Σηελ αζύξκαηε κεηάδνζε ν πνκπόο ζηέιλεη ην ζήκα ηνπ πξνο κηα ή πνιιέο θαηεπζύλζεηο (αλάινγα κε ηνλ ηύπν ηεο θεξαίαο) θαη νη δέθηεο πνπ έρνπλ ζηξακκέλε ηελ θεξαία ηνπο πξνο ην ζεκείν εθπνκπήο ην ιακβάλνπλ θαη ην κεηαδίδνπλ. Παξόκνηα ηερληθή ρξεζηκνπνηείηαη θαη ζηελ δνξπθνξηθή ηειεόξαζε, κε ηε δηαθνξά όηη αιιάδεη ν εμνπιηζκόο θαη ε θσδηθνπνίεζε ηνπ ζήκαηνο. Η κεηάδνζε από ηνλ πνκπό ζηνλ δέθηε κπνξεί λα πξαγκαηνπνηεζεί ζε δύν δώλεο ζπρλνηήησλ: 1. UHF (Ultra High Frequency ) από 300MHz έσο 3000MHz 2. VHF (Very High Frequency ) από 30MHz έσο 300MHz Οη παξαπάλσ δώλεο ζπρλνηήησλ δε δεζκεύνληαη απνθιεηζηηθά γηα ηηο ηειενπηηθέο κεηαδόζεηο θαζώο ρξεζηκνπνηνύληαη θαη ζε ξαδηνθσληθέο κεηαδόζεηο, ξαδηνδίθηπα θαη άιια. Σηελ ελζύξκαηε κεηάδνζε ε ιήςε ηνπ ζήκαηνο γίλεηαη κέζν δηθηύνπ (IP TV). Τε ζέζε ηνπ πνκπνύ παίξλεη έλαο εμππεξεηεηήο (video server) θαη ζηελ πιεπξά ηνπ δέθηε εγθαζίζηαληαη δηάθνξα πξσηόθνιια απνθσδηθνπνίεζεο (MPEG-1, MPEG-4 θ.α.). Απαξαίηεηνο παξάγνληαο ζηελ ζπγθεθξηκέλε κεηάδνζε ζεσξείηαη ε ύπαξμε δηθηύνπ. 1.2 ΈΞΤΠΝΖ ΣΖΛΔΟΡΑΖ - SMART TV Τν 2010 ε ηειεόξαζε δέρεηαη κηα αθόκε αλαβάζκηζε. Σπλδέεηαη ζην δηαδίθηπν, απνθηά δηθό ηεο πεξηεγεηή (browser) θαη αληαγσλίδεηαη επάμηα ησλ ππνινγηζηή ζηνλ ηνκέα ηεο πινήγεζεο ζην δηαδίθηπν. Από ηε ζηηγκή πνπ ε ηειεόξαζε ζπλδέζεθε ζην δηαδίθηπν ήηαλ επόκελν λα αθνινπζήζεη κηα πνξεία παξόκνηα κε απηή ηνλ θηλεηώλ ηειεθώλσλ (SmartPhones). Φαηδηόγινπ Γεκήηξηνο Σειίδα 8

9 Η ηερλνινγία ηεο Γηαδηθηπαθήο ηειεόξαζεο είλαη κηα ηζηνξία πνπ θξαηά πεξίπνπ δέθα ρξόληα αιιά θαίλεηαη πσο ήξζε ε επνρή γηα ηελ σξίκαλζε ηεο ηερλνινγίαο θαη ηελ αύμεζε ηεο δηεηζδπηηθόηεηαο ζην επξύ θνηλό. Η καθξά ηζηνξία ηεο ηερλνινγίαο δεκηνύξγεζε θαη πνιιέο πιαηθόξκεο θαη ηερλνινγηθέο ιύζεηο. Τε δηαδηθηπαθή ηειεόξαζε (WEBTV) βαζηζκέλε ζε ζπζηήκαηα πιεξνθνξηθήο θαη κε ρξήζε πξνζσπηθνύ ππνινγηζηή, ηελ IPTV πνπ θάλεη ρξήζε ησλ ζηαζεξώλ γξακκώλ ηληεξλέη αιιά κε ρξήζε set-top-box θαη ηελ εκπινθή ησλ θαηαζθεπαζηώλ ηειεόξαζεο θαη ηεο ηερλνινγία ησλ ππνινγηζηώλ θαη δηθηύσλ ζηε λέα κνξθή ηεο Connected TV. Η πνιππινθόηεηα ηνπ εγρεηξήκαηνο είλαη κεγάιε γηαηί γηα πξώηε θνξά ε βηνκεραλία ησλ θαηαζθεπαζηώλ ηειεόξαζεο βξίζθεηαη ηόζν θνληά ζηηο εηαηξείεο πιεξνθνξηθήο θαη δηαρείξηζεο δηαδηθηπαθνύ πεξηερνκέλνπ. Πξόθεηηαη ζηελ νπζία γηα κηα λέα ηερλνινγηθή θαη εκπνξηθή κάρε, θαη ε αλαθνξά ζε ζρεηηθή έξεπλα δείρλεη: Connected TV Platform Wars Will Heat Up «In 2010, internet TV finally made it to the big screen where it belongs, and 25% of all TVs sold worldwide in 2011 will feature internet capabilities will also see the battle guns aligned for future dominance of connected TV technology platforms. Facebook is already the leading repository for user generated content in the cloud, and we expect Facebook to join Apple, Google and Microsoft in the race to develop TV gateways to online television shows and movies. We also expect increased adoption of internet TV systems delivered by pay TV service providers seeking to counter the much-discussed threat of cord-cutting will also see growth in the new TV Apps market, although developers will struggle to identify successful business models and genres beyond the inevitable weather, games and gambling services. (πεγή: Σεκαληηθό, είλαη λα αλαθεξζνύλ ηα δεδνκέλα γηα ηηο πσιήζεηο δηαδηθηπαθώλ ηειενξάζεσλ ην 2010 αιιά θαη νη πξνβιέςεηο γηα ηελ αύμεζε ησλ πσιήζεσλ κέρξη ην 2014, πνπ δείρλνπλ κηα αλνδηθή ηάζε θαη ζηε δηθή καο γεσγξαθηθή πεξηνρή (παξαθάησ δηάγξακκα). Φαηδηόγινπ Γεκήηξηνο Σειίδα 9

10 Connected TV Πξνγλωζηηθά Πωιήζεωλ Δηθόλα : Πεγή - DisplaySearch Quarterly TV Design and Features Report Τν λέν απηό πεδίν δξάζεο αλνίγεη ην ρώξν γηα ηελ αλάπηπμε λέσλ εθαξκνγώλ γηα ηηο ζπζθεπέο δηαδηθηπαθήο ηειεόξαζεο. Λόγνο γίλεηαη γηα ηα ιεγόκελα TV Apps θαη TV widgets. Σηελ πξαγκαηηθόηεηα όιεο νη δηαδηθηπαθέο ηειενξάζεηο δηαζέηνπλ Ethernet ζύξα ή ην ζπλδεδεκέλν set-top-box θαη καο δίλεηαη ε δπλαηόηεηα λα εγθαηαζηήζνπκε κηθξέο δηαδηθηπαθέο εθαξκνγέο ή λα ρξεζηκνπνηήζνπκε ηηο εθαξκνγέο πνπ παξέρνπλ on-demand video θαη ηαηλίεο επί πιεξσκή (PayTV). Οη ηερλνινγίεο πνπ ρξεζηκνπνηνύληαη αθνινπζνύλ ηα πξόηππα ηνπ W3C γηα ηελ παξνπζίαζε ηνπ πεξηερνκέλνπ αιιά αλάινγα κε ηνλ θαηαζθεπαζηή εκθαλίδνληαη θάπνηεο δηαθνξέο (ινγηζκηθό, OS, πιηθό, STB, κλήκε) πνπ πξνζδίδνπλ ραξαθηεξηζηηθά θαη είλαη πηζαλό λα θαζνξίζνπλ ηελ εμέιημε θάζε πιαηθόξκαο θαη ησλ αληίζηνηρώλ εθαξκνγώλ. Δηθόλα : Philips Set Top Box Φαηδηόγινπ Γεκήηξηνο Σειίδα 10

11 Δηθόλα : Samsung Apps Οη ζύγρξνλεο ηειενξάζεηο ππνζηεξίδνπλ εθαξκνγέο βαζηζκέλεο ζηελ ηερλνινγία ηζηνύ (web). Η γιώζζα πνπ ρξεζηκνπνηείηαη γηα ηελ αλάπηπμε κηαο ηέηνηαο εθαξκνγήο είλαη ε HTML θαη νη γιώζζεο πνπ ππνζηεξίδνληαη από απηήλ (CSS, JavaScript, jquery). Γελ ππάξρεη θακία δηαθνξά ζην ζπληαθηηθό ηεο αιιά ππάξρνπλ δηαθνξέο ζηηο κεζόδνπο πνπ ρξεζηκνπνηνύληαη. Απηέο νη δηαθνξέο δεκηνπξγνύληαη ιόγσ ηεο έιιεηςεο πιεθηξνινγίνπ-πνληηθηνύ θαη ε αληηθαηάζηαζε απηνύ κε ην ηειερεηξηζηήξην ηεο ηειεόξαζεο. Φαηδηόγινπ Γεκήηξηνο Σειίδα 11

12 2 ΚΔΦΑΛΑΗΟ 2 Ο : ΔΗΑΓΧΓΖ ΣΟ ΠΡΟΓΡΑΜΜΑΣΗΣΗΚΟ ΠΔΡΗΒΑΛΛΟΝ Φαηδηόγινπ Γεκήηξηνο Σειίδα 12

13 2.1 ΑΡΥΗΣΔΚΣΟΝΗΚΖ Σην εκπόξην έρνπλ εηζαρζεί πνιιά λέα κνληέια δηαδηθηπαθώλ ηειενξάζεσλ θαη νη ηερλνινγίεο πνπ έρνπλ αλαπηπρζεί παξνπζηάδνληαη ζπλνπηηθά ζηε ζπλέρεηα. Η βαζηθή αξρηηεθηνληθή όισλ ησλ ζπζηεκάησλ είλαη απηή πνπ θαίλεηαη ζηελ εηθόλα. Σην ζρέδην απηό παξνπζηάδεηαη ε βαζηθή αξρηηεθηνληθή θαη γηα ηνλ ρξήζηε αιιά θαη ηνλ πξνγξακκαηηζηή. Δηθόλα : Βαζηθή αξρηηεθηνληθή Ο ρξήζηεο δηαζέηεη κηα ζπζθεπή, κε ην ηειερεηξηζηήξην εθθηλεί ηε δηαδηθηπαθή ηειεόξαζε (κε πξν-εγθαηεζηεκέλε ηε αλάινγε κεραλή), αλαδεηά εθαξκνγέο από ηηο δηαζέζηκεο γθαιεξί (widgets servers), ηελ εγθαζηζηά θαη μεθηλά ηε ρξήζε ηεο. Από ηε πιεπξά ηνπ κεραληθνύ πνπ αλαπηύζζεη εθαξκνγέο, έρεη ζηε δηάζεζε ηνπ θάπνηα πιαηθόξκα αλάπηπμεο (Yahoo, Samsung, GoogleTV), ζπλήζσο έρεη πξνζνκνησηή γηα γξήγνξν έιεγρν ηεο εμέιημεο αλάπηπμεο, δίλεηαη ε δπλαηόηεηα γηα αλάπηπμε ηνπηθνύ εμππεξεηεηή θηινμελίαο widgets (Apache), θαη είλαη δπλαηό λα ρξεζηκνπνηεζεί θαη θαλνληθή ζπζθεπή πνπ βξίζθεηαη ζε θαηάζηαζε develop mode θαη κπνξεί λα ρξεζηκνπνηεζεί ν ηνπηθόο εμππεξεηεηήο γηα λα πξνζνκνησζνύλ όιεο νη δηαδηθαζίεο πνπ θάλεη έλαο απιόο ρξήζηεο. Ο θάζε θαηαζθεπαζηήο δηαζέηεη αλάινγν πξόγξακκα πηζηνπνίεζεο ησλ εθαξκνγώλ πξηλ δηαηεζνύλ γηα επξύηεξε ρξήζε. 2.2 HTML & HTML5 Η HTML (Hyper Text Markup Language) είλαη ε γιώζζα κε ηελ νπνία αλαπηύζζνληαη ηζηνζειίδεο θαη πξνβάιινληαη κέζσ ελόο πεξηεγεηή (browser). Δίλαη απαξαίηεηε γηα λα πινπνηεζνύλ εθαξκνγέο JavaScript, jquery θαη άιισλ πξνγξακκαηηζηηθώλ εξγαιείσλ. Έλα ηέηνην αξρείν έρεη ηελ θαηάιεμε «.html» θαη δνκείηαη όπσο θαίλεηαη ζηελ εηθόλα Φαηδηόγινπ Γεκήηξηνο Σειίδα 13

14 Δηθόλα : Βαζηθόο «θνξκόο» ηνπ θώδηθα HTML Αλάκεζα ζηηο εηηθέηεο head ν πξνγξακκαηηζηήο θαιεί ηα αξρεία πνπ αθνξνύλ ηελ ηζηνζειίδα πνπ αλαπηύζζεη (ζα αλαιπζνύλ ζε παξαθάησ θεθάιαηα), κπνξεί αθόκα λα γξάςεη θαη θώδηθα CSS (θεθάιαην 2.3) ή JavaScript (θεθάιαην 2.4). Δπίζεο ζε απηό ην ζεκείν ζα πξέπεη λα δεισζεί ε γιώζζα ζηελ νπνία απεπζύλεηαη ν ηζηνρώξνο. Σην πεδίν body γξάθεηαη ην θύξην θνκκάηη ηεο HTML, γίλνληαη νη κνξθνπνηήζεηο θαη θαινύληαη νη ζπλαξηήζεηο πνπ πξνέξρνληαη από άιια αξρεία. Δίλαη ην βαζηθό θνκκάηη κηαο ηζηνζειίδαο γηαηί είλαη απηό πνπ πξνβάιιεηαη ζηνπο ρξήζηεο. Όια ηα παξαπάλσ γξάθνληαη αλάκεζα ηηο εηηθέηεο HTML. Οηηδήπνηε είλαη εθηόο απηώλ, αλαγλσξίδεηαη από ηνλ browser ζαο απιό θείκελν. Γηα λα εκπινπηηζηεί έλα αξρείν HTML ρξεζηκνπνηνύληαη ηα ιεγόκελα HTML tags. Τα HTML tags είλαη εληνιέο δεζκεπκέλεο από ην ζύζηεκα νη νπνίεο ρξεζηκνπνηνύληαη γηα ηε δεκηνπξγία επηθεθαιίδσλ, παξαγξάθσλ, πηλάθσλ θ.α. Όιεο νη εηηθέηεο γξάθνληαη αλάκεζα ζηα ζύκβνια «κεγαιύηεξν από» θαη «κηθξόηεξν από», ην ζύκβνιν ηεο «θαζέηνπ» ζεκαηνδνηεί ηε ιήμε κηαο εηηθέηαο. Οη εηηθέηεο γξάθνληαη αλά δεύγε, κέζα ζηα νπνία ππάξρεη ην θείκελν πνπ δέρεηαη ηηο ηδηόηεηεο ηνπ δεύγνπο. Η εμέιημε ηεο γιώζζαο HTML είλαη ε HTML5 πνπ ζρεδηάζηεθε γηα λα αληηθαηαζηήζεη ηερλνινγίεο όπσο XHTML θαη ηε ρξήζε plug-in. Έλα ζεκαληηθό πξνηέξεκα ηεο HTML5 είλαη ε ρξήζε αξρείσλ βίληεν θαη ήρνπ ρσξίο ηελ ύπαξμε flash player (θάηη πνπ ήηαλ απαξαίηεην ζηελ HTML). 2.3 CSS & CSS3 Από ηε κέξα πνπ μεθίλεζε ε αλάπηπμε ηζηνζειίδσλ άξρηζε λα γίλεηαη αλαγθαία ε κνξθνπνίεζε ησλ ζειίδσλ απηώλ θαη ε εμέιημε ηνπο ζε έλα πεξηβάιινλ θηιηθό πξνο ην ρξήζηε. Η αλάγθε απηή θαιύθηεθε κε ηελ αλάπηπμε κηα γιώζζαο νλόκαηη CSS. Σηνλ θώδηθα CSS πεξηιακβάλνληαη νη πεξηζζόηεξεο κνξθνπνηήζεηο κηαο ηζηνζειίδαο όπσο ρξώκαηα, γξακκαηνζεηξέο, κνξθνπνηήζεηο πηλάθσλ θ.α. Τν θνκκάηη ηνπ CSS θώδηθα κπνξεί λα γξαθηεί ή ζηε ζειίδα ζηελ νπνία θαιείηε γξάθνληαο ηελ εηηθέηα style αλάκεζα ζηηο εηηθέηεο head Φαηδηόγινπ Γεκήηξηνο Σειίδα 14

15 (<head> <style> style code </style> </head>), ή ζε μερσξηζηό αξρείν ην νπνίν παίξλεη ηελ θαηάιεμε css (π.ρ. mystyle.css). Φξεζηκνπνηώληαο ην δεύηεξν ηξόπν πνπ είλαη θαη ν πξνηηκόηεξνο ζα πξέπεη λα γίλεη θιήζε ηνπ αξρείνπ CSS ζηνλ HTML θώδηθα πνπ ρξεζηκνπνηείηαη. Η δηαδηθαζία απηή επηηπγράλεηαη κε ηελ εληνιή: <link rel="stylesheet" type="text/css" href="mystyle.css"/> αλάκεζα ζηελ εηηθέηα head. Οη κνξθνπνηήζεηο κπνξεί λα αθνξνύλ έλα ζπγθεθξηκέλν θνκκάηη θώδηθα ή έλα ζύλνιν ζηνηρείσλ κε ην ίδην όλνκα. Γηα ηελ επηινγή ηνπ ζεκείνπ πνπ ζα εθαξκνζηεί ε κνξθνπνίεζε ρξεζηκνπνηείηαη ν επηινγέαο (Selector). Παξαθάησ αλαθέξνληαη νη ηξεηο βαζηθέο θαηεγνξίεο selector πνπ ρξεζηκνπνηνύληαη. Selector κε εηηθέηα (Type selector) Η1 {color : #FF0000;} Selector κε id ηνπ ζηνηρείνπ (ID selector) #my_id{color : #FF0000;} Selector κε θιάζε ηνπ ζηνηρείνπ (Class selector).my_class{color : #FF0000;} Τν πξώην πεδίν (H1, #my_id,.my_class) είλαη ν selector θαη αλαθέξεηαη ζην ζεκείν εθείλν πνπ ζα νξηζηεί ε κνξθνπνίεζε, έπεηηα ηνπνζεηνύληαη νη αγθύιεο γηα λα νξηζηεί ε έλαξμε θαη ε ιήμε ηεο κνξθνπνίεζεο. Μέζα ζηηο αγθύιεο πεξηέρνληαη νη ηδηόηεηεο πνπ ζα ηξνπνπνηεζνύλ (π.ρ. color, fond-size θιπ) θαη νη ηηκέο πνπ ζα πάξνπλ (#FF0000). Γηα λα μερσξηζηεί ε ηδηόηεηα από ηελ ηηκή ρξεζηκνπνηείηαη ε άλσ θαη θάησ ηειεία, γηα λα νξηζηεί ην ηέινο ηεο ηδηόηεηαο ρξεζηκνπνηείηαη ην ειιεληθό εξσηεκαηηθό. Έλαο selector κπνξεί λα πεξηιακβάλεη πεξηζζόηεξεο από κηα ηδηόηεηεο κνξθνπνίεζεο. Οη selector κε εηηθέηα ηξνπνπνηνύλ όια ηα ζηνηρεία πνπ έρνπλ ηηκή ίδηα κε ηνλ selector. Σε αληίζεζε κε ηελ πξνεγνύκελε θαηεγνξία νη selector κε id κνξθνπνηνύλ κόλν ηελ πεξηνρή εθείλε ζηελ νπνία θαινύληαη. Η θιήζε ηεο γίλεηαη κε ηελ εληνιή <div id= my_id > </div>. Αξλεηηθό ζηε ζπγθεθξηκέλε κέζνδν είλαη όηη κπνξεί λα θιεζεί κόλν κηα θνξά. Γηα ηελ εμάιεηςε απηνύ ηνπ αξλεηηθνύ ζηνηρείνπ ππάξρεη ε ηξίηε κέζνδνο ε νπνία αθνξά ηηο θιάζεηο. Έρεη ηηο ίδηεο ηδηόηεηεο κε ηελ πξνεγνύκελε κέζνδν, κε κόλε δηαθνξά όηη κπνξεί λα θιεζεί πεξηζζόηεξεο από κηα θνξέο κέζα ζην αξρείν HTML. Η CSS3 απνηειεί ηελ επνκέλε έθδνζε ηεο CSS. Οη πεξηζζόηεξεο λέεο εθδόζεηο browser ππνζηεξίδνπλ ηελ θαηλνύξηα έθδνζε ηεο CSS, ελώ γηα ηηο παιηέο ηνπο εθδόζεηο έρνπλ αλαπηπρζεί βηβιηνζήθεο πνπ θαινύληαη από ην ίδην αξρείν CSS γηα ηελ ππνζηήξημή ηεο. Φαξαθηεξηζηηθό γλώξηζκα ηεο CSS3 είλαη ε δεκηνπξγία animation ρσξίο ηε ρξήζε flash θαη JavaScript. Φαηδηόγινπ Γεκήηξηνο Σειίδα 15

16 2.4 JAVASCRIPT Γηα ηελ αλάπηπμε εθαξκνγώλ ζρεδηαζκέλσλ ζε πεξηβάιινλ ηζηνύ ρξεζηκνπνηείηαη ε γιώζζα JavaScript. Η JavaScript εθηειείηαη ζηνλ Client θαη όρη (απαξαίηεηα) ζηνλ server. Απηό ζεκαίλεη όηη κεηώλεηαη ε θαηαλάισζε πόξσλ. Φξεζηκνπνηείηαη ζπλήζσο γηα ηελ επεμεξγαζία δεδνκέλσλ πνπ εηζάγεη ν ρξήζηεο θαη γηα ηελ ηξνπνπνίεζε θαη γηα ηελ δεκηνπξγία λέσλ αληηθεηκέλσλ. Δλ νιίγεο δίλεηαη ε δπλαηόηεηα δεκηνπξγίαο κηα ζειίδαο κε δπλακηθό ηξόπν. Ο JavaScript θώδηθαο κπνξεί λα γξαθεί κέζα ζην HTML αξρείν ή ζε μερσξηζηό αξρείν ην νπνίν έρεη θαηάιεμε «.js». Γηα ην HTML αξρείν ππάξρνπλ δύν επηινγέο, λα γξαθηεί κέζα ζηηο εηηθέηεο head ή ζηηο εηηθέηεο body (αξρή ή ηέινο). Γηα λα γλσζηνπνηεζεί όηη πξόθεηηαη γηα αξρείν JavaScript ηνπνζεηείηαη ε εηηθέηα «<script>». 2.5 JQUERY Η jquery είλαη κηα βηβιηνζήθε ηεο JavaScript πνπ ζρεδηάζηεθε γηα λα απινπνηήζεη ην ζπληαθηηθό ηεο. Φξεζηκνπνηείηαη ζπλήζσο γηα ηελ αλάπηπμε νπηηθώλ εθέ θαη γηα ηελ ηξνπνπνίεζε ηνπ ππάξρνληνο θώδηθα. Γηα λα εθαξκνζηεί ζηνλ θώδηθα ζα πξέπεη λα γίλεη ε θιήζε ηεο αλάκεζα ζηηο εηηθέηεο head ηνπ HTML θώδηθα (<script src=" </script> ). Η ζύληαμε ρσξίδεηαη ζε ηξία κέξεη : 1. Selector ($) 2. Γξάζε-action 3. Παξάκεηξνη Ο selector δειώλεη ην ζεκείν ζην νπνίν ζα αζθεζεί ε δξάζε. Η δξάζε αθνξά ηελ ελέξγεηα πνπ ζα πξαγκαηνπνηεζεί ζηνλ selector πνπ έρεη επηιεγεί. Οη παξάκεηξνη κπνξεί λα είλαη κηα απιή αιιαγή ρξώκαηνο, κέρξη θαη κηα νιόθιεξε ζπλάξηεζε κε πνιιέο ελέξγεηεο. 2.6 SAMSUNG SDK (EMULATOR) Γηα ηε βνήζεηα ηνπ πξνγξακκαηηζηή ε Samsung έρεη αλαπηύμεη πξνζνκνησηέο νη νπνίνη παίξλνπλ ηνλ ξόιν ηεο ηειεόξαζεο. Υπνζηεξίδνληαη από ηα πεξηζζόηεξα ιεηηνπξγηθά ζπζηήκαηα όπσο Windows, Mac OS, Linux. Γηα ζπζηήκαηα ηα νπνία δελ αλαγξάθνληαη ζηε ιίζηα πνπ δηαζέηεη ε Samsung ππάξρεη ε έθδνζε Virtual Machine. Οη απαηηήζεηο ηνπ ζπζηήκαηνο είλαη ρακειέο, νη πεξηζζόηεξνη ζύγρξνλνη ππνινγηζηέο κπνξνύλ λα ην ππνζηεξίμνπλ. Ο πξώηνο πξνζνκνησηήο θαηαζθεπάζηεθε ην 2010 θαη ππνζηεξίδεη ηηο παξαθάησ ηερλνινγίεο: HTML 4.01 DOM 2 CSS 2.1 Φαηδηόγινπ Γεκήηξηνο Σειίδα 16

17 JavaScript 1.6 Flash 8.0 Flash Lite 3.1 Action Script 2.0 Ο ζπγθεθξηκέλνο πξνζνκνησηήο δίλεηαη κέρξη θαη ζήκεξα από ηελ εηαηξεία αιιά δε ρξεζηκνπνηείηαη ιόγσ αλάπηπμεο ηεο ηερλνινγίαο ζην πξνγξακκαηηζκό ηζηνύ. Τε ζέζε ηνπ πήξε ν SDK 2011 ν νπνίνο έρεη παξόκνηα ραξαθηεξηζηηθά ζηελ ηειεπηαία ηνπο έθδνζε (εηθόλα 2.6.1). Αμίδεη λα ζεκεησζεί ε πξνζζήθε κηαο λέα ηερλνινγίαο ε νπνία έρεη ρξεζηκνπνηεζεί θαη ζηελ παξνύζα πηπρηαθή θαη είλαη ην Live Streaming. HTML 5 DOM 2 CSS 3 JavaScript 1.8 Flash 10.1 Flash Lite 3.1 Action Script 3.0 Live Streaming Δηθόλα : Emulator 1.2, SKD 2011 Ο επόκελνο πξνζνκνησηήο θηάλεη ζηηο αξρέο ηνπ 2012 κε δηαθξηηό ηίηιν SDK 2012 (εηθόλα 2.6.2). Η εηαηξεία ζπλερίδεη λα αλαβαζκίδεη ηελ ηερλνινγία ηεο θαη λα ελζσκαηώλεη ηηο λέεο εθδόζεηο ησλ εξγαιείσλ αλάπηπμεο. Τν DOM 3 παίξλεη ηε ζέζε ηεο παιαηόηεξεο έθδνζήο ηνπ, ελώ ην framework 2.0 πξνζηίζεηαη θαη αιιάδεη θάπνηεο από ηεο βαζηθέο εληνιέο ζηνλ πξνγξακκαηηζκό ησλ Samsung apps. HTML 5 DOM 3 CSS 3 JavaScript 1.8 Flash 10.1 Φαηδηόγινπ Γεκήηξηνο Σειίδα 17

18 Flash Lite 3.1 Action Script 3.0 Live Streaming Δηθόλα Emulator 3.5.2, SKD 2012 Ο SDK 2013 ρξεζηκνπνηείηαη ζήκεξα θαη είλαη ε ηειεπηαία έθδνζε πνπ έρεη δώζεη ζηε δηάζεζε ηνπ θνηλνύ ε Samsung (εηθόλα 2.6.3). Γελ ππήξμαλ δξακαηηθέο αιιαγέο ζηνλ ηνκέα ηνπ δηαδηθηπαθνύ πξνγξακκαηηζκνύ θαη έηζη νη ηδηόηεηεο απηνύ ηνπ πξνζνκνησηή δελ έρνπλ πνιιέο δηαθνξέο κε ηνπ Τν flash αλαβαζκίζηεθε ζηελ έθδνζε Αμίδεη λα ζεκεησζεί ε πξνζζήθε κηαο λέαο επηινγήο ε νπνία είλαη ν ρεηξηζκόο κέζσ θσλεηηθώλ εληνιώλ θαη κέζσ θηλήζεσλ. HTML 5 DOM 2 CSS 3 JavaScript 1.8 Flash 11.1 Flash Lite 3.1 Action Script 3.0 Live Streaming Φαηδηόγινπ Γεκήηξηνο Σειίδα 18

19 Δηθόλα Emulator 4.0, SKD 2013 Φαηδηόγινπ Γεκήηξηνο Σειίδα 19

20 3 ΚΔΦΑΛΑΗΟ 3 Ο : SAMSUNG SMART TV APPS Φαηδηόγινπ Γεκήηξηνο Σειίδα 20

21 3.1 ΔΓΚΑΣΑΣΑΖ ΔΦΑΡΜΟΓΧΝ Η εγθαηάζηαζε εθαξκνγώλ ζε κηα «έμππλε» ηειεόξαζε (smart TV) γίλεηαη κε δύν ηξόπνπο. Ο πξώηνο θαη πην εύθνινο ζε έλαλ κέζν ρξήζηε, είλαη ην market ηεο Samsung ην νπνίν βξίζθεηαη ζηηο επηινγέο ηεο ηειεόξαζεο κε όλνκα «Samsung Apps» (εηθόλα 3.1.1). Δθεί ν ρξήζηεο κπνξεί λα επηιέμεη αλάκεζα ζε κηα πιεζώξα εθαξκνγώλ, ηηο εθαξκνγέο ηεο αξεζθείαο ηνπ θαη λα ηηο εγθαηαζηήζεη άκεζα κε ην πάηεκα ελόο πιήθηξνπ. Δηθόλα : Samsung Apps : ην θαηάζηεκα ηεο Samsung κε εθαξκνγέο πνπ ππνζηεξίδνπλ απνθιεηζηηθά νη smart TV Ο δεύηεξνο ηξόπνο είλαη ε εγθαηάζηαζε από ηνλ ππνινγηζηή ηνπ ρξήζηε. Φξεζηκνπνηείηαη θπξίσο από πξνγξακκαηηζηέο πνπ αλαπηύζζνπλ νη ίδηνη εθαξκνγέο. Η δηαδηθαζία είλαη απιή θαη ζα αλαιπζεί ζην θεθάιαην SAMSUNG ACCOUNT Γηα ηελ εγθαηάζηαζε εθαξκνγώλ ζηηο smart TV ζα πξέπεη λα γίλεη ρξήζε ελόο πξνζσπηθνύ ινγαξηαζκνύ από ηνλ ρξήζηε. Ο ινγαξηαζκόο κπνξεί λα δεκηνπξγεζεί κέζα από ηηο επηινγέο ηεο ηειεόξαζεο (ππνρξεσηηθή ε ύπαξμε δηθηύνπ) ή κέζσ ηνπ ηζηόηνπνπ ηεο Samsung ( Ο ινγαξηαζκόο δεκηνπξγείηαη δσξεάλ, δειώλνληαο ηα ζηνηρεία ηνπ ρξήζηε όπσο θαίλεηαη θαη ζηελ εηθόλα Φαηδηόγινπ Γεκήηξηνο Σειίδα 21

22 Δηθόλα : Γεκηνπξγία ινγαξηαζκνύ ρξεζηή από ην samsungdforum.com 3.3 ΤΝΓΔΖ ΤΠΟΛΟΓΗΣΖ - TV Γηα ηελ εγθαηάζηαζε εθαξκνγώλ από ηνλ ππνινγηζηή είλαη απαξαίηεηε ε δεκηνπξγία ελόο server θαη ε δήισζε ηεο IP ηνπ ζηελ ηειεόξαζε. Η Samsung έρεη απινπνηήζεη απηή ηε δηαδηθαζία κε ηελ ρξήζε ηνπ Eclipse. Σηελ επόκελε παξάγξαθν αλαιύεηαη ε δηαδηθαζία εγθαηάζηαζεο ζε βήκαηα. Βήκα 1: Πξηλ μεθηλήζεη ε δηαδηθαζία ηεο εγθαηάζηαζεο ζα πξέπεη λα ζπκπηεζηνύλ ηα αξρεία ηεο εθαξκνγήο. Κάλνληαο δεμί θιηθ πάλσ ζην project πνπ έρεη δεκηνπξγήζεη ν ρξήζηεο εκθαλίδεηαη ε επηινγή «Samsung Smart TV SDK» θαη ην ππό-κελνύ «Packaging» (εηθόλα 3.3.1). Φαηδηόγινπ Γεκήηξηνο Σειίδα 22

23 Δηθόλα : Μελνύ Packaging Δπηιέγνληαο ην Packaging, αλνίγεη ζε λέν παξάζπξν ην Package Project (εηθόλα 3.3.2) ζην νπνίν ζα πξέπεη λα ζπκπιεξσζνύλ ηα θαηάιιεια πεδία γηα ηελ ζπκπίεζε. 1. Δπηινγή νλόκαηνο. 2. Δπηινγή ηεο επείξνπ. 3. Πξνζζήθε επηπιένλ παθέηνπ γιώζζαο. Απηή ε επηινγή ρξεζηκνπνηείηαη κόλν εάλ ε ρώξα ζηελ νπνία αλαθέξεηαη ε εθαξκνγή δελ αλήθεη ζηηο επείξνπο πνπ αλαθέξζεθαλ ζηελ επηινγή 2. Φαηδηόγινπ Γεκήηξηνο Σειίδα 23

24 Δηθόλα : Package Project Βήκα 2: Σε απηό ην ζηάδην ζα πξέπεη λα δεισζεί ε IP ηνπ server θαη ν θάθεινο ζηνλ νπνίν ζα γίλεηαη ε αλαδήηεζε ησλ εθαξκνγώλ. Από ην θεληξηθό κελνύ ν ρξήζηεο επηιέγεη ηελ θαξηέια «Samsung Smart TV SDK» θαη ην ππό-κελνύ «Samsung Smart TV SDK Preferences» (εηθόλα 3.3.3). Φαηδηόγινπ Γεκήηξηνο Σειίδα 24

25 Δηθόλα : Samsung SDK Preferences Σην λέν παξάζπξν πνπ άλνημε ζα πξέπεη λα επηιεγεί ε θαξηέια server (εηθόλα 3.3.4) θαη λα ζπκπιεξσζνύλ ηα θαηάιιεια ζηνηρεία. 1. Τν ζπγθεθξηκέλν πεδίν ζπκπιεξώλεηαη απηόκαηα θαη δειώλεη ηελ IP ηνπ ππνινγηζηή. 2. Τν πεδίν ζπκπιεξώλεηαη από ην ρξήζηε θαη δειώλεη ην θάθειν ζηνλ νπνίν ζα αλαδεηεζνύλ νη εθαξκνγέο. Δηθόλα : Samsung SDK Preferences Server Σε απηό ην ζηάδην ηειεηώλνπλ νη ξπζκίζεηο από ην θνκκάηη ηνπ ππνινγηζηή θαη αθνινπζνύλ νη ξπζκίζεηο ηεο ηειεόξαζεο. Φαηδηόγινπ Γεκήηξηνο Σειίδα 25

26 Βήκα 3: Από ην θεληξηθό κελνύ ηεο ηειεόξαζεο ν ρξήζηεο επηιέγεη ην πιήθηξν «Status» γηα λα πξαγκαηνπνηήζεη είζνδν. Σαλ όλνκα ρξήζηε εηζάγεηαη ε ιέμεη «develop» Δηθόλα : Login Βήκα 4: Σε απηό ην βήκα πξέπεη λα επηιεγεί ην πιήθηξν «Smart hub» από ην ηειεθνληξόι θη έπεηηα ην κελνύ «πεξηζζόηεξεο εθαξκνγέο» Δηθόλα : Smart Hub Βήκα 5: Σην πάλσ κέξνο ηνπ κελνύ πνπ αλνίγεη επηιέγεηαη ην εηθνλίδην «Δπηινγέο». Γίλεηαη ζην «IP Setting» ηελ IP ηνπ ππνινγηζηή. Φαηδηόγινπ Γεκήηξηνο Σειίδα 26

27 Δηθόλα : IP Setting Βήκα 6: Τέινο επηιέγεηαη ην «Start App Sync» θαη ε εθαξκνγή πνπ βξίζθεηαη ζην θάθειν, πνπ δειώζεθε ζην βήκα 2, εγθαζίζηαηαη ζηελ ηειεόξαζε. Δηθόλα : Smart Hub Φαηδηόγινπ Γεκήηξηνο Σειίδα 27

28 Δηθόλα : Δγθαηάζηαζε εθαξκνγήο 3.4 ΑΡΥΔ ΓΗΑ ΣΟ ΥΔΓΗΑΜΟ APPS Γηα ηε ζρεδίαζε κηαο εθαξκνγήο είλαη ζεκηηό λα αθνινπζεζεί ην πξόηππν θαη νη ζπκβνπιέο πνπ δίλεη ε Samsung γηα ηελ αλάπηπμε εθαξκνγώλ. Παξαθάησ αλαθέξνληαη πεξηιεπηηθά θάπνηα από ηα θξηηήξηα πνπ ραξαθηεξίδνπλ κηα θαιή εθαξκνγή Απιόηεηα Μηα πνιύπινθε εθαξκνγή δελ είλαη απαξαηηήησο θαιύηεξε εθαξκνγή. Η νζόλε ηεο ηειεόξαζεο δε ζα πξέπεη λα θαιύπηεηαη κε πνιιέο πιεξνθνξίεο πνπ ελδέρεηαη λα κελ είλαη απαξαίηεηεο ή κπνξνύλ λα ηνπνζεηεζνύλ ζε άιιν θνκκάηη ηεο εθαξκνγήο. Η δηάηαμε ησλ αληηθεηκέλσλ ζα πξέπεη λα είλαη θηιηθή πξνο ην ρξήζηε, κε ζαθή θαη εύθνιε πξόζβαζε ζηηο ιεηηνπξγίεο πνπ παξέρνληαη. Οη ιεηηνπξγίεο ηεο εθαξκνγήο πξέπεη λα παξακείλνπλ απιέο, ρσξίο λα απαηηείηαη πεξίπινθε πινήγεζε ζε ππό-επίπεδα. Δπίζεο πξέπεη λα δίλεηαη ε δπλαηόηεηα ζην ρξήζηε λα θαηαιάβεη ηνλ έιεγρν ηεο εθαξκνγήο ρσξίο λα αλαηξέμεη ζε έλα εγρεηξίδην Απνζαθήληζε Ο πην θξίζηκνο παξάγνληαο θαηά ην ζρεδηαζκό κηαο εθαξκνγήο ηειεόξαζεο, πξέπεη λα πεξηιακβάλεη ζαθή θαη αθξηβή πινήγεζε γηα ηηο ελέξγεηεο ηνπ ρξήζηε. Δάλ ε πινήγεζε είλαη αζαθήο, ν ρξήζηεο ζα αηζζάλεηαη ζύγρπζε θαη αλαζθάιεηα. Δίλαη πηζαλό λα θιείζεη ακέζσο ηελ εθαξκνγή θαη λα κελ ηελ ρξεζηκνπνηήζεη μαλά. Φαηδηόγινπ Γεκήηξηνο Σειίδα 28

29 Με ιίγα ιόγηα, ν ρξήζηεο πξέπεη πάληα λα μέξεη αθξηβώο πνύ βξίζθεηαη κέζα ζε κηα εθαξκνγή. Θεκειηώδεηο ελέξγεηεο πινήγεζεο όπσο Move, Return θαη Enter ζα πξέπεη πάληα λα είλαη ζαθείο Έιεγρνο Υξήζηε Οη εθαξκνγέο ζα πξέπεη λα ιεηηνπξγνύλ κε έλα δηαηζζεηηθό ηξόπν, ιακβάλνληαο ππόςε ηε ζπζθεπή εηζόδνπ πνπ ρξεζηκνπνηείηαη γηα ηνλ έιεγρό ηνπο. Η θύξηα ζπζθεπή εηζόδνπ γηα κηα ηειεόξαζε είλαη ην ηειερεηξηζηήξην θαη επεηδή απηό ιεηηνπξγεί πνιύ δηαθνξεηηθά από έλα πνληίθη ππνινγηζηή ή κηα νζόλε αθήο, ν δνκηθόο ζρεδηαζκόο ηεο εθαξκνγήο ζα πξέπεη λα βειηηζηνπνηεζεί γηα ηελ επθνιία ζηε ρξήζε. Οη ελέξγεηεο πνπ πξαγκαηνπνηνύληαη ζηελ νζόλε ηεο ηειεόξαζεο κέζσ ηνπ ηειερεηξηζηεξίνπ πξέπεη λα αληαπνθξίλνληαη ζηηο πξνζδνθίεο ησλ ρξεζηώλ θαη νη ζπλνιηθέο ιεηηνπξγηθέο πξνδηαγξαθέο πξέπεη λα είλαη ζπλεπείο. Οη εηηθέηεο ζηα θνπκπηά ειέγρνπ θαη ζηα εηθνλίδηα πξέπεη πάληα λα ηαηξηάδνπλ κε ηηο ελέξγεηεο πνπ εθηεινύλ. Σηνλ νδεγό ηεο Samsung αλαθέξνληαη ιεπηνκεξώο νη ελέξγεηεο ησλ πιήθηξσλ. Απηόο ν νδεγόο πξέπεη λα ηεξεζεί ζε θάζε πεξίπησζε πλέπεηα Η ζπλέπεηα είλαη ζηελά ζπλδεδεκέλε κε ηηο βειηηώζεηο ζηε ιεηηνπξγηθόηεηα θαη ηελ εθκάζεζε. Κνπκπηά (PLAY, PAUSE, FF/REW, STOP), πνπ ρξεζηκνπνηνύληαη γηα αλαπαξαγσγή βίληεν ζηελ ηειεόξαζε κπνξεί λα ρξεζηκνπνηεζνύλ ζηελ εθαξκνγή. Η επαλαρξεζηκνπνίεζε ηέηνησλ ιεηηνπξγηώλ θάλεη επθνιόηεξν ζηνπο ρξήζηεο λα καζαίλνπλ λα ρεηξίδνληαη ηελ εθαξκνγή. Γελ είλαη πάληα δπλαηό λα ρξεζηκνπνηεζεί ην ίδην UI γηα θάζε εθαξκνγή. Η εμαζθάιηζε ηεο ζπλέπεηαο ησλ ζηνηρείσλ πνπ αλαθέξνληαη παξαθάησ, επηηξέπεη ζηνπο ρξήζηεο λα εμνηθεησζνύλ κε θνηλνύο ρεηξηζκνύο θαη λα ρξεζηκνπνηνύλ ηηο εθαξκνγέο πην εύθνια. πλέπεηα ζηηο ιεηηνπξγίεο ηωλ πιήθηξωλ Γελ ππάξρνπλ ζεκαληηθνί πεξηνξηζκνί ζε θνπκπηά, θσλεηηθέο εληνιέο, θαη εληνιέο θίλεζεο, αιιά αθνινπζώληαο ηηο νδεγίεο ιεηηνπξγίαο ηεο Samsung νη ρξήζηεο βνεζνύληαη ζηελ γξήγνξε θαη εύθνιε θαηαλόεζε ηεο εθαξκνγήο. πλέπεηα ζηελ δηάηαμεο νζόλεο Η νζόλε ζα πξέπεη λα ζεζπηζηεί γηα λα παξέρεη απνηειεζκαηηθά ηηο πιεξνθνξίεο ζε θάζε εθαξκνγή. Η δηάηαμε ηεο νζόλεο ζπληζηάηαη λα αθνινπζεί κηα θαηεπζπληήξηα γξακκή γηα ηνλ ηύπν ηνπ πεξηερνκέλνπ θαη ησλ ραξαθηεξηζηηθώλ ηεο εθαξκνγήο, κε απνηέιεζκα λα εμαζθαιηζηεί κηα νηθεία πινήγεζε γηα ην ρξήζηε. Η πξώηε γξακκή ηνπ ρώξνπ ζρεδίαζεο ζα πξέπεη λα πξννξίδεηαη γηα ηνλ ηίηιν θαη ε ηειεπηαία γηα ηνλ νδεγό (Help bar). Φαηδηόγινπ Γεκήηξηνο Σειίδα 29

30 πλέπεηα ηωλ αιιειεπηδξάζεωο Η αίηεζε πνπ ζηέιλεηαη από ην ηειερεηξηζηήξην ζα πξέπεη λα δηαηεξεί κηα ζπλεπή κέζνδν αιιειεπίδξαζεο κε ηα ζηνηρεία πνπ εκθαλίδνληαη ζηελ νζόλε θαη λα είλαη θνηλά ζε όιεο ηηο εθαξκνγέο, όπσο ηνλ ηξόπν πνπ εκθαλίδνληαη ηα pop-up κελύκαηα, νη επηινγέο ησλ pop-up (ππό-ιίζηεο θ.ι.π.), θαζώο θαη νη θαηεπζύλζεηο πινήγεζεο ζην πεξηερόκελν κηαο ιίζηαο Αλαηξνθνδόηεζε Όηαλ ππάξρνπλ ζηνηρεία πνπ κπνξνύλ λα επηιεγνύλ ρξεζηκνπνηώληαο εζηίαζε, πξέπεη λα αλαγξάθεηαη ν ηξόπνο κε ηνλ νπνίν ζα εζηηάδεηαη, λα πξνζδηνξίζεη αλ έλα ζηνηρείν είλαη ππό εζηίαζε ή αλ ν ρξήζηεο ζα ρξεηαζηεί λα ρξεζηκνπνηήζεη απνκαθξπζκέλεο ιεηηνπξγίεο ειέγρνπ όπσο παηώληαο ην πιήθηξν ENTER. Όηαλ ν ρξόλνο πνπ απαηηείηαη γηα λα αλνίμεη κηα εθαξκνγή ππεξβαίλεη έλα νξηζκέλν ρξνληθό δηάζηεκα θόξησζεο (π.ρ. έλα animation), ζα πξέπεη λα παξέρεηαη νπηηθή επηβεβαίσζε, όηη ε νζόλε ζα αιιάμεη ζύληνκα ζύκθσλα κε ην αίηεκα ηνπ ρξήζηε Αηζζεηηθή Η αηζζεηηθή ζρεδίαζε θάλεη ηηο εθαξκνγέο λα θαίλνληαη πην εύθνιεο ζηε ρξήζε, απμάλνληαο παξάιιεια ηηο πηζαλόηεηεο λα ρξεζηκνπνηεζεί εθ λένπ από ηνπο ρξήζηεο. Δπίζεο είλαη απνηειεζκαηηθόο ηξόπνο γηα ηε δεκηνπξγία ζεηηθώλ εληππώζεσλ ησλ ρξεζηώλ ζε κηα εθαξκνγή. Σε αληίζεζε κε ηνλ ππνινγηζηή θαη ηα θηλεηά, ζηηο εθαξκνγέο πνπ έρνπλ ζρεδηαζηεί εηδηθά γηα ρξήζε ζε κηα ηειεόξαζε ζα πξέπεη λα δνζεί ηδηαίηεξε έκθαζε ζηελ αηζζεηηθή ζρεδίαζε θαη ζε παξάγνληεο όπσο ρξώκα, αλάιπζε θαη ζύλζεζε νζόλεο. 3.5 ΓΗΑΣΑΞΖ ΟΘΟΝΖ Σεκαληηθό ξόιν ζηηο εθαξκνγέο κηαο έμππλεο ηειεόξαζεο, παίδεη ε δηάηαμε ησλ αληηθεηκέλσλ πνπ απεηθνλίδνληαη ζηελ νζόλε. Γξακκαηνζεηξέο, ρξώκαηα όπσο θαη πνιιά αιιά ζα πξέπεη λα κειεηεζνύλ πξηλ ε εθαξκνγή δνζεί ζην εκπόξην. Παξαθάησ αλαθέξνληαη νη ζεκαληηθόηεξεο ιεηηνπξγίεο πνπ είλαη θαιό λα πξνζερζνύλ ζύκθσλα κε ηηο νδεγίεο πνπ παξέρεη ε Samsung ζηελ επίζεκε ηζηνζειίδα ηεο Αλάιπζε νζόλεο Η κεγέζπλζε ησλ αληηθεηκέλσλ ζηελ νζόλε δηαθέξεη αλάινγα κε ηελ αλάιπζε ηεο εθαξκνγήο. Απηό κπνξεί λα επεξεάζεη ηελ επθξίλεηα ησλ ραξαθηήξσλ θαη ησλ εηθόλσλ. Δθαξκνγέο κε πςειή αλάιπζε παξέρνπλ πςειόηεξε πνηόηεηα ζηελ εηθόλα ηεο νζόλεο, αιιά απηό κπνξεί επίζεο λα παξεκπνδίζεη ηελ επίδνζε ηεο εθαξκνγήο, γη απηό πξέπεη λα επηιεγεί ε θαιύηεξε δπλαηή ηζνξξνπία. Φαηδηόγινπ Γεκήηξηνο Σειίδα 30

31 Δηθόλα : Αλάιπζε νζόλεο Υξώκαηα Τα ρξώκαηα πνπ εκθαλίδνληαη ζηελ νζόλε ηεο ηειεόξαζεο είλαη ζπλήζσο πην έληνλα από ό, ηη ζε εθείλα κηαο νζόλεο ππνινγηζηή. Έηζη, όηαλ έλα ζρέδην έρεη νινθιεξσζεί, ζα πξέπεη λα δνθηκαζηεί ζε κηα νζόλε ηειεόξαζεο γηα λα ειεγρηνύλ ηα ρξώκαηα. Τα ππεξβνιηθά θσηεηλά ρξώκαηα κπνξεί λα πξνθαιέζνπλ θαηαπόλεζε ησλ καηηώλ. Η ηππηθή απόζηαζε παξαθνινύζεζεο ηεο ηειεόξαζεο είλαη 3 κέηξα καθξηά από ηελ νζόλε, νπόηε ζα πξέπεη λα ρξεζηκνπνηεζεί πξαγκαηηθή ηειεόξαζε (θαη όρη πξνζνκνησηήο) γηα λα επηβεβαησζεί ν νξζόο ζρεδηαζκόο ηνπ γξαθηθνύ πεξηβάιινληνο Φαηδηόγινπ Γεκήηξηνο Σειίδα 31

32 Δηθόλα : Απόζηαζε παξαθνινύζεζεο ζηελ ηειεόξαζε Γξακκαηνζεηξά Οη γξακκαηνζεηξά πνπ ππνζηεξίδεηαη από ηε Samsung Smart TV είλαη ε Samsung SVD. Η νμύηεηα ηνπ θάζε θεηκέλνπ ζα δηαθέξεη αλάινγα κε ηελ αλάιπζε ηεο εθαξκνγήο, όπσο θαίλεηαη ζην ζηελ εηθόλα Γηα λα εμαζθαιηζηεί ε κέγηζηε δπλαηή αλαγλσζηκόηεηα, ζα πξέπεη λα ρξεζηκνπνηνύληαη κεγάιεο γξακκαηνζεηξέο όπνπ είλαη δπλαηόλ Δηθόλα : Ομύηεηα γξακκάηωλ αλάινγα κε ηελ αλάιπζε ηνηρεία νζόλεο Όιεο νη εθαξκνγέο πνπ παξέρνληαη κέζσ ηνπ Samsung Smart Hub έρνπλ κηα πιήξε δηάηαμε ηεο νζόλεο, αλεμάξηεηα από ην είδνο ηνπο. Σηελ εηθόλα θαίλεηαη ε δηάηαμε ησλ εθαξκνγώλ πνπ ρξεζηκνπνηνύληαη ζπρλά. Δηθόλα : Γηάηαμε ηωλ εθαξκνγώλ Φαηδηόγινπ Γεκήηξηνο Σειίδα 32

33 3.5.5 Σίηινη θαη ινγόηππα Ο ηίηινο ή ην ινγόηππν ηεο εθαξκνγήο ζπληζηάηαη λα ηνπνζεηείηαη πάλσ αξηζηεξό κέξνο ηεο νζόλεο όπσο θαίλεηαη ζηελ εηθόλα Γεδνκέλνπ όηη νη πεξηζζόηεξνη άλζξσπνη θνηηάδνπλ πξώηα ζηελ επάλσ αξηζηεξή γσλία θη έπεηηα θηλνύληαη πξνο ην θάησ δεμηά κέξνο κηαο ηειεόξαζεο. Δηθόλα : Λνγόηππα εθαξκνγώλ Πινήγεζε ζηε ιίζηα πεξηερνκέλνπ Σε κηα ιίζηα κε πεξηερόκελα, Φξεζηκνπνηνύληαη δύν είδε εζηηάζεηο, θηλνύκελε εζηίαζε ή κηα ζηαζεξή εζηίαζε. Κηλνύκελε εζηίαζε Όπσο θαίλεηαη ζηελ εηθόλα , απηή είλαη κηα κέζνδνο όπνπ κηα ιίζηα ζηαζεξνύ πεξηερνκέλνπ εκθαλίδεηαη ζηελ νζόλε θαη ε εζηίαζε κεηαθηλείηαη πάλσ από ηα πεξηερόκελα. Δηθόλα : Κηλνύκελε εζηίαζε Φαηδηόγινπ Γεκήηξηνο Σειίδα 33

34 ηαζεξή εζηίαζε Όπσο θαίλεηαη ζηελ εηθόλα , απηή είλαη κηα κέζνδνο όπνπ ε εζηίαζε παξακέλεη ζηαζεξή ζηελ νζόλε θαη ην ζύλνιν ησλ θηλήζεσλ γίλεηαη ζηελ ιίζηα πεξηερνκέλσλ. Δηθόλα : ηαζεξή εζηίαζε Φαηδηόγινπ Γεκήηξηνο Σειίδα 34

35 4 ΚΔΦΑΛΑΗΟ 4 Ο : ΔΦΑΡΜΟΓΖ X-SMART Φαηδηόγινπ Γεκήηξηνο Σειίδα 35

36 4.1 ΓΔΝΗΚΑ Ο ζθνπόο ηεο ζπγθεθξηκέλεο εθαξκνγήο είλαη λα παξέρεη ππεξεζίεο ςπραγσγίαο θαη ελεκέξσζεο ζηνπο ρξήζηεο. Οη ρξήζηεο κπνξνύλ λα δηαβάζνπλ ηηο εηδήζεηο ηεο εκέξαο θαη παξάιιεια λα αθνύλ κνπζηθή κέζσ ελόο δηαδηθηπαθνύ ξαδηνθώλνπ ή λα παξαθνινπζνύλ ην ηειενπηηθό πξόγξακκα κηαο δηαδηθηπαθήο ηειεόξαζεο. Η ρξήζε ηεο εθαξκνγήο γίλεηαη κέζσ ηνπ ηειεθνληξόι ηεο ηειεόξαζεο. Σηελ εηθόλα αλαιύνληαη νη ιεηηνπξγίεο ησλ πιήθηξσλ πνπ ρξεζηκνπνηνύληαη ζηελ εθαξκνγή. Δηθόλα : Σειερεηξηζηήξην θαη ιεηηνπξγίεο Η εθαξκνγή έρεη πινπνηεζεί ζύκθσλα κε ηηο αξρέο ζρεδίαζεο ηεο Samsung. Τν κελνύ βνήζεηαο βξίζθεηαη ζην θάησ κέξνο θαη ηα ππόινηπα ζηνηρεία είλαη δνκεκέλα ζην θεληξηθό πεδίν ηνπ ρώξνπ εξγαζίαο (εηθόλα 4.1.2). Φαηδηόγινπ Γεκήηξηνο Σειίδα 36

37 Δηθόλα : ρέδην θεληξηθνύ κελνύ 4.2 ΑΡΥΗΚΖ ΟΘΟΝΖ Ξεθηλώληαο ηελ εθαξκνγή ν ρξήζηεο βιέπεη ηελ νζόλε θαισζνξίζκαηνο πνπ πεξηέρεη ην ινγόηππν ηνπ παξόρνπ ππεξεζηώλ streaming θαη RSS feed. Σην θάησ κέξνο ππνδεηθλύεηαη πνην πιήθηξν ζα πξέπεη λα παηεζεί (ENTER) έηζη ώζηε λα κπεη ζην θεληξηθό κελνύ ηεο εθαξκνγήο. Δηθόλα : Αξρηθή νζόλε Φαηδηόγινπ Γεκήηξηνο Σειίδα 37

38 4.3 ΔΗΓΖΔΗ RSS Οη εηδήζεηο αληινύληαη δπλακηθά κέζσ RSS. Όηαλ γίλεη ελεκέξσζε ησλ RSS ζην site ηνπ παξόρνπ ηόηε ζα αλαλεσζνύλ θαη νη εηδήζεηο ζηελ εθαξκνγή (απαξαίηεηε ε επαλεθθίλεζε ηεο εθαξκνγήο). Ο ρξήζηεο κπνξεί λα πινεγεζεί ζην κελνύ ησλ ηίηισλ κε ηα πιήθηξα UP θαη DOWN. Ο ηίηινο ηνπ επηιεγκέλνπ άξζξνπ αιιάδεη ζε θόθθηλν ρξώκα. Δηθόλα : Άξζξα ζηελ επηινγή ηίηιωλ Παηώληαο ην πιήθηξν RIGHT αιιάδνπλ νη ιεηηνπξγίεο ησλ πιήθηξσλ UP/DOWN θαη αληί γηα πινήγεζε ζην κελνύ, θάλνπλ πινήγεζε ζην επηιεγκέλν άξζξν (Scroll- Up/Down). Τν πεξίγξακκα ηνπ πεδίνπ ησλ άξζξσλ αιιάδεη ζε θόθθηλν ρξώκα γηα λα θαηαηνπίζεη ην ρξήζηε ζε πνην θνκκάηη ηεο εθαξκνγήο βξίζθεηαη. Φαηδηόγινπ Γεκήηξηνο Σειίδα 38

39 Δηθόλα : Άξζξα ζηελ επηινγή θπξίωο θεηκέλνπ Παηώληαο ην πιήθηξν LEFT, ην επηιεγκέλν άξζξν επηζηξέθεη ζηελ αξρηθή ηνπ ζέζε (ζε πεξίπησζε πνπ έρεη γίλεη Scroll-Up/Down), ην πεξίγξακκα ησλ άξζξσλ γίλεηαη καύξν θαη ην αληίζηνηρν πεξίγξακκα ζην κελνύ ησλ ηίηισλ γίλεηαη θόθθηλν. Σε πεξίπησζε πνπ ρξήζηεο βξίζθεηαη ζην ηειεπηαίν θαηά ζεηξά άξζξν θαη παηήζεη ην πιήθηξν Down ηόηε ζα επηζηξέςεη ζηνλ πξώην θαηά ζεηξά ηίηιν. Παξνκνίσο αλ βξίζθεηαη ζην πξώην άξζξν θαη παηήζεη ην πιήθηξν UP ζα κεηαβεί ζην ηειεπηαίν. 4.4 WEB RADIO Πξόθεηηαη γηα δσληαλή αλακεηάδνζε (live streaming) δηαδηθηπαθνύ ξαδηνθώλνπ. Γηα λα μεθηλήζεη ε αλαπαξαγσγή ζα ρξεηαζηεί λα ελεξγνπνηεζεί ην πιήθηξν PLAY θαη γηα λα ζηακαηήζεη ην πιήθηξν STOP. Με ην πάηεκα ηνπ PLAY μεθηλά ε αλαπαξαγσγή ηεο κνπζηθήο θαη ζηακαηάεη νπνηαδήπνηε άιιε ιεηηνπξγία streaming (web TV). Τν ινγόηππν αιιάδεη από θόθθηλν ζε πξάζηλν γηα λα ππνδειώζεη όηη είλαη ελεξγνπνηεκέλν. Τν πιαίζην αιιάδεη ηίηιν θαη από «Off Air» γίλεηαη «On Air» Φαηδηόγινπ Γεκήηξηνο Σειίδα 39

40 Δηθόλα : Ραδηόθωλν ζε θαηάζηαζε αλαπαξαγωγήο Με ην πάηεκα ηνπ STOP ζηακαηάεη ε ιεηηνπξγία streaming ηεο κνπζηθήο θαη ην ινγόηππν, όπσο επίζεο θαη ην πιαίζην ηίηινπ, επαλαθέξνληαη ζηελ αξρηθή ηνπο θαηάζηαζε. Δηθόλα : Ραδηόθωλν ζε θαηάζηαζε αλακνλήο Τα πιήθηξα VOLUME-UP/DOWN θαη MUTE απμνκεηώλνπλ θαη θιείλνπλ ηελ έληαζε ηνπ ήρνπ. Φαηδηόγινπ Γεκήηξηνο Σειίδα 40

41 4.5 WEB TV Η web TV κεηαδίδεη δσληαλά (live streaming) ην πξόγξακκα πνπ έρεη θαζνξίζεη ν πάξνρνο ηεο ππεξεζίαο. Γηα λα μεθηλήζεη ε κεηάδνζε ζα πξέπεη πξώηα λα παηεζεί ην πιήθηξν Β (πξάζηλν). Παηώληαο ην πξάζηλν πιήθηξν μεθηλά ε αλαπαξαγσγή ηνπ ηειενπηηθνύ πξνγξάκκαηνο θαη ζηακαηάεη νπνηαδήπνηε ιεηηνπξγία streaming (web radio). Παηώληαο ην πιήθηξν Α (θόθθηλν) ζηακαηάεη ε ξνή ην πξνγξάκκαηνο. Δηθόλα : web TV Αλ ν ρξήζηεο παηήζεη ην πιήθηξν C (θίηξηλν), αιιάδεη ε ζθελή πνπ βιέπεη ν ρξήζηεο θαη ε web TV πεξλάεη ζε full screen mode. Γηα λα επηζηξέςεη ζην αξρηθό κελνύ ζα παηήζεη ην πιήθηξν RETURN. Φαηδηόγινπ Γεκήηξηνο Σειίδα 41

42 Δηθόλα : Full Screen Mode 4.6 ΚΑΗΡΟ ΚΑΗ ΧΡΑ Τν πεδίν ηεο ώξαο δείρλεη ηελ εθάζηνηε ώξα ζε εηθνζηηεηξάσξε κνξθή. Τν πεδίν θαηξόο ελεκεξώλεη ην ρξήζηε γηα ηα θαηξηθά θαηλόκελα θαη ηε ζεξκνθξαζία ζε ηέζζεξηο κεγάιεο πόιεηο γηα ηελ εθάζηνηε εκέξα. Η ελεκέξσζε παξέρεηαη από ην weather.gr. Δηθόλα : Καηξόο θαη ώξα Φαηδηόγινπ Γεκήηξηνο Σειίδα 42

43 Δηθόλα : Καηξόο ζηηο ηέζζεξεηο επηιεγκέλεο πόιεηο 4.7 HELP BAR Σην θάησ κέξνο ηεο εθαξκνγήο ππάξρεη ην κελνύ βνήζεηαο ζην νπνίν ν ρξήζηεο κπνξεί λα δεη ηε ρξήζε ηνπ θάζε πιήθηξνπ ζηελ παξνύζα εθαξκνγή. Δηθόλα : Help-bar home menu Παηώληαο ην πιήθηξν C (full screen mode θεθάιαην 4.5), ην κελνύ βνήζεηαο ζα αιιάμεη θαη ζα πξνζαξκνζηεί ζηηο εθάζηνηε ιεηηνπξγίεο. Φαηδηόγινπ Γεκήηξηνο Σειίδα 43

44 Δηθόλα : Help-bar Full Screen menu Φαηδηόγινπ Γεκήηξηνο Σειίδα 44

45 5 ΒΗΒΛΗΟΓΡΑΦΗΑ ΒΗΒΛΗΑ Lemay Colburn (2011) - Πιήξεο εγρεηξίδην ηεο HTML θαη CSS (6 ε έθδνζε) David Sawyer McFarland (2011) - JavaScript & jquery: The Missing Manual John L. Pollock (2006) - Οδεγόο ηεο JavaScript ΗΣΟΔΛΗΓΔ jquery.com eating_samsung_apps_content.htm _screen_layout.html Φαηδηόγινπ Γεκήηξηνο Σειίδα 45