Comments
Transcript
ΑΝΩΣΑΣΟ ΣΔΥΝΟΛΟΓΙΚΟ ΔΚΠΑΙΓΔΤΣΙΚΟ ΙΓΡΤΜΑ ΚΡΗΣΗ
ΑΝΩΣΑΣΟ ΣΔΥΝΟΛΟΓΙΚΟ ΔΚΠΑΙΓΔΤΣΙΚΟ ΙΓΡΤΜΑ ΚΡΗΣΗ τολή Σετνολογικών Δθαρμογών Σμήμα Δθαρμοζμένης Πληροθορικής και Πολσμέζων Πηστιακή Δργαζία «τεδίαζη εικονικού τώροσ ομάδας με ηην τρήζη ηοσ Liferay CMS» Παηεράκης Κσριάκος Δπιβλέπων καθηγηηής : Ακοσμιανάκης Γημοζθένης Ηράκλειο Μάιος 2010 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Πίνακας περιεχομένων 1.ΕΙΑΓΩΓΗ ........................................................................................................................... 3 2.ΕΙΑΓΩΓΙΚΕ ΕΝΝΟΙΕ ........................................................................................................ 3 2.1 TI EINAI PORTAL........................................................................................................... 3 2.2 ΔΟΜΗ ΕΛΙΔΩΝ Ε ΕΝΑ PORTAL .................................................................................. 4 2.3 ΣΙ ΕΙΝΑΙ ΤΣΗΜΑ ΔΙΑΧΕΙΡΙΗ ΠΕΡΙΕΧΟΜΕΝΟΤ-CMS ................................................. 5 2.3.1 Δημιουργία περιεχομζνου .................................................................................... 6 2.3.2 Διαχείριςη περιεχομζνου ..................................................................................... 7 2.3.3 Δημοςίευςη περιεχομζνου .................................................................................. 7 2.3.4 Παρουςίαςη και πρόςβαςη ςτο περιεχόμενο ...................................................... 8 2.4 LIFERAY ΚΑΙ ΔΤΝΑΣΟΣΗΣΕ ......................................................................................... 8 2.4.1 Κφρια Χαρακτηριςτικά ......................................................................................... 8 2.4.2 Εγκατάςταςη του Liferay Portal .......................................................................... 13 2.4.3 Σεχνολογίεσ Που Χρηςιμοποιήθηκαν ................................................................. 21 3. ΠΡΟΘΗΚΗ ΠΕΡΙΕΧΟΜΕΝΟΤ ΣΟ LIFERAY ..................................................................... 49 3.1 LIFERAY JOURNAL PORTLET ....................................................................................... 49 3.2 ΔΗΜΙΟΤΡΓΙΑ ΑΡΘΡΟΤ ΣΟ LIFERAY ........................................................................... 49 3.2.1 Δημιουργία δομήσ (structure). .......................................................................... 50 3.2.2 Δημιουργία προτφπου παρουςίαςησ (template) ............................................... 53 3.2.3 Δημιουργία άρθρου (article) ............................................................................. 56 4. ΠΑΡΟΤΙΑΗ ΙΣΟΕΛΙΔΑ & TEMPLATES ...................................................................... 58 4.1 ΠΑΡΟΤΙΑΗ ΙΣΟΕΛΙΔΑ ........................................................................................ 58 4.2 ΠΑΡΟΤΙΑΗ TEMPLATES .......................................................................................... 62 4.2.1 JQUERY TABS ..................................................................................................... 62 4.2.2 LEFT NAVIGATION MENU .................................................................................. 72 4.2.3 SIMPLE “ACCORDION” MENU ............................................................................. 81 4.2.4 HIGHSLIDE IMAGE GALLERY ............................................................................... 87 4.2.4 SLIDING CONTENT ............................................................................................ 101 5. ΕΝΑΡΙΑ ΧΡΗΗ ......................................................................................................... 119 5.1 Εγγραφή Χρήςτη - Είςοδοσ ςτο φςτημα – Διαχείρηςη Προφίλ .............................. 119 6. ΤΜΠΕΡΑΜΑΣΑ .......................................................................................................... 122 7. ΒΙΒΛΙΟΓΡΑΦΙΑ .............................................................................................................. 123 1 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Ευχαριστίες Με ηελ νινθιήξσζε ηεο παξνύζαο πηπρηαθήο ζα ήζεια λα επραξηζηήζσ ηελ νηθνγέλεηα κνπ, πνπ κε ηελ ππνζηήξημε θαη ζπκπαξάζηαζε ηεο κνπ έδσζε ηελ δπλαηόηεηα λα νινθιεξώζσ ηηο ζπνπδέο κνπ ζηελ ηξηηνβάζκηα εθπαίδεπζε. Θα ήζεια επίζεο λα επραξηζηήζσ ζεξκά ηνλ θύξην Αθνπκηαλάθε Δεκνζζέλε πνπ κνπ έδσζε ηελ δπλαηόηεηα λα εξγαζηώ ζην εξγαζηήξην Σερλνινγίαο θαη πζηεκάησλ Λνγηζκηθνύ ζηα πιαίζηα ηεο πξαθηηθήο κνπ άζθεζεο. Η βνήζεηα ηνπ ήηαλ πνιύηηκε θαζώο θαη νη πξνζπάζεηεο ηνπ γηα ηελ βειηίσζε ηεο εθπαίδεπζεο ζην Σκήκα καο αλεθηίκεηεο. Σνλ επραξηζηώ θαη ηνλ πξνηξέπσ λα ζπλερίζεη έηζη γλσξίδνληαο όηη νη ζπλζήθεο πνπ επηθξαηνύλ δελ είλαη νη θαιύηεξεο δπλαηέο. Γπραξηζηώ επίζεο ηνλ θύξην Βηδάθε Νηθόιαν θαζώο θαη ηνπο ζπλεξγάηεο κνπ ζην εξγαζηήξην - Γηάλλε, Γηώξγν θαη Δεκήηξε - γηα ηελ θαζνδήγεζε θαη ηελ βνήζεηα ηνπο. 2 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 1.ΔΙΑΓΩΓΗ θνπόο ηεο πηπρηαθήο είλαη ε πινπνίεζε ηεο ηζηνζειίδαο ηνπ εξγαζηεξίνπ Σερλνινγίαο θαη πζηεκάησλ Λνγηζκηθνύ. Γηα ηελ θαηαζθεπή ζα ρξεζηκνπνηεζεί ην ύζηεκα Δηαρείξηζεο Πεξηερνκέλνπ Liferay, ην νπνίν είλαη αλνηρηνύ θώδηθα θαη βαζίδεηαη ζηε γιώζζα πξνγξακκαηηζκνύ java.Θα ρξεζηκνπνηεζνύλ επίζεο νη ηερλνινγίεο JSP, HTML, JavaScript, jQuery θαη XML. Αξρηθά ζα γίλεη αλαθνξά ζην Liferay θαη ηηο δπλαηόηεηεο ηνπ θαζώο θαη παξνπζίαζε ησλ ηερλνινγηώλ πνπ ρξεζηκνπνηήζεθαλ γηα ηελ δεκηνπξγία ηεο ηζηνζειίδαο. ηε ζπλέρεηα ζα παξνπζηαζηεί ε ζειίδα ηνπ εξγαζηεξίνπ θαη ηα templates πνπ πινπνηήζεθαλ. Σειεηώλνληαο ζα πεξηγξαθνύλ ζελάξηα ρξήζεο ηνπ Portal. 2.ΔΙΑΓΩΓΙΚΔ ΔΝΝΟΙΔ 2.1 TI EINAI PORTAL Σν Liferay είλαη έλα Portal δειαδή κηα web εθαξκνγή ε νπνία ελεξγεί σο «πύιε» κεηαμύ ησλ ρξεζηώλ θαη κηαο ζεηξάο δηαθνξεηηθώλ, πςεινύ επηπέδνπ, εθαξκνγώλ (portlets). Σα Portals παξέρνπλ ηα απαξαίηεηα εξγαιεία γηα ηελ ζπιινγή πιεξνθνξηώλ από δηαθνξεηηθέο πεγέο θαη ηελ απεηθόληζε ηνπο κέζσ ελόο εληαίνπ ζεκείνπ πξόζβαζεο. Οη ζεκαληηθόηεξεο ιεηηνπξγίεο ελόο Portal είλαη νη εμήο: Search and navigation: Απνδνηηθή αλαδήηεζε θαη εύξεζε πιεξνθνξίαο. Δειαδή πξέπεη λα παξνπζηάδεη απηόκαηα ηελ πιεξνθνξία θαη ηηο ππεξεζίεο πνπ ζα ρξεηαδόηαλ έλαο ρξήζηεο ηελ θαηάιιειε ζηηγκή, ζύκθσλα κε ην πξνθίι ηνπ. Portlet container: Έλαο portlet container ειέγρεη ην θύθιν δσήο ηνπ portlet θαη ηνπ παξέρεη ην απαηηνύκελν πεξηβάιινλ εθηέιεζεο. Γπίζεο είλαη ππεύζπλνο γηα ηελ αξρηθνπνίεζε θαη ηνλ ηεξκαηηζκό ηνπ portlet θαζώο θαη γηα ηελ κεηαθνξά ησλ αηηήζεσλ ησλ ρξεζηώλ ζε απηό. 3 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Content aggregator :Μηα από ηηο θύξηεο εξγαζίεο ελόο Portal είλαη λα αζξνίδεη ην πεξηερόκελν πνπ παξάγεηαη από ηα portlet. Common services: Δηάθνξεο ππεξεζίεο πνπ παξέρεη ην Portal όπσο: Single sign on: Γπηηξέπεη ζηνπο ρξήζηεο ηελ πξόζβαζε ζε όιεο ηηο εθαξκνγέο θάλνληαο login κόλν κηα θνξά ρσξίο λα είλαη απαξαίηεην λα θάλνπλ log in ζε θάζε εθαξκνγή ρσξηζηά. Personalization: Παξέρεη ζηνλ ρξήζηε ηελ δπλαηόηεηα λα επηιέγεη ηελ πιεξνθνξία θαη ηηο ππεξεζίεο πνπ ηνλ ελδηαθέξνπλ θαη λα πξνζαξκόδεη ηελ παξνπζίαζή ηνπο ζύκθσλα κε ηηο απαηηήζεηο ηνπ. Η εμαηνκίθεπζε είλαη δσηηθήο ζεκαζίαο γηα ηελ παξάδνζε ησλ ζσζηώλ πιεξνθνξηώλ ζηνπο ρξήζηεο: θάζε ρξήζηεο παίξλεη κόλν ηηο πιεξνθνξίεο πνπ πξνζαξκόδνληαη ζπγθεθξηκέλα ζηηο αλάγθεο ηνπ/ηεο. Η εμαηνκίθεπζε βαζίδεηαη ζηνπο ξόινπο ησλ ρξεζηώλ. 2.2 ΓΟΜΗ ΔΛΙΓΩΝ Δ ΔΝΑ PORTAL Κάζε ζειίδα ζε έλα Portal απνηειείηαη από έλα ή πεξηζζόηεξα portlets. To Portlet είλαη έλα web component (κηθξή εθαξκνγή) ην νπνίν δεκηνπξγείηαη ζε έλα portlet container θαη παξάγεη δπλακηθό πεξηερόκελν. Γηα παξάδεηγκα ε ζειίδα ηνπ e-kones ζηελ παξαθάησ εηθόλα απνηειείηαη από 6 portlets.. 4 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Κάζε portlet απνηειείηαη από δπν κέξε: Σν πξώην κέξνο είλαη ην decoration ην νπνίν απνθαζίδεη πώο ν ηίηινο, ηα θνπκπηά ειέγρνπ θαη ηα άιια ζηνηρεία ηνπ portlet ζα εκθαληζηνύλ. Σν δεύηεξν κέξνο είλαη ην portlet fragment ην νπνίν είλαη ην πεξηερόκελν ηνπ portlet. Σν πεξηερόκελν ελόο portlet κπνξεί λα πνηθίιεη αλάινγα κε ηα δηθαηώκαηα πξόζβαζεο (user configuration) πνπ έρεη έλαο ρξήζηεο ζην ζπγθεθξηκέλν portlet. Οη web clients αιιειεπηδξνύλ κε ηα portlet κέζσ κηαο δηαδηθαζίαο αίηεζεο/απάληεζεο πνπ πινπνηείηαη από ην portal. 2.3 ΣΙ ΔΙΝΑΙ ΤΣΗΜΑ ΓΙΑΥΔΙΡΙΗ ΠΔΡΙΔΥΟΜΔΝΟΤ-CMS Σν Liferay Portal πεξηιακβάλεη ύζηεκα Δηαρείξηζεο Πεξηερνκέλνπ ή Content Management System.Σα πζηήκαηα Δηαρείξεζεο Πεξηερνκέλνπ είλαη πςειώλ πξνδηαγξαθώλ πξνγξάκκαηα θαηαζθεπήο ηζηνζειίδσλ θαη δπλακηθώλ εθαξκνγώλ πνπ ιεηηνπξγνύλ ζηνλ εμππεξεηεηή (server) θαη επηηξέπνπλ ζε κέζνπο ρξήζηεο ηνπ Δηαδηθηύνπ λα δηαρεηξίδνληαη κε απιό ηξόπν (π.ρ. κε εηζαγσγή ζηνηρείσλ ζε θόξκεο) ην πεξηερόκελν δηθηπαθώλ ηόπσλ. Σα ΔΠ κπνξνύλ επίζεο λα πεξηγξαθνύλ σο κεραληζκνί πινήγεζεο πνπ ππάξρνπλ ζε ζηαζεξή ζέζε ζε όιεο ηηο ζειίδεο ελόο δηθηπαθνύ ηόπνπ θαη έηζη επηηξέπνπλ ζηνπο ρξήζηεο λα δηαρεηξίδνληαη νη ίδηνη ηελ δηαδηθαζία πινήγεζεο ζην πεξηερόκελν θαη λα ζπλζέηνπλ δηθηπαθνύο ηόπνπο κε HTML θαη αξρεία άιισλ ηύπσλ (όπσο ηα Word documents). Μεξηθέο από ηηο δπλαηόηεηεο πνπ πξνζθέξεη έλα ΔΠ είλαη: Δπλαηόηεηα ππνζηήξημεο ζύγρξνλεο θαη αζύγρξνλεο επηθνηλσλίαο (π.ρ. forum ή chat αληίζηνηρα, θνθ). Δπλαηόηεηα αιιειεπίδξαζεο κε βάζε δεδνκέλσλ. Δπλαηόηεηα δηαρείξηζεο ηνπ πεξηερνκέλνπ(Content) θαη ησλ ρξεζηώλ. Δπλαηόηεηα δεκηνπξγίαο νκάδσλ ρξεζηώλ κε δηαβάζκηζε ησλ δπλαηνηήησλ πξόζβαζεο ζε πεξηερόκελν θαη ππεξεζίεο (δηαθνξεηηθά permissions). 5 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Σα νθέιε πνπ πξνθύπηνπλ από ηελ εθαξκνγή θαη ρξήζε ελόο ζπζηήκαηνο δηαρείξηζεο πεξηερνκέλνπ (ΔΠ) είλαη πνιιά θαη ζεκαληηθά θαη πεξηιακβάλνπλ, κεηαμύ άιισλ θαλνληθνπνίεζε ηεο δηαδηθαζίαο δεκηνπξγίαο ηεο πιεξνθνξίαο, ηαρύηεξνπο ρξόλνπο δεκηνπξγίαο λέσλ ζειίδσλ θαη αιιαγώλ ζε ππάξρνπζεο, κεγαιύηεξε ζπλέπεηα ζηελ εκθάληζε, βειηησκέλε πινήγεζε ζε κία ηζηνζειίδα, απμεκέλε επειημία, ππνζηήξημε απνθεληξνπνηεκέλνπ ζπζηήκαηνο ελεκέξσζεο, απμεκέλε αζθάιεηα, κείσζε ηεο επαλάιεςεο ηεο πιεξνθνξίαο, απμεκέλε δπλαηόηεηα επέθηαζεο, κεησκέλν θόζηνο ζπληήξεζεο, πιήξεο ππνζηήξημε ησλ επηρεηξεκαηηθώλ ζηόρσλ θαη ηεο ζηξαηεγηθήο κηαο επηρείξεζεο ή νξγαληζκνύ θαη πνιιά άιια. Γηα λα πινπνηήζνπλ ηηο παξαπάλσ απαηηήζεηο ηα ΔΠ ζπλήζσο ππνζηεξίδνπλ ηέζζεξηο βαζηθέο ιεηηνπξγίεο πνπ είλαη: Η δεκηνπξγία πεξηερνκέλνπ. Η δηαρείξηζε πεξηερνκέλνπ. Η δεκνζίεπζε πεξηερνκέλνπ. Η παξνπζίαζε πεξηερνκέλνπ. 2.3.1 Γημιοσργία Περιετομένοσ Σν πξώην ηκήκα ελόο πζηήκαηνο Δηαρείξηζεο Πεξηερνκέλνπ, είλαη έλα εύρξεζην πεξηβάιινλ ζπγγξαθήο πιεξνθνξίαο, ζρεδηαζκέλν λα ιεηηνπξγεί παξέρνληαο βαζηθέο ιεηηνπξγίεο όπσο π.ρ. απηέο ηνπ θιαζζηθώλ θεηκελνγξάθσλ (π.ρ. MS-Word). Έηζη, αθόκε θαη νη ρξήζηεο ρσξίο ηδηαίηεξε ηερληθή γλώζε, κπνξνύλ λα δεκηνπξγνύλ λέεο ζειίδεο ή λα ελεκεξώλνπλ ην πεξηερόκελν παιαηώλ, ρσξίο λα ρξεηάδεηαη λα γλσξίδνπλ HTML ή θάπνηα άιιε γιώζζα δεκηνπξγίαο ηζηνζειίδσλ. Γπίζεο ην ΔΠ επηηξέπεη ηε δηαρείξηζε ηεο δνκήο ηεο ηζηνζειίδαο, δειαδή ηνλ αθξηβή πξνζδηνξηζκό ηνπ πνπ ζα ηνπνζεηεζνύλ νη λέεο ζειίδεο θαη ηνπ ηξόπν αιιεινζύλδεζήο ηνπο. Κάπνηα ζπζηήκαηα επηηξέπνπλ ηελ εύθνιε αλαδηάξζξσζε ηεο ηζηνζειίδαο ρσξίο λα δεκηνπξγνύληαη "ζπαζκέλα" links. ρεδόλ όια ηα ΔΠ πξνζθέξνπλ έλα εύρξεζην πεξηβάιινλ επεμεξγαζίαο θεηκέλνπ κέζσ ηνπ browser, γεγνλόο πνπ απινπνηεί αθόκε πεξηζζόηεξν ηελ πινπνίεζε ηνπ ζπζηήκαηνο θαη επηηξέπεη ηελ απνκαθξπζκέλε ελεκέξσζε ηνπ πεξηερνκέλνπ θαη ηνπ ηζηνηόπνπ. Απηή αθξηβώο ε δπλαηόηεηα απνηειεί έλα από ηα θιεηδηά ηεο επηηπρίαο ελόο ΔΠ. Γπίζεο ε δεκηνπξγία ηνπ πεξηερνκέλνπ θαη ησλ ζειίδσλ κπνξεί λα ελζσκαησζεί ζηε δηαδηθαζία ηεο θαζεκεξηλήο ιεηηνπξγίαο κηαο επηρείξεζεο ή ελόο θνξέα. 6 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 2.3.2 Γιατείριζη περιετομένοσ Μεηά ηε δεκηνπξγία ηεο, κηα ζειίδα απνζεθεύεηαη ζην θεληξηθό ζύζηεκα ηνπ ΔΠ. Γθεί απνζεθεύεηαη όιν ην πεξηερόκελν ηεο ηζηνζειίδαο θαζώο θαη όιεο νη ζρεηηθέο κε απηό πιεξνθνξίεο ππνζηήξημεο. Έηζη πξνζθέξεηαη κία πιεηάδα ρξήζηκσλ ραξαθηεξηζηηθώλ όπσο: Παξαθνινύζεζε όισλ ησλ εθδόζεσλ κηαο ζειίδαο θαζώο θαη πνηνο έθαλε ηηο αιιαγέο θαη πόηε. Δηαζθάιηζε όηη νη αιιαγέο ζε θάζε ηκήκα ηεο ηζηνζειίδαο κπνξνύλ λα γίλνπλ κόλν από άηνκα ζηα νπνία έρεη δνζεί ην δηθαίσκα αιιαγώλ ζην ζπγθεθξηκέλν ηκήκα. Οινθιήξσζε (Integration) κε άιια ππάξρνληα ζπζηήκαηα πιεξνθνξηθήο ππνζηήξημεο Αθόκε πην ζεκαληηθό είλαη ην γεγνλόο όηη, έλα ΔΠ παξέρεη κηα ζεηξά από δπλαηόηεηεο ειέγρνπ ηεο ξνήο ηεο εξγαζίαο. Παξαδείγκαηνο ράξηλ, αλ ππνζέζνπκε όηη κε ηε δεκηνπξγία κηαο ζειίδαο από έλα ζπληάθηε, απηή απνζηέιιεηαη απηόκαηα ζηνλ πξντζηάκελν ηνπ ζπληάθηε γηα έγθξηζε θαη ζηε ζπλέρεηα ζηελ νκάδα ηεο ηζηνζειίδαο γηα ηελ επηκέιεηα ηνπ πεξηερνκέλνπ ηεο. Σν ηειηθό απνηέιεζκα (δει. Η ηζηνζειίδα κε ην ελεκεξσκέλν πεξηερόκελν) ζηέιλεηαη θαη ζην λνκηθό ηκήκα γηα ηελ έγθξηζε πξηλ δεκνζηεπζεί απηόκαηα ζηνλ ηζηόηνπν. ε θαζέλα από ηα παξαπάλσ βήκαηα, ην ΔΠ παξαθνινπζεί ηελ θαηάζηαζε ηεο ζειίδαο θαη ελεκεξώλεη ηα αξκόδηα ηκήκαηα θαη αλζξώπνπο γηα ηελ πξόνδν ηεο. Με απηό ηνλ ηξόπν, κπνξνύλ λα απαζρνιεζνύλ πεξηζζόηεξα άηνκα ζηε δηαρείξηζε ηνπ ηζηνηόπνπ, δηαηεξώληαο ηαπηόρξνλα ηνλ απζηεξό έιεγρν ηεο πνηόηεηαο, αθξίβεηαο θαη ζπλέπεηαο ηεο πιεξνθνξίαο. 2.3.3 Γημοζίεσζη περιετομένοσ Όηαλ νινθιεξσζεί ε δεκηνπξγία ηνπ ηειηθνύ εγγξάθνπ, απηό κπνξεί λα δεκνζηεπζεί ζηελ ηζηνζειίδα. Σα ΔΠ δηαζέηνπλ ηζρπξνύο κεραληζκνύο δεκνζίεπζεο, νη νπνίνη επηηξέπνπλ ηελ απηόκαηε κνξθνπνίεζε ηεο ζειίδαο θαηά ηε δεκνζίεπζή ηεο, ελώ κπνξνύλ λα επηηξέςνπλ ηελ ηαπηόρξνλε δεκνζίεπζε ηνπ ίδηνπ πεξηερνκέλνπ ζε πνιιαπιέο ηζηνζειίδεο. Φπζηθά, θάζε 7 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 ηζηνζειίδα έρεη δηαθνξεηηθή εκθάληζε. Έηζη ην ΔΠ επηηξέπεη ζηνπο γξαθίζηεο θαη ζρεδηαζηέο ηζηνζειίδσλ λα θαζνξίζνπλ ηελ εκθάληζε πνπ ζα ρξεζηκνπνηεζεί από ην ζύζηεκα. Οη δπλαηόηεηεο δεκνζίεπζεο δηαζθαιίδνπλ ηε ζηαζεξή θαη νκνηόκνξθε εκθάληζε ησλ ζειίδσλ ζε όιν ηνλ ηζηόηνπν, ηθαλνπνηώληαο πςειέο απαηηήζεηο επρξεζηίαο. Σέινο επηηξέπεη ζηνπο ζπληάθηεο - δεκηνπξγνύο ηνπ πεξηερνκέλνπ λα επηθεληξσζνύλ ζηελ ζπγγξαθή θαη „ζύλζεζε‟ ηεο πιεξνθνξίαο, ειαρηζηνπνηώληαο ην ρξόλν πνπ αθηεξώλεηαη ζ‟ απηή ή αθήλνληαο εμνινθιήξνπ ζην ζύζηεκα ηε θξνληίδα ηεο παξνπζίαζήο ηεο πιεξνθνξίαο. 2.3.4 Παροσζίαζη και πρόζβαζη ζηο περιετόμενο Σν ΔΠ κπνξεί επίζεο λα παξέρεη δηάθνξα ραξαθηεξηζηηθά θαη δπλαηόηεηεο εμαζθαιίδνληαο ηελ πςειή πνηόηεηα θαη απνηειεζκαηηθόηεηα ηεο ηζηνζειίδαο. Γηα παξάδεηγκα, ΔΠ πξνζθέξνπλ εληαίεο δπλαηόηεηεο πινήγεζεο, δεκηνπξγώληαο ηνπο απαξαίηεηνπο ζπλδέζκνπο αλάινγα κε ην ππάξρσλ πεξηερόκελν. Γπίζεο, δηεπθνιύλνπλ ηελ ππνζηήξημε δηαθνξεηηθώλ ηύπσλ browsers θαζώο θαη ρξεζηώλ κε δπζθνιίεο πξόζβαζεο. Σν ΔΠ κπνξεί ηέινο, λα ρξεζηκνπνηεζεί γηα λα θάλεη κηα ηζηνζειίδα δπλακηθή θαη δηαδξαζηηθή, απμάλνληαο θαηαθόξπθα ηελ απνηειεζκαηηθόηεηά ηνπ. 2.4 LIFERAY ΚΑΙ ΓΤΝΑΣΟΣΗΣΔ 2.4.1 Κύρια Υαρακηηριζηικά ηηο πξνεγνύκελεο ελόηεηεο είδακε ηη είλαη Portal θαη ύζηεκα Δηαρείξηζεο Πεξηερνκέλνπ. ε απηήλ ηελ ελόηεηα ζα αλαθεξζνύκε ζην Liferay θαη ζηηο δπλαηόηεηεο ηνπ πνπ καο νδήγεζαλ ζηελ επηινγή ηνπ γηα ηελ πινπνίεζε ηεο ηζηνζειίδαο ηνπ εξγαζηεξίνπ Σερλνινγίαο θαη πζηεκάησλ Λνγηζκηθνύ. Σα θύξηα ραξαθηεξηζηηθά πνπ πξνζθέξεη ην Liferay είλαη ηα εμήο: Ωο Portal: 8 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 To Liferay Portal κε ηελ εγθαηάζηαζή ηνπ παξέρεη πεξηζζόηεξα από 60 portlets πνπ πξνζθέξνπλ δπλαηόηεηεο ηξνπνπνίεζεο ηνπ πεξηβάιινληνο εξγαζίαο, παξέρνπλ εξγαιεία πνπ βνεζνύλ ζηελ ζπλεξγαζία, ζηελ δεκνζίεπζε πεξηερνκέλνπ ζην δηαδίθηπν, ζηελ δηαρείξεζε πεξηερνκέλνπ,ζηελ θνηλσληθή δηθηύσζε θαη άιια... Με ηελ ρξήζε ηνπ δηεπθνιύλεηαη ε ζπλάζξνηζε ηνπ πεξηερνκέλνπ θαη ε πξόζβαζε ζην πεξηερόκελν θαη ηηο εθαξκνγέο κέζσ κηαο αζθαινύο δηαδηθαζίαο εγγξαθήο θαη πηζηνπνίεζεο ρξήζηε ζην ζύζηεκα. Παξέρεη ηελ δπλαηόηεηα ζηνπο δηαρεηξηζηέο ηνπ ζπζηήκαηνο λα αλαζέηνπλ “ξόινπο” ζε κεκνλσκέλνπο ρξήζηεο αιιά θαη ζε νκάδεο ρξεζηώλ ώζηε λα δηαζθαιίδεηαη ε πξόζβαζε ζην πεξηερόκελν αλάινγα κε ηα δηθαηώκαηα ηνπ θάζε ρξήζηε. Οη ρξήζηεο ηνπ Liferay κπνξνύλ λα νκαδνπνηνύληαη ζε κηα ηεξαξρία από νξγαληζκνύο ή θνηλόηεηεο ζηηο νπνίεο αληηζηνηρνύλ δηαθνξεηηθά δηθαηώκαηα ρξήζεο πξνζθέξνληαο έηζη επειημία θαη επθνιία ζηελ δηαρείξηζε ησλ ρξεζηώλ. Γηα παξάδεηγκα ηα κέιε κηαο επηρείξεζεο ε νπνία έρεη παξαξηήκαηα ζε δηάθνξα κέξε ηνπ θόζκνπ κπνξνύλ λα νκαδνπνηεζνύλ αλάινγα κε ηελ ηνπνζεζία πνπ βξίζθνληαη ή ηα ηκήκαηα κηαο επηρείξεζεο κπνξνύλ λα νκαδνπνηεζνύλ ζε θνηλόηεηεο (π.ρ ηκήκα πσιήζεσλ)... Κάζε ηέηνηα νκάδα ή θνηλόηεηα κπνξεί λα έρεη ην δηθό ηεο κέξνο ζην Portal δειάδε μερσξηζηέο ππνζειίδεο, ζύζηεκα δηαρείξεζεο πεξηερνκέλνπ, εκεξνιόγην θαη άιια. Σν πεξηβάιινλ ρξήζεο ηνπ Liferay Portal είλαη ζρεδηαζκέλν ώζηε λα απινπνηεί ρξνλνβόξεο δηαδηθαζίεο όπσο ε αιιαγή ηεο δηάηαμεο κηαο ζειίδαο, ε πξνζζήθε εθαξκνγώλ θαη πεξηερνκέλνπ θαη ε αιιαγή ηεο 9 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 εκθάληζεο κηαο ζειίδαο, θαη αληαπνθξίλεηαη ηαρύηαηα ζηηο εληνιέο ηνπ ρξήζηε παξέρνληαο κηαο επράξηζηε θαη δηαζθεδαζηηθή εκπεηξία ρξήζεο. Σν Liferay Portal επηηξέπεη ζηνπο ρξήζηεο λα κεηαθηλνύλ δηάθνξα ηκήκαηα ηεο ζειίδαο θαη λα ηα ηνπνζεηνύλ όπνπ επηζπκνύλ κέζα ζην Portal κε drag and drop. Με ηελ ρξήζε ζπληνκεύζεσλ νη ρξήζηεο κπνξνύλ λα ηνπνζεηήζνπλ ηα αξρεία πνπ επηζπκνύλ ζε θαηάιιεια ζρεδηαζκέλνπο θαθέινπο θαη απηά λα “αλέβνπλ” απηόκαηα ζηνλ Server. To Liferay Portal παξέρεη ηελ δπλαηόηεηα επηζήκαλζεο δηαδηθηπαθνύ πεξηερνκέλνπ, εγγξάθσλ θαη θαηαρσξήζεσλ ζε forums ώζηε λα δηακνηξαδεηαη ζεκαληηθό πεξηερόκελν κεηαμύ ησλ ρξεζηώλ δπλακηθά. Οη ρξήζηεο κπνξνύλ ζηελ ζπλέρεηα λα αλαδεηήζνπλ ζρεηηθή πιεξνθνξία ζε ζπγθεθξηκέλα portlets, ζε δηαθνξεηηθέο θνηλόηεηεο αιιά θαη ζε νιόθιεξν ην portal. Όινη νη ρξήζηεο δηαζέηνπλ ηηο δηθέο ηνπο ζειίδεο ζην Portal νη νπνίεο κπνξνύλ λα δεκνζηεπηνύλ σο μερσξηζηέο ηζηνζειίδεο κε ην δηθό ηνπο URL. Ο ρξήζηεο κπνξεί λα ηξνπνπνηήζεη ηελ εκθάληζε ηεο ζειίδαο, πνηα εξγαιεία θαη εθαξκνγέο ζα πεξηιακβάλνληαη, ηη έγγξαθα ζα ππάξρνπλ ζηελ βηβιηνζήθε εγγξάθσλ θαζώο θαη πνηνη ζα έρνπλ πξόζβαζε ζε απηά ηα δεδνκέλα. Σν Liferay Portal παξέρεη ππνζηήξημε γηα 22 γιώζζεο. Η αιιαγή αλάκεζα ζηηο δηαζέζηκεο γιώζζεο γίλεηαη κε έλα θιηθ. 10 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Ωο ύζηεκα Δηαρείξηζεο Πεξηερνκέλνπ: Σν Liferay CMS παξέρεη έλα θεληξηθό ζεκείν ζπγθέληξσζεο θαη δηαρείξηζεο ηνπ πεξηερνκέλνπ. Κάζε θνηλόηεηα ζην Portal δηαζέηεη ηελ δηθηά ηεο βηβιηνζήθε εγγξάθσλ θαζώο θαη μερσξηζηή ζπιινγή εηθόλσλ. Με ηελ ρξήζε εηδηθώλ θαθέισλ πνπ ζπκπεξηθέξνληαη ζαλ ζπζθεπέο απνζήθεπζεο ζην δηαδίθηπν όια ηα κέιε κηαο νκάδαο κπνξνύλ λα απνθηήζνπλ απνκαθξπζκέλε πξόζβαζε ζηα αξρεία, ε νπνία θαζνξίδεηαη κε βάζε ηα δηθαηώκαηά ηνπο. Με ηελ ρξήζε ηνπ Liferay παξέρεηαη ε δπλαηόηεηα ζηνπο ρξήζηεο λα αλεβάδνπλ πνιιαπιά αξρεία ζηνλ Server θαη λα ηα ηνπνζεηνύλ ζηελ βηβιηνζήθε εγγξάθσλ, ζηελ ζπιινγή εηθόλσλ ή ζε νπνηνδήπνηε άιιν εξγαιείν πνπ δερεηαη ζπλλεκέλα αξρεία. Οη ρξήζηεο κπνξνύλ επίζεο λα κεηαηξέςνπλ έλαλ ηύπν αξρείνπ ζε θάπνηνλ άιιν (π.ρ από έγγξαθν ηνπ word ζε .pdf) κέζσ ηεο βηβιηνζήθεο εγγξάθσλ. Σν Liferay CMS παξέρεη κεραληζκνύο αλαδήηεζεο πιεξνθνξίαο ζε νιόθιεξν ην Portal, ζε κία θνηλόηεηα, ζε ζπγθεθξηκέλα portlets θαζώο θαη ζε εμσηεξηθέο εθαξκνγέο πνπ έρνπλ ελζσκαησζεί ζην portal. Με ηελ ρξήζε ηνπ Asset Publisher (δηαρείξηζε δεκνζηεύζεσλ) παξέρεηαη ε δπλαηόηεηα δεκνζίεπζεο νπνηνπδήπνηε ηκήκαηνο πεξηερνκέλνπ πνπ βξίζθεηαη ζην Portal εθαξκόδνληαο απηνκαηνπνηεκέλνπο θαλόλεο δεκνζίεπζεο ε επηιέγνληαο ρεηξνθίλεηα ην ηκήκα πξνο δεκνζίεπζε. Σν Liferay CMS δεκηνπξγεί απηόκαηα ράξηεο ζειίδαο (site maps), πνπ επηηξέπνπλ ζηνπο ρξήζηεο λα αλαδηακνξθώλνπλ ηηο ζειίδεο ηνπ portal κε drag and drop. 11 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γθηόο από ηελ δηαρείξηζε ηνπ δηαζέζηκνπ πεξηερνκέλνπ, νη ρξήζηεο κπνξνύλ εύθνια λα δεκηνπξγήζνπλ λέν πεξηερόκελν, από έλα απιό έγγξαθν κε θείκελν θαη εηθόλεο έσο κηα πιήξσο ιεηηνπξγηθή ηζηνζειίδα, ρξεζηκνπνηώληαο εύθνινπο ζηελ ρξήζε ζπληάθηεο θεηκέλνπ. Παξέρνληαη εξγαιεία πνπ απηόκαηα αλαλεώλνπλ ηνπο ράξηεο κε ηελ δηάηαμε ηνπ Portal θαη πξνζζέηνπλ ηηο λεεο ζειίδεο ζηελ ιίζηα πξνο αλαδήηεζε ησλ ζεκαληηθόηεξσλ κεραλώλ αλαδήηεζεο. Η δεκηνπξγία πεξηερνκέλνπ ζην Liferay είλαη απιή θαη εύθνιε. Έλαο ζπληάθηεο θεηκέλνπ κε πινύζηα ραξαθηεξηζηηθά (ελζσκαηώλεη νξζνγξαθηθό έιεγρν θαη επηινγέο αιιαγήο εκθάληζεο θεηκέλνπ) επηηξέπεη ηελ δεκηνπξγία πεξηερνκέλνπ ρσξίο ηελ αλάγθε γλώζεο πξνγξακκαηηζκνύ.. Δίλεηαη ε δπλαηόηεηα ζηνπο ρξήζηεο λα αιιάμνπλ έλα έγγξαθν πνπ έρνπλ δεκνζηεύζεη “δσληαλά”. Δειαδή νη ρξήζηεο κπνξνύλ λα θάλνπλ αιιαγέο ζε κία ζειίδα πνπ έρνπλ δεκνζηεύζεη βιέπνληαο κηα πξνεπηζθόπεζε ησλ αιιαγώλ ζε πξαγκαηηθό ρξόλν. Οη αιιαγέο απηέο δελ θαίλνληαη δεκόζηα παξά κόλν όηαλ ν ρξήζηεο πνπ θάλεη ηηο αιιαγέο ην επηηξέςεη. Όηαλ θάπνηνο ρξήζηεο δελ επηζπκεί λα δεκνζηεπηνύλ νη αιιαγέο πνπ έθαλε άκεζα, κπνξεί λα ξπζκίζεη ην Liferay ώζηε λα ηηο δεκνζηεύζεη απηόκαηα ζε ζπγθεθξηκέλε εκεξνκελία. Με ηε ρξήζε ηνπ Liferay CMS έλα κόλν Portal κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ θηινμελία απεξηόξηζησλ ηζηνζειίδσλ. Κάζε κία από απηέο ηηο ηζηνζειίδεο ζα έρεη ηελ δηθή ηεο δηέπζπλζε (URL), εκθάληζε θαη ιεηηνπξγηθόηεηα (dynamic virtual hosting). Γηα παξάδεηγκα κία ηζηνζειίδα αθηεξσκέλε ζηελ κνπζηθή ζα κπνξνύζε λα πεξηιακβάλεη εθαηνληάδεο ππνζειίδεο κία γηα ηνλ θάζε κνπζηθό. Κάζε ζειίδα 12 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 ζα είρε μερσξηζηή εκθάληζε, δηθό ηεο ζύζηεκα εηζόδνπ-ηαπηνπνίεζεο ρξεζηώλ θαη κνλαδηθή δηεπζπλζε (url) κέζα ζην portal. 2.4.2 Δγκαηάζηαζη ηοσ Liferay Portal Γηα λα πξνκεζεπηνύκε ην Liferay επηζθεπηόκαζηε ηελ ηζηνζειίδα ηνπ θαηαζθεπαζηή www.liferay.com. Η αξρηθή ζειίδα θαίλεηαη ζηελ παξαθάησ εηθόλα. Σν Liferay θπθινθνξεί ζε δύν εθδόζεηο: ηελ Community Edition (CE) θαη ηελ Enterprise Edition (EE). Σα ραξαθηεξηζηηθά ησλ δύν εθδόζεσλ θαίλνληαη ζηελ επόκελε εηθόλα: 13 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 14 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γηα ηελ ζειίδα ηνπ εξγαζηεξίνπ Σερλνινγίαο θαη πζηεκάησλ Λνγηζκηθνύ ρξεζηκνπνηήζεθε ε Community Edition ε νπνία πξνζθέξεηαη δσξεάλ, ζε ζπλδπαζκό κε ηνλ Server Tomcat 5.5 (ππνζηεξίδνληαη επίζεο νη JBoss, Geronimo, Glassfish, Resin, JOnAS, Jetty θαη άιινη). Σα βήκαηα εγθαηάζηαζεο ηνπ Liferay είλαη ηα εμήο: 1. Καηεβάδνπκε από ηελ ηζηνζειίδα ηνπ θαηαζθεπαζηή ην αξρείν εγθαηάζηαζεο θαη απνζπκπηέδνπκε ην ζπκπηεζκέλν αξρείν ζε έλαλ θάθειν ηεο επηινγήο καο. 2. Γγθαζηζηνύκε ηελ βάζε δεδνκέλσλ πνπ ζα ρξεζηκνπνηήζνπκε (MySQL). Από ηε ηζηνζειίδα ηνπ θαηαζθεπαζηή www.mysql.com θαηεβάδνπκε ηελ ηειεπηαία έθδνζε ηνπ MySQL Server, θαζώο θαη ηα MySQL GUI Tools (πξνζθέξνπλ γξαθηθό πεξηβάιινλ εξγαζίαο) πνπ πεξηιακβάλνπλ ηα εμήο εξγαιεία: MySQL Query Browser – database browsing and querying tool. MySQL Administrator- administration utility that enables the end user to create databases and user IDs graphically. MySQL Connector which is the JDBC driver for MySQL. Γγθαζηζηνύκε ηα εξγαιεία θαη μεθηλάκε ηνλ MySQL Server Instance Configuration Wizard ( Έλαξμε-> Όια ηα πξνγξάκκαηα-> MySQL-> MySQL Server-> MySQL Server Instance Configuration Wizard). Οη πξνηεηλόκελεο ξπζκίζεηο θαίλνληαη ζηηο παξαθάησ εηθόλεο: 15 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 16 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 17 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 18 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Όηαλ νινθιεξσζνύλ νη ξπζκίζεηο αλνίγνπκε ηνλ MySQL Query Browser θαη δεκηνπξγνύκε λέν ζρήκα βάζεο κε όλνκα istlabdb. 3. πλδένπκε ην Liferay κε ηελ MySQL. Γηα λα ζπλδέζνπκε ην Liferay κε ηελ MySQL βξίζθνπκε ην αξρείν ROOT.xml (<Tomcat Home>/conf/Catalina/localhost/root.xml). Αλνίγνπκε ην αξρείν θαη βάδνπκε ζε ζρόιηα ηελ θαηαρώξηζε πνπ αθνξά ηελ HSQL. Έπεηηα βγάδνπκε από ηα ζρόιηα ηελ θαηαρώξηζε πνπ αθνξά ηελ MySQL όπσο παξαθάησ: <Resource name="jdbc/LiferayPool" auth="Container" type="javax.sql.DataSource" driverClassName="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/istlabdb?useUnicode=true&characterEnco ding=UTF-8&useFastDateParsing=false" username="root" password="" maxActive="20" /> Απνζεθεύνπκε ην αξρείν. 19 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 4. Ξεθηλάκε ηνλ Server. Γηα λα ηξέμεη νπνηαδήπνηε εγθαηάζηαζε ηνπ Liferay ρξεηάδεηαη ην Java Development Kit ή JDK. Από ηελ ηζηνζειίδα ηνπ θαηαζθεπαζηή www.java.sun.com θαηεβάδνπκε ηελ ηειεπηαία έθδνζε ηνπ JDK θαη ηελ εγθαζηζηάκε ζηνλ ππνινγηζηή καο. Έπεηηα δεκηνπξγνύκε ηηο εμήο κεηαβιεηέο πεξηβάιινληνο: PATH C:\Program Files\Java\jdk1.6.0_01\bin; JAVA_HOME C:\Program Files\Java\jdk1.6.0 (Έλαξμε->Πίλαθαο Γιέγρνπ-> ύζηεκα-> Ρπζκίζεηο γηα Πξνρσξεκέλνπο>Μεηαβιεηέο Πεξηβάιινληνο). Όηαλ νινθιεξσζεί ε εγθαηάζηαζε ηνπ JDK πεγαίλνπκε ζηνλ θάθειν πνπ απνζεθεύζακε ην Liferay θαη ηξέρνπκε ην αξρείν startup.bat (D:\Liferay\liferayportal-tomcat-6.0-5.1.2\liferay-portal-tomcat-6.0-5.1.2\bin). Θα εκθαληζηεί κία θνλζόια ζθαικάησλ ε νπνία καο ελεκεξώλεη γηα ηελ θαηάζηαζε ηνπ server. Όηαλ νινθιεξσζεί ε εθθίλεζε ηνπ Server αλνίγνπκε ηνλ browser ηεο αξεζθείαο καο θαη γξάθνπκε localhost:8080. Η αξρηθή ζειίδα θαίλεηαη ζηελ παξαθάησ εηθόλα: Σα ζηνηρεία εηζόδνπ ηνπ δηαρεηξηζηή είλαη: Login: [email protected] Password: test 20 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 2.4.3 Σετνολογίες Ποσ Υρηζιμοποιήθηκαν ηελ πξνεγνύκελε ελόηεηα είδακε ηελ δηαδηθαζία εγθαηάζηαζεο ηνπ Liferay. Γηα λα πξνζζέζνπκε πεξηερόκελν θαη λα θαηαιήμνπκε από ηελ θελή αξρηθή ζειίδα ηνπ portal πνπ θαίλεηαη ζηελ πξνεγνύκελε εηθόλα, ζηελ ηειηθή ηζηνζειίδα ηνπ εξγαζηεξίνπ, ζα ρξεζηκνπνηήζνπκε ηηο παξαθάησ ηερλνινγίεο – γιώζζεο πξνγξακκαηηζκνύ: HTML – Hyper Text Markup Language Σα αξρηθά HTML πξνέξρνληαη από ηηο ιέμεηο HyperText Markup Language. Η html ζηελ νπζία δελ είλαη κηα γιώζζα πξνγξακκαηηζκνύ. Γίλαη κηα πεξηγξαθηθή γιώζζα, δειαδή έλαο εηδηθόο ηξόπνο γξαθήο θεηκέλνπ. Ο θαζέλαο κπνξεί λα δεκηνπξγήζεη έλα αξρείν HTML ρξεζηκνπνηώληαο απιώο έλαλ επεμεξγαζηή θεηκέλνπ. Απνηειεί ππνζύλνιν ηεο γιώζζαο SGML (Standard Generalized Markup Language) πνπ επηλνήζεθε από ηελ IBM πξνθεηκέλνπ λα ιπζεί ην πξόβιεκα ηεο κε ηππνπνηεκέλεο εκθάληζεο θεηκέλσλ ζηα δηάθνξα ππνινγηζηηθά ζπζηήκαηα. Ο browser αλαγλσξίδεη απηόλ ηνλ ηξόπν γξαθήο θαη εθηειεί ηηο εληνιέο πνπ πεξηέρνληαη ζε απηόλ. Αμίδεη λα ζεκεησζεί όηη ε html είλαη ε πξώηε θαη πην δηαδεδνκέλε γιώζζα πεξηγξαθήο ηεο δνκήο κηαο ηζηνζειίδαο. Η html ρξεζηκνπνηεί ηηο εηδηθέο εηηθέηεο ( tags) γηα λα δώζεη ηηο απαξαίηεηεο νδεγίεο ζηνλ browser. Σα tags είλαη εληνιέο πνπ ζπλήζσο νξίδνπλ ηελ αξρή ή ην ηέινο κηαο ιεηηνπξγίαο. Σα tags βξίζθνληαη πάληα κεηαμύ ησλ ζπκβόισλ < θαη > π.ρ. <body>. Οη νδεγίεο είλαη case insensitive, δελ επεξεάδνληαη από ην αλ έρνπλ γξαθηεί κε πεδά (κηθξά) ή θεθαιαία. Έλα αξρείν HTML πξέπεη λα έρεη θαηάιεμε htm ή html. Η βαζηθή δνκή κηαο ζειίδαο HTML είλαη ε εμήο: <html> <head> <!-- Σν head πεξηέρεη πιεξνθνξίεο πνπ αθνξά ην αξρείν θαη δελ εκθαλίδεηαη ζηελ νζόλε. --> </head> <body> <!-- ε HTML πνπ ζα εκθαληζηεί --> </body> </html> 21 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 - Σν θείκελν κεηαμύ ησλ <html> θαη </html> πεξηγξάθεη ηελ ηζηνζειίδα. - Σν θείκελν κεηαμύ ησλ <body> θαη </body> είλαη ην πεξηερόκελν πνπ ζα εκθαληζηεί. Οη θπξηόηεξεο εηηθέηεο (tags) ζηελ HTML παξνπζηάδνληαη ζηνλ παξαθάησ πίλαθα: TAG <!--> DESCRIPTION Defines a comment <!DOCTYPE> Defines the document type <a> Defines an anchor <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines contact information for the author/owner of a document <area> Defines an area inside an image-map <b> Defines bold text <base> Defines a default address or a default target for all links on a page <bdo> Defines the text direction <big> Defines big text <blockquote> Defines a long quotation <body> Defines the document's body <br> Defines a single line break <button> Defines a push button <caption> Defines a table caption <cite> Defines a citation <code> Defines computer code text <col> Defines attribute values for one or more columns in a table <colgroup> Defines a group of columns in a table for formatting <dd> Defines a description of a term in a definition list 22 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <del> Defines deleted text <dfn> Defines a definition term <div> Defines a section in a document <dl> Defines a definition list <dt> Defines a term (an item) in a definition list <em> Defines emphasized text <fieldset> Defines a border around elements in a form <form> Defines an HTML form for user input <frame> Defines a window (a frame) in a frameset <frameset> Defines a set of frames <head> Defines information about the document <h1> to <h6> Defines HTML headings <hr> Defines a horizontal line <html> Defines an HTML document <i> Defines italic text <iframe> Defines an inline frame <img> Defines an image <input> Defines an input control <ins> Defines inserted text <kbd> Defines keyboard text <label> Defines a label for an input element <legend> Defines a caption for a fieldset element <li> Defines a list item <link> Defines the relationship between a document and an external resource <map> Defines an image-map <meta> Defines metadata about an HTML document 23 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <noframes> Defines an alternate content for users that do not support frames <noscript> Defines an alternate content for users that do not support client-side scripts <object> Defines an embedded object <ol> Defines an ordered list <optgroup> Defines a group of related options in a select list <option> Defines an option in a select list <p> Defines a paragraph <param> Defines a parameter for an object <pre> Defines preformatted text <q> Defines a short quotation <samp> Defines sample computer code <script> Defines a client-side script <select> Defines a select list (drop-down list) <small> Defines small text <span> Defines a section in a document <strong> Defines strong text <style> Defines style information for a document <sub> Defines subscripted text <sup> Defines superscripted text <table> Defines a table <tbody> Groups the body content in a table <td> Defines a cell in a table <textarea> Defines a multi-line text input control <tfoot> Groups the footer content in a table <th> Defines a header cell in a table <thead> Groups the header content in a table 24 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <title> Defines the title of a document <tr> Defines a row in a table <tt> Defines teletype text <ul> Defines an unordered list <var> Defines a variable part of a text ηελ επόκελε εηθόλα παξνπζηάδνληαη νη πην ζπρλά ρξεζηκνπνηνύκελεο εηηθέηεο ηεο HTML αλά θαηεγνξίεο: Έλαλ πιήξε νδεγό ηεο HTML http://www.w3schools.com/html/default.asp. 25 ζα βξείηε ζηελ ηζηνζειίδα χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 CSS – Cascading Style Sheets Σα αξρηθά CSS πξνέξρνληαη από ηηο ιέμεηο Cascading Style Sheets. Σα styles θαζνξίδνπλ ην πσο ζα εκθαλίδνληαη ηα ζηνηρεία ζε κηα HTML ηζηνζειίδα. Πξνζηέζεθαλ ζηελ έθδνζε 4.0 ηεο HTML γηα λα αληηκεησπηζηεί ην εμήο πξόβιεκα: Η HTML δελ ζρεδηάζηεθε ώζηε λα πεξηέρεη εηηθέηεο κνξθνπνίεζεο ηνπ θεηκέλνπ. θνπόο ηεο είλαη λα θαζνξίδεη ην πεξηερόκελν ηνπ θεηκέλνπ όπσο ζην επόκελν παξάδεηγκα: <h1>This is a heading</h1> <p>This is a paragraph.</p> Όηαλ νη εηηθέηεο όπσο ε <font> θαη νη δπλαηόηεηεο επηινγήο ρξώκαηνο πξνζηέζεθαλ ζηελ HTML 3.2 ε θαηαζθεπή ηζηνζειίδσλ άξρηζε λα γίλεηαη πην πεξίπινθε. Γηδηθόηεξα ε αλάπηπμε ζρεηηθά κεγάισλ ηζηνζειίδσλ, ζηηο νπνίεο θάζε ζειίδα πεξηείρε πιεξνθνξίεο γηα κεγέζε γξακκαηνζεηξάο αιιά θαη επηινγή ρξώκαηνο, έγηλε δύζθνιε θαη ρξνλνβόξα δηαδηθαζία. Γηα ηελ επίιπζε απηνύ ηνπ πξνβιήκαηνο, ην World Wide Web Consortium (W3C) δεκηνύξγεζε ηα CSS. Έηζη ζηελ HTML 4.0, όιεο νη πιεξνθνξίεο κνξθνπνίεζεο κπνξνύζαλ λα αθαηξεζνύλ από ην αξρείν HTML θαη λα απνζεθεπηνύλ μερσξηζηά ζε έλα αξρείν CSS (external style sheet). Με απηό ηνλ ηξόπν απινπνηείηαη ε δηαδηθαζία κνξθνπνίεζεο ηεο ηζηνζειίδαο θαη νινθιεξώλεηαη ηαρύηεξα, αθνύ ρξεηάδεηαη ε επεμεξγαζία ελόο κόλν αξρείνπ. Σα CSS ππνζηεξίδνληαη από όινπο ηνπο πεξηεγεηέο δηαδηθηύνπ. Έλα απιό παξάδεηγκα ζε CSS αθνινπζεί παξαθάησ: 26 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <html> <head> <style type="text/css"> h1 { background-color:#6495ed; } p { background-color:#e0ffff; } div { background-color:#b0c4de; } </style> </head> <body> <h1>CSS background-color example!</h1> <div> This is a text inside a div element. <p>This paragraph has it's own background color.</p> We are still in the div element. </div> </body> </html> ηνλ παξαθάησ πίλαθα παξνπζηάδνληαη νη θπξηόηεξεο ηδηόηεηεο ησλ CSS: Property background Description Sets all the background properties in one declaration CSS 1 background- Sets whether a background image is fixed or scrolls with the 1 attachment rest of the page background-color Sets the background color of an element 1 background-image Sets the background image for an element 1 background- Sets the starting position of a background image 1 Sets how a background image will be repeated 1 position background-repeat 27 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 border Sets all the border properties in one declaration 1 border-bottom Sets all the bottom border properties in one declaration 1 border-bottom- Sets the color of the bottom border 2 Sets the style of the bottom border 2 Sets the width of the bottom border 1 border-color Sets the color of the four borders 1 border-collapse Specifies whether or not table borders should be collapsed 2 border-left Sets all the left border properties in one declaration 1 border-left-color Sets the color of the left border 2 border-left-style Sets the style of the left border 2 border-left-width Sets the width of the left border 1 border-right Sets all the right border properties in one declaration 1 border-right-color Sets the color of the right border 2 border-right-style Sets the style of the right border 2 border-right-width Sets the width of the right border 1 border-spacing Specifies the distance between the borders of adjacent cells 2 border-style Sets the style of the four borders 1 border-top Sets all the top border properties in one declaration 1 border-top-color Sets the color of the top border 2 border-top-style Sets the style of the top border 2 border-top-width Sets the width of the top border 1 border-width Sets the width of the four borders 1 bottom Sets the bottom margin edge for a positioned box 2 caption-side Specifies the placement of a table caption 2 clear Specifies which sides of an element where other floating 1 color border-bottomstyle border-bottomwidth 28 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 elements are not allowed clip Clips an absolutely positioned element 2 color Sets the color of text 1 content Used with the :before and :after pseudo-elements, to insert 2 generated content counter-increment Increments one or more counters 2 counter-reset Creates or resets one or more counters 2 cursor Specifies the type of cursor to be displayed 2 direction Specifies the text direction/writing direction 2 display Specifies the type of box an element should generate 1 empty-cells Specifies whether or not to display borders and background 2 on empty cells in a table float Specifies whether or not a box should float 1 font Sets all the font properties in one declaration 1 font-family Specifies the font family for text 1 font-size Specifies the font size of text 1 font-style Specifies the font style for text 1 font-variant Specifies whether or not a text should be displayed in a small- 1 caps font font-weight Specifies the weight of a font 1 height Sets the height of an element 1 left Sets the left margin edge for a positioned box 2 letter-spacing Increase or decrease the space between characters in a text 1 line-height Sets the line height 1 list-style Sets all the properties for a list in one declaration 1 list-style-image Specifies an image as the list-item marker 1 list-style-position Specifies if the list-item markers should appear inside or 1 outside the content flow list-style-type Specifies the type of list-item marker 1 margin Sets all the margin properties in one declaration 1 29 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 margin-bottom Sets the bottom margin of an element 1 margin-left Sets the left margin of an element 1 margin-right Sets the right margin of an element 1 margin-top Sets the top margin of an element 1 max-height Sets the maximum height of an element 2 max-width Sets the maximum width of an element 2 min-height Sets the minimum height of an element 2 min-width Sets the minimum width of an element 2 orphans Sets the minimum number of lines that must be left at the 2 bottom of a page when a page break occurs inside an element outline Sets all the outline properties in one declaration 2 outline-color Sets the color of an outline 2 outline-style Sets the style of an outline 2 outline-width Sets the width of an outline 2 overflow Specifies what happens if content overflows an element's box 2 padding Sets all the padding properties in one declaration 1 padding-bottom Sets the bottom padding of an element 1 padding-left Sets the left padding of an element 1 padding-right Sets the right padding of an element 1 padding-top Sets the top padding of an element 1 page-break-after Sets the page-breaking behavior after an element 2 page-break-before Sets the page-breaking behavior before an element 2 page-break-inside Sets the page-breaking behavior inside an element 2 position Specifies the type of positioning for an element 2 quotes Sets the type of quotation marks for embedded quotations 2 right Sets the right margin edge for a positioned box 2 table-layout Sets the layout algorithm to be used for a table 2 text-align Specifies the horizontal alignment of text 1 30 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 text-decoration Specifies the decoration added to text 1 text-indent Specifies the indentation of the first line in a text-block 1 text-shadow Specifies the shadow effect added to text 2 text-transform Controls the capitalization of text 1 top Sets the top margin edge for a positioned box 2 unicode-bidi 2 vertical-align Sets the vertical alignment of an element 1 visibility Specifies whether or not an element is visible 2 white-space Specifies how white-space inside an element is handled 1 widows Sets the minimum number of lines that must be left at the 2 top of a page when a page break occurs inside an element width Sets the width of an element 1 word-spacing Increases or decreases the space between words in a text 1 z-index Sets the stack order of an element 2 CSS Pseudo-classes/elements Pseudo name Description CSS :active Adds a style to an element that is activated 1 :after Adds content after an element 2 :before Adds content before an element 2 :first-child Adds a style to an element that is the first child of another 2 element :first-letter Adds a style to the first character of a text 1 :first-line Adds a style to the first line of a text 1 :focus Adds a style to an element that has keyboard input focus 2 :hover Adds a style to an element when you mouse over it 1 :lang Adds a style to an element with a specific lang attribute 2 31 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 :link Adds a style to an unvisited link 1 :visited Adds a style to a visited link 1 ηελ επόκελε εηθόλα παξνπζηάδνληαη ηδηόηεηεο ησλ CSS αλά θαηεγνξία: 32 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Έλαλ πιήξε νδεγό γηα ηα CSS ζα βξείηε ζηελ ηζηνζειίδα http://www.w3schools.com/css/default.asp XSLT - EXtensible Stylesheet Language Transformations Σα αξρηθά XSLT πξνέξρνληαη από ηηο ιέμεηο EXtensible Stylesheet Language Transformations. H XSLT είλαη κηα γιώζζα βαζηζκέλε ζηελ XML ε νπνία ρξεζηκνπνηείηαη γηα λα κεηαηξέςεη έλα XML έγγξαθν ζε έλα άιιν XML έγγξαθν κε δηαθνξεηηθή δνκή, ζε έλα HTML έγγξαθν ή ζε έλαλ άιιν ηύπν εγγξάθνπ πνπ λα αλαγλσξίδεηαη από έλα browser. Σν αξρηθό έγγξαθν δελ αιιάδεη, αιιά δεκηνπξγείηαη έλα λέν έγγξαθν ην νπνίν είλαη βαζηζκέλν ζην πεξηερόκελν ελόο ππάξρνληνο εγγξάθνπ. Η XSLT ζρεδηάζηεθε γηα λα ρξεζηκνπνηείηαη ζαλ κέξνο ηεο XSL, θαη είλαη κηα γιώζζα γηα ην ζρεδηαζκό stylesheet. Έλαο XSLT επεμεξγαζηήο, γηα λα κεηαηξέςεη έλα XML έγγξαθν, ην αλαιύεη ζε κηα δνκή ηξηώλ δέληξσλ: ην δέληξν πεγήο (source tree), ην stylesheet δέληξν (stylesheet tree), θαη ην δέληξν απνηειέζκαηνο (result tree). Η παξαθάησ εηθόλα παξνπζηάδεη ηε ζρέζε κεηαμύ απηώλ ησλ ηξηώλ ζηνηρείσλ. 33 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Σα δέληξα stylesheet θαη πεγήο «ηξνθνδνηνύλ» ηνλ επεμεξγαζηή XSLT, ν νπνίνο παξάγεη έπεηηα ην δέληξν απνηειέζκαηνο. Σν ζηνηρείν ην νπνίν απνηειεί ηε ξίδα ζε έλα XSLT stylesheet είλαη ην <xsl:stylesheet> ή <xsl:transform>. Μπνξνύλ λα ρξεζηκνπνηεζνύλ θαη ηα δύν, αθνύ ζπκπεξηθέξλνληαη αθξηβώο κε ηνλ ίδην ηξόπν. Ο ζσζηόο ηξόπνο γηα λα δεισζεί έλα XSLT stylesheet είλαη: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> ή xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> Γηα λα απνθηήζνπκε πξόζβαζε ζε ζηνηρεία, ηδηόηεηεο θαη ραξαθηεξηζηηθά ηεο XSLT πξέπεη λα δειώζνπκε ηελ έθδνζε ηεο XSLT πνπ ρξεζηκνπνηνύκε ζηελ αξρή ηνπ εγγξάθνπ όπσο παξαθάησ: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> Σν xmlns:xsl="http://www.w3.org/1999/XSL/Transform" αληηζηνηρεί ζηελ επίζεκε έθδνζε ηεο XSLT από ην W3C. Γηα λα ρξεζηκνπνηεζεί πξέπεη λα ζπκπεξηιάβνπκε θαη ην ραξαθηεξηζηηθό version="1.0". Έλα παξάδεηγκα κεηαηξνπήο ηνπ XML εγγξάθνπ "cdcatalog.xml" ζε XHTML κε ηελ ρξήζε ηεο XSLT θαίλεηαη παξαθάησ: Σν έγγξαθν "cdcatalog.xml". <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> 34 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> <cd> <title>Hide your heart</title> <artist>Bonnie Tyler</artist> <country>UK</country> <company>CBS Records</company> <price>9.90</price> <year>1988</year> </cd> . . </catalog> Σν έγγξαθν “cdcatalog.xsl” πνπ ζα ρξεζηκνπνηεζεί γηα ηελ κεηαηξνπή ηνπ "cdcatalog.xml". <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> 35 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 </body> </html> </xsl:template> </xsl:stylesheet> ηελ επόκελε εηθόλα θαίλεηαη ην ηειηθό απνηέιεζκα: Title Artist Empire Burlesque Bob Dylan Hide your heart Bonnie Tyler Greatest Hits Dolly Parton Still got the blues Gary Moore Eros Eros Ramazzotti One night only Bee Gees Sylvias Mother Dr.Hook Maggie May Rod Stewart Romanza Andrea Bocelli When a man loves a woman Percy Sledge Black angel Savage Rose 1999 Grammy Nominees Many For the good times Kenny Rogers Big Willie style Will Smith Tupelo Honey Van Morrison Soulsville Jorn Hoel The very best of Cat Stevens Stop Sam Brown Bridge of Spies T`Pau Private Dancer Tina Turner Midt om natten Kim Larsen 36 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Pavarotti Gala Concert Luciano Pavarotti The dock of the bay Otis Redding Picture book Simply Red Red The Communards Unchain my heart Joe Cocker ηνλ επόκελν πίλαθα παξνπζηάδνληαη ηα θπξηόηεξα ζηνηρεία (elements) ηεο XSLT, πεξηγξαθή ηνπ θάζε ζηνηρείνπ θαζώο θαη νη εθδόζεηο ησλ Mozilla Firefox θαη Internet Explorer πνπ ππνζηήξημαλ πξώηεο ηελ XSLT: Element apply-imports Description IE FF Applies a template rule from an imported style sheet 6.0 1.0 apply-templates Applies a template rule to the current element or to 5.0 1.0 the current element's child nodes attribute Adds an attribute 5.0 1.0 attribute-set Defines a named set of attributes 6.0 1.0 call-template Calls a named template 6.0 1.0 choose Used in conjunction with <when> and <otherwise> to 5.0 1.0 express multiple conditional tests comment Creates a comment node in the result tree 5.0 1.0 copy Creates a copy of the current node (without child 5.0 1.0 nodes and attributes) copy-of Creates a copy of the current node (with child nodes 6.0 1.0 and attributes) decimal-format Defines the characters and symbols to be used when 6.0 1.0 converting numbers into strings, with the formatnumber() function element Creates an element node in the output document 5.0 fallback Specifies an alternate code to run if the processor 6.0 37 1.0 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 does not support an XSLT element for-each Loops through each node in a specified node set 5.0 1.0 if Contains a template that will be applied only if a 5.0 1.0 specified condition is true import Imports the contents of one style sheet into another. 6.0 1.0 Includes the contents of one style sheet into another. 6.0 1.0 Note: An imported style sheet has lower precedence than the importing style sheet include Note: An included style sheet has the same precedence as the including style sheet key Declares a named key that can be used in the style 6.0 1.0 sheet with the key() function message Writes a message to the output (used to report 6.0 1.0 errors) namespace-alias Replaces a namespace in the style sheet to a different 6.0 namespace in the output number Determines the integer position of the current node 6.0 1.0 and formats a number otherwise Specifies a default action for the <choose> element 5.0 1.0 output Defines the format of the output document 6.0 1.0 param Declares a local or global parameter 6.0 1.0 preserve-space Defines the elements for which white space should be 6.0 1.0 preserved processing- Writes a processing instruction to the output 5.0 1.0 sort Sorts the output 6.0 1.0 strip-space Defines the elements for which white space should be 6.0 1.0 instruction removed stylesheet Defines the root element of a style sheet 5.0 1.0 template Rules to apply when a specified node is matched 5.0 1.0 text Writes literal text to the output 5.0 1.0 38 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 transform Defines the root element of a style sheet 6.0 1.0 value-of Extracts the value of a selected node 5.0 1.0 variable Declares a local or global variable 6.0 1.0 when Specifies an action for the <choose> element 5.0 1.0 with-param Defines the value of a parameter to be passed into a 6.0 1.0 template ηνλ επόκελν πίλαθα παξνπζηάδνληαη νη θπξηόηεξεο ζπλαξηήζεηο ηεο XSLT: Name current() Description document() Used to access the nodes in an external XML Returns the current node document element-available() Tests whether the element specified is supported by the XSLT processor format-number() Converts a number into a string function-available() Tests whether the function specified is supported by the XSLT processor generate-id() Returns a string value that uniquely identifies a specified node key() Returns a node-set using the index specified by an <xsl:key> element system-property() Returns the value of the system properties unparsed-entity-uri() Returns the URI of an unparsed entity Γηα πεξηζζόηεξεο πιεξνθνξίεο ζρεηηθά κε ηελ XSLT επηζθεθηείηε ηελ ηζηνζειίδα http://www.w3schools.com/xsl/default.asp. 39 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 jQuery – JavaScript Library H jQuery είλαη κηα βηβιηνζήθε εληνιώλ ηεο Javascript. Γίλαη εύθνιε ζηελ εθκάζεζε θαη απινπνηεί ζε κεγάιν βαζκό ηνλ ηξόπν πνπ πξνγξακκαηίδνπκε ζε JavaScript . Η jQuery παξέρεη ηα εμήο ραξαθηεξηζηηθά: Γπηινγή HTML ζηνηρείσλ Δηακόξθσζε HTML ζηνηρείσλ Δηακόξθσζε CSS ζηνηρείσλ Δηεξγαζίεο HTML γεγνλόησλ Γθέ JavaScript θαη animations Δηακόξθσζε ηνπ HTML DOM(Document Object Module) Χξήζε AJAX Πιεζώξα άιισλ εθαξκνγώλ Γηα λα ελζσκαηώζνπκε ηελ βηβιηνζήθε ζε έλα html αξρείν, πξνζζέηνπκε ζην <head> κέξνο ηεο ζειίδαο ηνλ εμήο θώδηθα: <script type="text/javascript" src="jquery.js"></script> Δειαδή ζπλδένπκε ην αξρείν καο κε ηελ βηβιηνζήθε jquery.js. Σν αξρείν απηό κπνξνύκε λα ην θαηεβάζνπκε από ηελ επίζεκε ηζηνζειίδα jQuery.com ζε δπν δηαθνξεηηθέο εθδόζεηο: jQuery minfied (23K) jQuery regular (154K) Γλαιιαθηηθά κπνξνύκε λα ζπλδέζνπκε ην αξρείν κε ηελ online έθδνζε από ηελ Google κε ηνλ εμήο ηξόπν: 40 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0 /jquery.min.js"> /script> Η ζύληαμε ζηελ γιώζζα jQuery είλαη πνιύ απιή: $(επηινγή).δξάζε() Σν δνιιάξην είλαη ην ζύκβνιν πνπ ππνδειώλεη ηελ jQuery. Ο (επηινγέαο) είλαη ην εξώηεκα(query) γηα ην HTML ζηνηρείν πνπ ζέινπκε. H δξάζε (action) είλαη όηη ζα ζπκβεί ζην ζηνηρείν πνπ επηιέμακε. Γηα παξάδεηγκα ε εληνιή: $(this).hide() – Κξύβεη ην επηιεγκέλν αληηθείκελν $(“p”).hide() – Κξύβεη όιεο ηηο παξαγξάθνπο $(“p.test”).hide() – Κξύβεη όιεο ηηο παξαγξάθνπο κε class=”test” $(“#test”).hide() – Κξύβεη όια ηα ζηνηρεία κε id=”test” Γηα λα δηαζθαιίζνπκε όηη ε ζειίδα καο έρεη θνξηώζεη πιήξσο πξίλ ηξέμνπλ νη jQuery εληνιέο καο, ρξεζηκνπνηνύκε ηελ παξαθάησ ζπλάξηεζε: $(document).ready(function(){ ---Οη εληνιέο ηεο jQuery εδώ---}); $(document).ready(function(){ 41 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 ---Οη εληνιέο ηεο jQuery εδώ---- }); Έηζη απνθεύγνπκε πξνβιήκαηα όπσο ην λα πξνζπαζνύκε λα θάλνπκε επηινγή ελόο ζηνηρείνπ πνπ δελ έρεη θνξηώζεη αθόκα, ε λα πάξνπκε ην κέγεζνο κηαο εηθόλαο πνπ δελ έρεη εκθαληζηεί πιήξσο. Παξαπάλσ είδακε πσο ζηελ ζύληαμε ηεο jQuery ππάξρεη ν επηινγέαο, πνπ καο επηηξέπεη λα ςάμνπκε θαη λα βξνύκε HTML ζηνηρεία ζηελ ζειίδα καο. Αο δνύκε ινηπόλ ηη αθξηβώο ζεκαίλεη απηό. Γπηινγέαο ηνηρείσλ Η jQuery κπνξεί θαη ρξεζηκνπνηεί ηα νλόκαηα ησλ CSS ζηύι γηα λα επηιέμεη HTML ζηνηρεία. Έηζη: Σν $(“p”) επηιέγεη όια ηα ζηνηρεία <p> Σν $(“p.intro”) επηιέγεη όια ηα ζηνηρεία <p> κε class=”intro”. To $(“p#demo”) επηιέγεη ηα ζηνηρεία <p> πνπ έρνπλ id=”demo”. Γπηινγέαο Ιδηνηήησλ Η jQuery κπνξεί επίζεο λα επηιέμεη ζηνηρεία κε ζπγθεθξηκέλεο ηδηόηεηεο. Έηζη: Σν $(“[href]“) επηιέγεη όια ηα ζηνηρεία πνπ έρνπλ ηελ ηδηόηεηα href ζηελ ζειίδα καο. Σν $(“[href='#']“) επηιέγεη όια ηα ζηνηρεία πνπ έρνπλ ηελ ηδηόηεηα href θαη ηελ ηηκή value=”#”. Σν $(“[href!='#']“) επηιέγεη όια ηα ζηνηρεία πνπ έρνπλ ηελ ηδηόηεηα href θαη επίζεο ηελ ηδηόηεηα <>”#”. Σν $(“[href$='.jpg']“) επηιέγεη όια ηα ζηνηρεία πνπ έρνπλ ηελ ηδηόηεηα href θαη πεξηέρνπλ ην “.jpg”. Ο επόκελνο πίλαθαο παξνπζηάδεη ηνπο πην ζεκαληηθνύο επηινγείο (selectors) ζηελ jQuery: 42 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Selector Example Selects * $("*") All elements #id $("#lastname") The element with id=lastname .class $(".intro") All elements with class="intro" element $("p") All <p> elements .class.class $(".intro.demo") All elements with class=intro and class=demo :first $("p:first") The first <p> element :last $("p:last") The last <p> element :even $("tr:even") All even <tr> elements :odd $("tr:odd") All odd <tr> elements :eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0) :gt(no) $("ul li:gt(3)") List elements with an index greater than 3 :lt(no) $("ul li:lt(3)") List elements with an index less than 3 :not(selector) $("input:not(:empty)") All input elements that are not empty :header $(":header") All header elements <h1><h2>... :animated All animated elements :contains(text) $(":contains('W3Schools')") All elements which contains the text :empty $(":empty") All elements with no child (elements) nodes :hidden $("p:hidden") All hidden <p> elements :visible $("table:visible") All visible tables s1,s2,s3 $("th,td,.intro") All elements with matching selectors [attribute] $("[href]") All elements with an href attribute [attribute=value] $("[href='#']") All elements with href attribute value="#" [attribute!=value] $("[href!='#']") All elements with href attribute 43 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 value<>"#" [attribute$=value] $("[href$='.jpg']") All elements with href attribute value containing ".jpg" :input $(":input") All <input> elements :text $(":text") All <input> elements with type="text" :password $(":password") All <input> elements with type="password" :radio $(":radio") All <input> elements with type="radio" :checkbox $(":checkbox") All <input> elements with type="checkbox" :submit $(":submit") All <input> elements with type="submit" :reset $(":reset") All <input> elements with type="reset" :button $(":button") All <input> elements with type="button" :image $(":image") All <input> elements with type="image" :file $(":file") All <input> elements with type="file" :enabled $(":enabled") All enabled input elements :disabled $(":disabled") All disabled input elements :selected $(":selected") All selected input elements :checked $(":checked") All checked input elements Παξαθάησ αθνινπζεί έλαο πίλαθαο κε ηα θπξηόηεξα γεγνλόηα (events) ζηελ jQuery: Event function Binds the function to $(document).ready(function) The ready event of a document (when an HTML document is ready to use) $(selector).blur(function) The blur event of matching elements $(selector).change(function) The change event of matching elements $(selector).click(function) The click event of matching elements 44 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 $(selector).dblclick(function) The double click event of matching elements $(selector).error(function) The error event of matching elements $(selector).focus(function) The focus event of matching elements $(selector).keydown(function) The key down event of matching elements $(selector).keypress(function) The key press event of matching elements $(selector).keyup(function) The key up event of matching elements $(selector).load(function) The load event of matching elements $(selector).mousedown(function) The mouse down event of matching elements $(selector).mouseenter(function) The mouse enter event of matching elements $(selector).mouseleave(function) The mouse leave event of matching elements $(selector).mousemove(function) The mouse move event of matching elements $(selector).mouseout(function) The mouse out event of matching elements $(selector).mouseover(function) The mouse over event of matching elements $(selector).mouseup(function) The mouse up event of matching elements $(selector).resize(function) The resize event of matching elements $(selector).scroll(function) The scroll event of matching elements $(selector).select(function) The select event of matching elements $(selector).submit(function) The submit event of matching elements $(selector).unload(function) The unload event of matching elements Function Triggers $(selector).blur() The blur event of matching elements $(selector).change() The change event of matching elements $(selector).click() The click event of matching elements $(selector).dblclick() The double click event of matching elements $(selector).error() The error event of matching elements $(selector).focus() The focus event of matching elements 45 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 $(selector).keydown() The key down event of matching elements $(selector).keypress() The key press event of matching elements $(selector).keyup() The key up event of matching elements $(selector).mousedown() The mouse down event of matching elements $(selector).mouseenter() The mouse enter event of matching elements $(selector).mouseleave() The mouse leave event of matching elements $(selector).mousemove() The mouse move event of matching elements $(selector).mouseout() The mouse out event of matching elements $(selector).mouseover() The mouse over event of matching elements $(selector).mouseup() The mouse up event of matching elements $(selector).resize() The resize event of matching elements $(selector).scroll() The scroll event of matching elements $(selector).select() The select event of matching elements $(selector).submit() The submit event of matching elements $(selector).trigger(event) The specified event for all matched elements $(selector).triggerHandler(event) The specified event for the first matched element Function Triggers $(selector).bind(event) Add one or more event handlers to matching elements $(selector).delegate(selector, Add an event handler to matching elements, now or event) in the future $(selector).die() Remove all event handlers added with the live() function $(selector).live(event) Add an event handler to matching elements, now or in the future $(selector).one(event) Add an event handler to matching elements. This handler can only be triggered once $(selector).unbind(event) Remove an added event handler from matching elements 46 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 $(selector).undelegate(event) Remove an event handler to matching elements, now or in the future ηνλ επόκελν πίλαθα παξνπζηάδνληαη ζπλαξηήζεηο πνπ πξνθαινύλ δηάθνξα εθέ: Hide / Show Description $(selector).show(speed,callback) Show selected elements $(selector).hide(speed,callback) Hide selected elements $(selector).toggle(speed,callback) Toggle hide and show for selected elements Slide $(selector).slideDown(speed,callback) Slide-show selected elements by adjusting height $(selector).slideUp(speed,callback) Slide-hide selected elements by adjusting height $(selector).slideToggle(speed,callback) Toggle slide-hide and slide-show for selected elements Fade in / out $(selector).fadeIn(speed,callback) Fade in selected elements to full opacity $(selector).fadeOut(speed,callback) Fade out selected elements to zero opacity $(selector).fadeTo(speed,opacity,callback) Fade selected elements to a given opacity Animation $(selector).animate(params,duration,effect,callback) Applies a "custom" animation for selected elements 47 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 $(selector).stop() Stops running animations on selected elements Queue $(selector).clearQueue() Remove all queued functions (not yet run) for the selected element $(selector).delay() Set a delay for all queued functions (not yet run) for the selected element $(selector).dequeue() Run the next queued functions for the selected element $(selector).queue() Show the queued functions for the selected element ηελ επόκελε εηθόλα παξνπζηάδνληαη εληνιέο ηεο jQuery αλά θαηεγνξίεο: 48 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γηα πεξηζζόηεξεο πιεξνθνξίεο ζρεηηθά κε ηελ jQuery επηζθεθηείηε ηελ ηζηνζειίδα http://www.w3schools.com/jquery/default.asp. 3. ΠΡΟΘΗΚΗ ΠΔΡΙΔΥΟΜΔΝΟΤ ΣΟ LIFERAY ηελ πξνεγνύκελε ελόηεηα είδακε ηηο γιώζζεο πξνγξακκαηηζκνύ πνπ ρξεζηκνπνηήζεθαλ γηα ηελ αλάπηπμε ηεο ηζηνζειίδαο ηνπ εξγαζηεξίνπ Σερλνινγίαο θαη πζηεκάησλ Λνγηζκηθνύ. ε απηήλ ηελ ελόηεηα ζα δνύκε πσο ζα δεκηνπξγήζνπκε άξζξα γηα λα πξνζζέζνπκε ην πεξηερόκελν θαη λα νινθιεξώζνπκε ηελ ηζηνζειίδα. 3.1 LIFERAY JOURNAL PORTLET Σν Liferay Journal είλαη ε εθαξκνγή πνπ πεξηιακβάλεη ην Liferay γηα ηελ δεκηνπξγία θαη δηαρείξηζε εγγξάθσλ. Απνηειείηαη από ηα: Journal: Γίλαη ε θύξηα εθαξκνγή πνπ επηηξέπεη ηελ δεκηνπξγία, επεμεξγαζία, εύξεζε θαη δηαρείξηζε πεξηερνκέλνπ. Journal Articles: Γκθαλίδεη κηα ιίζηα κε ηα έγγξαθα πνπ ηθαλνπνηνύλ έλα ζύλνιν ζπλζεθώλ νη νπνίεο θαζνξίδνληαη κέζσ ησλ επηινγώλ πνπ παξέρεη ην portlet. Journal Content: Γκθαλίδεη ην πεξηερόκελν ησλ εγγξάθσλ πνπ επηιέγεηαη από ηελ ιίζηα ησλ δηαζέζηκσλ portlets. Journal Content Search: Γπηηξέπεη ηελ αλαδήηεζε ζηα έγγξαθα. Σν Journal portlet ρξεζηκνπνηείηαη γηα ηελ δεκηνπξγία όινπ ηνπ πεξηερνκέλνπ ηνπ Portal ελώ ηα Journal Articles θαη Journal Content ρξεζηκνπνηνύληαη γηα ηελ παξνπζίαζε απηνπ ηνπ πεξηερνκέλνπ. 3.2 ΓΗΜΙΟΤΡΓΙΑ ΑΡΘΡΟΤ ΣΟ LIFERAY 49 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Σν Liferay δηαρσξίδεη ην πεξηερόκελν ελόο άξζξνπ από ηνλ ηξόπν πνπ απηό παξνπζηάδεηαη κε ηελ ρξήζε templates (πξόηππα παξνπζίαζεο) θαη structures (δνκώλ) γηα ηελ δεκηνπξγία ηνπ άξζξνπ. Με απηόλ ηνλ ηξόπν ν ζπγγξαθέαο ελόο άξζξνπ δελ ρξεηάδεηαη λα δηαζέηεη γλώζεηο πξνγξακκαηηζκνύ, αιιά ρξεζηκνπνηεί ηα δηαζέζηκα templates (πξόηππα παξνπζίαζεο) θαζώο θαη ηα εξγαιεία WYSIWG (What You See Is What You Get) πνπ ηνπ παξέρεη ην portal γηα λα θαζνξίζεη ην πσο ζα εκθαληζηεί ην άξζξν ηνπ. Γηα ηελ δεκηνπξγία ελόο άξζξνπ αθνινπζάκε ηα παξαθάησ βήκαηα: Δεκηνπξγία δνκήο (structure). Δεκηνπξγία πξνηύπνπ παξνπζίαζεο (template). Δεκηνπξγία άξζξνπ (article). 3.2.1 Γημιοσργία δομής (structure). Οη δνκέο θαζνξίδνπλ ην είδνο θαη ηνλ αξηζκό ησλ αληηθεηκέλσλ πνπ ζα ρξεζηκνπνηεζνύλ ζην άξζξν. (π.ρ εηθόλεο, θείκελν, ιίζηεο επηινγήο). θνπόο ηνπο είλαη λα ελνπνηήζνπλ δηαθνξεηηθά άξζξα κε ηνλ ίδην αξηζκό θαη είδνο αληηθεηκέλσλ. Γηα παξάδεηγκα ην παξαθάησ άξζξν απνηειείηαη από 4 πεξηνρέο γηα ηελ εηζαγσγή θεηκέλνπ θαη 4 εηθόλεο κε ηηο ιεδάληεο ηνπο. 50 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γηα λα δεκηνπξγήζνπκε κηα δνκή από ην Journal portlet επηιέγνπκε Structures θαη έπεηηα θάλνπκε θιηθ ζην Add Structure. Γκθαλίδεηαη ε ζειίδα δεκηνπξγίαο δνκήο: 51 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γπηιέγνπκε ην Autogenerate ID θαη δίλνπκε ην όλνκα ηεο δνκήο ζην Name θαη κηα αλαιπηηθή πεξηγξαθή ζην Description. Έπεηηα θάλνπκε θιηθ ζην Add Row γηα λα πξνζζέζνπκε πεδία εηζαγσγήο. Γηα θάζε λέν πεδίν δίλνπκε ην όλνκα θαη ηνλ ηύπν δεδνκέλσλ πνπ ζα εηζάγνπκε (εηθόλεο, θείκελν, ιίζηεο επηινγήο..) Γηα λα νλνκάζνπκε έλα πεδίν κε παξαπάλσ από κία ιέμεηο βάδνπκε αλάκεζα ηνπο κία θάησ παύια π.ρ “Content_Title". Με ηα βειάθηα αιιάδνπκε ηελ ζεηξά ησλ πεδίσλ θαη κε ηα εηθνλίδηα + θαη – πξνζζέηνπκε θαη αθαηξνύκε ππνπεδία. Όζνη γλσξίδνπλ XML ή HTML κπνξνύλ λα πξνζζέζνπλ πεδία κε ηελ ρξήζε ηνπ Editor (παηώληαο ζην Launch Editor). 52 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Όηαλ νινθιεξώζνπκε ηελ εηζαγσγή πεδίσλ θάλνπκε θιηθ ζην save θαη ε δνκή καο είλαη έηνηκε. 3.2.2 Γημιοσργία προηύποσ παροσζίαζης (template) Σα πξόηππα παξνπζίαζεο θαζνξίδνπλ ηελ ηνπνζέηεζε θαη δηάηαμε ησλ αληηθεηκέλσλ πνπ απνηεινύλ ην άξζξν. Χξεζηκνπνηνύληαη γηα ηνλ δηαρσξηζκό ηνπ πεξηερνκέλνπ ηνπ άξζξνπ από ηελ παξνπζίαζε. Σα πξόηππα πνπ ρξεζηκνπνηνύληαη ζην Liferay, κπνξνύλ λα δεκηνπξγεζνύλ είηε κε XSL είηε κε Velocity (VM) δίλνληαο έηζη επειημία ζην πξνγξακκαηηζηή θαηά ηελ ζρεδίαζε ησλ ηζηνρώξσλ ηνπ. ηελ πηπρηαθή απηε, ηα templates αλαπηύρζεθαλ κε ηελ ρξήζε ηεο XSLT. Γηα λα δεκηνπξγήζνπκε έλα πξόηππν παξνπζίαζεο από ην Journal portlet επηιέγνπκε templates θαη έπεηηα θάλνπκε θιηθ ζην Add template. 53 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γκθαλίδεηαη ε ζειίδα δεκηνπξγίαο πξνηύπνπ: 54 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γπηιέγνπκε Autogenerate ID θαη δίλνπκε ην όλνκα ηνπ template ζην Name θαη κηα αλαιπηηθή πεξηγξαθή ζην description. Κάλνπκε θιηθ ζην select θαη επηιέγνπκε ηελ δνκή κε ηελ νπνία ζα ζπζρεηήζνπκε ην template καο. Έπεηηα θάλνπκε θιηθ ζην Launch Editor γηα λα εκθαληζηεί ν editor. 55 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γηα ηελ πινπνίεζε ηνπ template ζηνλ editor είλαη απαξαίηεηε ε γλώζε ηεο XSL (EXtensible Stylesheet Language) ή ηεο VM. Όηαλ νινθιεξώζνπκε ηελ θσδηθνπνίεζε ζε XSL ή VM θάλνπκε θιηθ ζην update. Αλ δελ παξνπζηαζηεί θάπνην ιάζνο ην template είλαη έηνηκν γηα ρξήζε. ( ηελ πεξίπησζε πνπ έρνπκε θάπνην script έηνηκν δελ ρξεζηκνπνηνύκε ηνλ editor αιιά θάλνπκε θιηθ ζην (Script) browse γηα λα βξνύκε ην έηνηκν script.) Αλ ζέινπκε λα αλαπαξαζηήζνπκε ην template πνπ δεκηνπξγήζακε κε κηα κηθξή εηθόλα εηζάγνπκε ηελ δηεύζπλζε ηεο ζην πεδίν Small Image URL ή θάλνπκε θιηθ ζην browse γηα λα βξνύκε ηελ εηθόλα Κάλνπκε θιηθ ζην Save θαη ην πξόηππν παξνπζίαζεο είλαη έηνηκν. 56 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 3.2.3 Γημιοσργία άρθροσ (article) Γηα λα δεκηνπξγήζνπκε ην άξζξν επηιέγνπκε απν ην Journal Portlet ηελ εηηθέηα “Articles” θαη ζηε ζπλέρεηα θάλνπκε θιηθ ζην “Add Article”. Γκθαλίδεηαη ε ζειίδα δεκηνπξγίαο άξζξνπ: 57 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γηζάγνπκε έλα όλνκα γηα ην άξζξν ζην πεδίν Name θαη κηα αλαιπηηθή πεξηγξαθή ζην Description. Γπηιέγνπκε από ην πεδίν Forms and Presentations ηελ δνκή θαη ην πξόηππν παξνπζίαζεο κε ηα νπνία ζα ζπζρεηίζνπκε ην άξζξν καο. Αλάινγα κε ηελ δνκή πνπ ζα επηιέμνπκε ζα αιιάμνπλ θαη ηα δηαζέζηκα πεδία (εηζαγσγήο θεηκέλνπ, εηθόλσλ...) Αλ ζέινπκε λα δεκηνπξγήζνπκε έλα απιό άξζξν πνπ ζα απνηειείηαη από κηα πεξηνρή γηα ηελ εηζαγσγή θεηκέλνπ (textarea) δελ ρξεηάδεηαη λα επηιέμνπκε structure ή template από ην πεδίν Forms and Presentations. Από ην πεδίν Scheduler κπνξνύκε λα θαζνξίζνπκε πόηε ζα γίλεη δηαζέζηκν ην άξζξν καο ή πόηε ζα “ιήμεη”. Όηαλ ζπκπιεξώζνπκε ηα απαξαίηεηα πεδία θάλνπκε θιηθ ζην Save and Approve θαη ην άξζξν καο είλαη έηνηκν. 58 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 4. ΠΑΡΟΤΙΑΗ ΙΣΟΔΛΙΓΑ & TEMPLATES 4.1 ΠΑΡΟΤΙΑΗ ΙΣΟΔΛΙΓΑ ε απηήλ ηελ ελόηεηα ζα δνύκε δηάθνξεο εηθόλεο από ηελ νινθιεξσκέλε ηζηνζειίδα ηνπ εξγαζηεξίνπ Σερλνινγίαο θαη πζηεκάησλ Λνγηζκηθνύ. 59 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 60 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 61 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 62 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 4.2 ΠΑΡΟΤΙΑΗ TEMPLATES ε απηή ηελ ελόηεηα ζα δνύκε ηα πξόηππα παξνπζίαζεο πνπ αλαπηύρζεθαλ γηα ηεο αλάγθεο ηεο πηπρηαθήο. Γηα θάζε πξόηππν ζα παξαηεζεί κηα εηθόλα κε ηελ ηειηθή ηνπ εκθάληζε θαζώο θαη ν θώδηθαο πνπ ρξεζηκνπνηήζεθε γηα ηελ πινπνίεζε ηνπ. 4.2.1 JQUERY TABS Γκθάληζε Σν πξόηππν απηό απνηειείηαη από 4 θαξηέιεο. ε θάζε θαξηέια ν ρξήζηεο κπνξεί λα ηνπνζεηήζεη δπλακηθά ην πεξηερόκελν πνπ επηζπκεί (θείκελν, εηθόλεο, ράξηεο... ) Γηα λα ελεξγνπνηεζεί κηα θαξηέια θάλνπκε θιηθ ζην αληίζηνηρν εηθνλίδην. ηελ επόκελε εηθόλα παξνπζηάδεηαη ην πξόηππν κε ελεξγνπνηεκέλε ηελ πξώηε θαξηέια (General). Δνκή - (Structure) <root> <dynamic-element name='title1' type='text'></dynamic-element> <dynamic-element name='title2' type='text'></dynamic-element> <dynamic-element name='title3' type='text'></dynamic-element> 63 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <dynamic-element name='title4' type='text'></dynamic-element> <dynamic-element name='textarea1' type='text_area'></dynamic-element> <dynamic-element name='textarea2' type='text_area'></dynamic-element> <dynamic-element name='textarea3' type='text_area'></dynamic-element> <dynamic-element name='textarea4' type='text_area'></dynamic-element> </root> Πξόηππν Παξνπζίαζεο – (Template) <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" omit-xml-declaration="yes"/> <xsl:template match="/"> <script type="text/javascript"> jQuery(document).ready(function(){ new Accordian('basic-accordian',5,'header_highlight') }); </script> <script src="/html/js/kptemplates/Slider Content/jquery.history_remote.pack.js" type="text/javascript"></script> <script src="/html/js/kptemplates/Slider Content/jquery.tabs.pack.js" type="text/javascript"></script> <script src="/html/js/kptemplates/Slider Content/TabContent.js" type="text/javascript"></script> <script src="/html/js/kptemplates/Slider Content/accordian.pack.js" type="text/javascript"></script> <!-- Additional IE/Win specific style sheet (Conditional Comments) --> <!--[if lte IE 6]> 64 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <style type="text/css" media="screen, projection"> .tabs-nav { /* auto clear */ display: inline-block; width:100%; } .tabs-nav .tabs-disabled { position: relative; /* fixes opacity */ filter: alpha(opacity=40); } .tabs-nav .tabs-disabled a span { _height: 19px; min-height: 19px; /* ...in both IE 6 and 7 */ } .tabs-nav a, .tabs-nav a span { display: block; padding: 0 10px; /* background-image:url(ISTLBg.jpg);height: 1%;*/ } <![endif]--> <style type="text/css" media="screen, projection"> #TabsWrapper{ width:80%; padding:0 10% 0 10%; } @media projection, screen { .tabs-hide { display: none; } } 65 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 @media print { .tabs-nav { display: none; } } /* Skin */ .tabs-nav { list-style: none; margin: 0; padding: 0 0 0 0; } .tabs-nav:after { display: block; clear: both; content: " "; } .tabs-nav li { float: left; margin: 10px 1px 0 0px; min-width: 84px; /* be nice to Opera */ list-style: none; } .tabs-nav a, .tabs-nav a span { display:inline-block; padding: 0 10px; /*background:url(ISTLBg.jpg);*/ /*background-repeat: repeat*/ background:#fff; } .tabs-nav a { position: relative; top: 1px; 66 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 z-index: 2; padding-left: 0px; color: #000; font-size: 12px; font-weight: bold; line-height: 1.6; text-align: center; text-decoration: none; white-space: nowrap; /* required in IE 6 */ } .tabs-nav .tabs-selected a { color: #000; } .tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { background-position: 100% -150px; outline: 0; /* prevent dotted border in Firefox */ } .tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active { background-position: 100% -100px; } .tabs-nav a span { width: 84px; /* IE 6 treats width as min-width */ min-width: 84px; height: 18px; /* IE 6 treats height as min-height */ min-height: 18px; padding-top: 6px; padding-right: 0; } .tabs-nav a span { /* hide from IE 6 */ width:100px; height:50px; } 67 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 .tabs-nav .tabs-selected a span { padding-top: 7px; } .tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span { background-position: 0 -50px; } .tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span { background-position: 0 0; } .tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabsdisabled a:link, .tabs-nav .tabs-disabled a:visited cursor: text; } .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { cursor: pointer; } .tabs-nav .tabs-disabled { opacity: .4; } .tabs-container { border-top: 1px solid #97a5b0; padding: 1em 8px; background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ } .tabs-loading em { padding: 0 0 0 30px; background: url("/html/js/kptemplates/Slider Content/loading.gif") no-repeat 0 50%; } .csw {width:80%; height: 500px; background: #fff; overflow:hidden; padding:0 10% 0 10%;} .csw .loading {margin: 200px 0 300px 0; text-align: center} /*The code below is the Css for the accordian used on page personnel*/ 68 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 #basic-accordian{ /*border:5px solid #EEE;*/ padding:5px; width:100%; position:relative; height:800px; /*left:50%; top:50%;*/ /*margin-left:-175px;*/ z-index:2; /*margin-top:-100px;*/ font-family:Verdana; } .accordion_headings{ padding:5px; /*background:#99CC00;*/ color:#fff; /*border:1px solid #000000;*/ cursor:pointer; /*font-weight:bold;*/ font-family:Verdana; font-size:16px; background:url("/html/js/kptemplates/Slider Content/20hfeader.gif") no-repeat; height:50px; } .accordion_headings:hover{ /*background:#EEE;*/ /*background:url("/html/js/kptemplates/Slider Content/MenuHover.jpg")norepeat;*/ } .accordion_child{ padding:10px; /*background:#EEE;*/ 69 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 /* background:url("/html/js/kptemplates/Slider Content/Table-Back.gif") repeat-x;*/ font-family:Verdana; } .accordian_child_title{ background:url("/html/js/kptemplates/Slider Content/BG6.jpg"); margin-top:0px; /*border-bottom:1px solid #eee;*/ /*margin-bottom:5px; padding-bottom:3px;*/ height:20px; color:#fff; } /* .header_highlight{ background:#00CCFF; }*/ </style> <!--jQuery(window).bind("load", function() {});--> <div id="TabsWrapper" style="font-family:Verdana"> <div id="container-1" align="center"> <ul> <li> <a href="#fragment-1"> <span> <img src="/html/js/kptemplates/Slider Content/Text04.gif" width="30px" 70 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 height="30px" border="0px"/><br/> <xsl:if test="root/dynamic-element[@name='title1']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title1']/dynamic-content"/> </xsl:if> </span> </a> </li> <li> <a href="#fragment-2"> <span> <img src="/html/js/kptemplates/Slider Content/blue.gif" border="0px"/><br/><xsl:if test="root/dynamicelement[@name='title2']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title2']/dynamic-content"/> </xsl:if> </span> </a> </li> <li> <a href="#fragment-3"> <span> <img src="/html/js/kptemplates/Slider Content/TN_psd1537.JPG" width="30px" height="30px" border="0px"/><br/><xsl:if test="root/dynamicelement[@name='title3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title3']/dynamic-content"/> </xsl:if> </span> </a> </li> <li> <a href="#fragment-4"> 71 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <span> <img src="/html/js/kptemplates/Slider Content/Communication.gif" width="30px" height="30px" border="0px"/><br/><xsl:if test="root/dynamicelement[@name='title4']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title4']/dynamic-content"/> </xsl:if> </span> </a> </li> </ul> <div id="fragment-1"> <xsl:if test="root/dynamic-element[@name='textarea1']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea1']/dynamic-content"/> </xsl:if> </div> <div id="fragment-2"> <xsl:if test="root/dynamic-element[@name='textarea2']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea2']/dynamic-content"/> </xsl:if> </div> <div id="fragment-3"> <xsl:if test="root/dynamic-element[@name='textarea3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea3']/dynamic-content"/> </xsl:if> </div> <div id="fragment-4"> <xsl:if test="root/dynamic-element[@name='textarea4']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic- 72 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 element[@name='textarea4']/dynamic-content"/> </xsl:if> </div> </div> </div> </xsl:template> </xsl:stylesheet> 4.2.2 LEFT NAVIGATION MENU Γκθάληζε Σν πξόηππν απηό απνηειείηαη από 7 θαξηέιεο. ε θάζε θαξηέια αληηζηνηρεί κία πεξηνρή θεηκέλνπ (textarea) ζηελ νπνία ν ρξήζηεο κπνξεί λα ηνπνζεηήζεη θείκελν θαη εηθόλεο. Με θιηθ ζηνλ ηίηιν κηαο λέαο θαξηέιαο, ην πεξηερόκελν ηεο πξεγνύκελεο θαξηέιαο πνπ εκθαληδόηαλ, κεηαθηλείηαη κε εθέ θίλεζεο θαη αληηθαζίζηαηαη από ην πεξηερόκελν ηεο λέαο θαξηέιαο. 73 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Δνκή – (Structure) <root> <dynamic-element name='title1' type='text'></dynamic-element> <dynamic-element name='title2' type='text'></dynamic-element> <dynamic-element name='title3' type='text'></dynamic-element> <dynamic-element name='title4' type='text'></dynamic-element> <dynamic-element name='title5' type='text'></dynamic-element> <dynamic-element name='title6' type='text'></dynamic-element> <dynamic-element name='title7' type='text'></dynamic-element> <dynamic-element name='textarea1' type='text_area'></dynamic-element> <dynamic-element name='textarea2' type='text_area'></dynamic-element> <dynamic-element name='textarea3' type='text_area'></dynamic-element> <dynamic-element name='textarea4' type='text_area'></dynamic-element> <dynamic-element name='textarea5' type='text_area'></dynamic-element> <dynamic-element name='textarea6' type='text_area'></dynamic-element> <dynamic-element name='textarea7' type='text_area'></dynamic-element> </root> Πξόηππν Παξνπζίαζεο – (Template) <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" omit-xml-declaration="yes"/> <xsl:template match="/"> <script type="text/javascript"> jQuery(document).ready(function(){ new Accordian('basic-accordian',5,'header_highlight') }); </script> 74 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <script src="/html/js/kptemplates/Slider Content/accordian.pack.js" type="text/javascript"></script> <style type="text/css" media="screen, projection"> #basic-accordian{ /*border:5px solid #EEE;*/ padding:5px; width:100%; position:relative; height:800px; /*left:50%; top:50%;*/ /*margin-left:-175px;*/ z-index:2; /*margin-top:-100px;*/ font-family:Verdana; } .accordion_headings{ padding:5px; /*background:#99CC00;*/ color:#fff; /*border:1px solid #000000;*/ cursor:pointer; /*font-weight:bold;*/ 75 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 font-family:Verdana; font-size:16px; background:url("/html/js/kptemplates/Slider Content/20hfeader.gif") no-repeat; height:50px; } .accordion_headings:hover{ /*background:#EEE;*/ /*background:url("/html/js/kptemplates/Slider Content/MenuHover.jpg")no-repeat;*/ } .accordion_child{ padding:10px; /*background:#EEE;*/ /* background:url("/html/js/kptemplates/Slider Content/Table-Back.gif") repeat-x;*/ font-family:Verdana; } .accordian_child_title{ background:url("/html/js/kptemplates/Slider Content/BG6.jpg"); margin-top:0px; /*border-bottom:1px solid #eee;*/ /*margin-bottom:5px; padding-bottom:3px;*/ height:20px; color:#fff; } 76 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 /* .header_highlight{ background:#00CCFF; }*/ </style> <div id="basic-accordian"><!--Parent of the Accordion--> <div style="width: 17%; float: left"> <div id="test1-header" class="accordion_headings header_highlight" align="center"><xsl:if test="root/dynamic-element[@name='title1']/dynamiccontent != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title1']/dynamic-content"/> </div> <div id="test2-header" class="accordion_headings" align="center"><xsl:if test="root/dynamic-element[@name='title2']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title2']/dynamic-content"/> </div> <div id="test3-header" class="accordion_headings" align="center"><xsl:if test="root/dynamic-element[@name='title3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title3']/dynamic-content"/> div> <div id="test4-header" class="accordion_headings" align="center"><xsl:if test="root/dynamic-element[@name='title4']/dynamic-content != ''"> 77 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title4']/dynamic-content"/> </div> <div id="test5-header" class="accordion_headings" align="center"><xsl:if test="root/dynamic-element[@name='title5']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title5']/dynamic-content"/> </div> <div id="test6-header" class="accordion_headings" align="center"><xsl:if test="root/dynamic-element[@name='title6']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title6']/dynamic-content"/> </div> <div id="test7-header" class="accordion_headings" align="center"> <xsl:if test="root/dynamic-element[@name='title7']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title7']/dynamic-content"/> </div> </div> <div style="width: 82%; float: right; height: 800px"> <div id="test1-content"> <div class="accordion_child" align="justify"> <p class="accordian_child_title" align="center><xsl:if test="root/dynamicelement[@name='title1']/dynamic-content != ''"> 78 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title1']/dynamic-content"/> </p> <p> </p> <div><xsl:if test="root/dynamic-element[@name='textarea1']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea1']/dynamic-content"/></div> </div> </div> <div id="test2-content"> <div class="accordion_child" align="justify"> <p class="accordian_child_title" align="center><xsl:if test="root/dynamicelement[@name='title2']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title2']/dynamic-content"/> </p> <p> </p> <div><xsl:if test="root/dynamic-element[@name='textarea2']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea2']/dynamic-content"/></div> </div> </div> <div id="test3-content"> <div class="accordion_child" align="justify"> 79 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <p class="accordian_child_title" align="center><xsl:if test="root/dynamicelement[@name='title3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title3']/dynamic-content"/> </p> <p> </p> <div><xsl:if test="root/dynamic-element[@name='textarea3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea3']/dynamic-content"/></div> </div> </div> <div id="test4-content"> <div class="accordion_child" align="justify"> <p class="accordian_child_title" align="center><xsl:if test="root/dynamicelement[@name='title4']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title4']/dynamic-content"/> </p> <p> </p> <div><xsl:if test="root/dynamic-element[@name='textarea4']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea4']/dynamic-content"/></div> </div> </div> <div id="test5-content"> 80 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <div class="accordion_child" align="justify"> <p class="accordian_child_title" align="center><xsl:if test="root/dynamicelement[@name='title5']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title5']/dynamic-content"/> </p> <p> </p> <div><xsl:if test="root/dynamic-element[@name='textarea5']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea5']/dynamic-content"/></div> </div> </div> <div id="test6-content"> <div class="accordion_child" align="justify"> <p class="accordian_child_title" align="center><xsl:if test="root/dynamicelement[@name='title6']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title6']/dynamic-content"/> </p> <p> </p> <div><xsl:if test="root/dynamic-element[@name='textarea6']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea6']/dynamic-content"/></div> </div> </div> 81 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <div id="test7-content"> <div class="accordion_child" align="justify"> <p class="accordian_child_title" align="center><xsl:if test="root/dynamicelement[@name='title7']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title7']/dynamic-content"/> </p> <p> </p> <div><xsl:if test="root/dynamic-element[@name='textarea7']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea7']/dynamic-content"/></div> </div> </div> </div> <!--End of accordion parent--> </xsl:template> </xsl:stylesheet> 4.2.3 SIMPLE “ACCORDION” MENU Γκθάληζε Σν πξόηππν απηό βαζίδεηαη ζηνλ ηξόπν ρξήζεο ελόο accordion θαη απνηειείηαη από 4 πεξηνρέο θεηκέλνπ. Γηα λα εκθαληζηεί ην πεξηερόκελν θάζε 82 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 πεξηνρήο θάλνπκε θιηθ ζηνλ αληίζηνηρν ηίηιν. Με ηελ ελεξγνπνίεζε κηαο πεξηνρήο νη άιιεο απελεξγνπνηνύληαη. Γηα παξάδεηγκα ζηελ παξαθάησ εηθόλα εκθαλίδεηαη ην θείκελν πνπ αληηζηνηρεί ζηνλ ηίηιν “Objectives”. Δνκή – (Structure) <root> <dynamic-element name='title1' type='text'></dynamic-element> <dynamic-element name='title2' type='text'></dynamic-element> <dynamic-element name='title3' type='text'></dynamic-element> <dynamic-element name='title4' type='text'></dynamic-element> <dynamic-element name='textarea1' type='text_area'></dynamic-element> <dynamic-element name='textarea2' type='text_area'></dynamic-element> <dynamic-element name='textarea3' type='text_area'></dynamic-element> <dynamic-element name='textarea4' type='text_area'></dynamic-element> </root> 83 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Πξόηππν Παξνπζίαζεο – (Template) <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" omit-xml-declaration="yes"/> <xsl:template match="/"> <script type="text/javascript"> jQuery(document).ready(function(){ new Accordian('basic-accordian2',1,'header_highlight') }); </script> <script src="/html/js/kptemplates/Slider Content/accordian.pack.js" type="text/javascript"></script> <style type="text/css" media="screen, projection"> /*The code below is the Css for theSimple Javascript accordians*/ #basic-accordian{ /*border:5px solid #EEE;*/ /*padding:5px;*/ width:100%; height:100%; /*position:absolute; z-index:2;*/ } .accordion_headings{ padding:15px; /*background:#000000;*/ color:#000000; /*border:1px solid silver;*/ cursor:pointer; /*font-weight:bold;*/ background:url("/html/js/kptemplates/Slider Content/Download.gif") no-repeat right; font-family:Verdana; font-size:16px; 84 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 } .accordion_headings:hover{ background:url("/html/js/kptemplates/Slider Content/DownloadGreen.gif") no-repeat right; /* background:#EEE;*/ color:#358CCC; } .accordion_child{ padding:15px; /*background:#EEE;*/ /*background:url("/html/js/kptemplates/Slider Content/Table-Back.gif")repeat-x;*/ font-family:Verdana; font-size:12px; } .header_highlight{ background:url("/html/js/kptemplates/Slider Content/DownloadBW.gif") no-repeat right; } </style> <p align="center"><a href="http://www.teicrete.gr/diamouses/"><img border="0" alt="" src="/html/js/kptemplates/Slider Content/diamouses_logo.gif" /></a></p> <div id="basic-accordian2"><!--Parent of the Accordion--> <!--Start of each accordion item--> <div style="text-align: left" id="test50-header" class="accordion_headings header_highlight"><img alt="" align="left" src="/html/js/kptemplates/Slider Content/TN_psd163522.jpg" /> <xsl:if test="root/dynamic-element[@name='title1']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic- 85 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 element[@name='title1']/dynamic-content"/> </div> <!--Heading of the accordion ( clicked to show n hide ) --><!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg.foo-headerfoo-content--> <div id="test50-content"><!--DIV which show/hide on click of header--><!--This DIV is for inline styling like padding...--> <div class="accordion_child" align="justify"> <xsl:if test="root/dynamic-element[@name='textarea1']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea1']/dynamic-content"/> </div> </div> <!--End of each accordion item--> <!--Start of each accordion item--> <div style="text-align: left" id="test51-header" class="accordion_headings"><img alt="" align="left" src="/html/js/kptemplates/Slider Content/TN_psd163522.jpg" /> <xsl:if test="root/dynamic-element[@name='title2']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title2']/dynamic-content"/> </div> <!--Heading of the accordion ( clicked to show n hide ) --><!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg.foo-headerfoo-content--> <div id="test51-content"><!--DIV which show/hide on click of header--><!--This DIV is for inline styling like padding...--> <div class="accordion_child" align="justify"> <xsl:if test="root/dynamic-element[@name='textarea2']/dynamic-content != ''"> 86 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea2']/dynamic-content"/> </div> </div> <!--End of each accordion item--> <!--Start of each accordion item--> <div style="text-align: left" id="test52-header" class="accordion_headings"><img alt="" align="left" src="/html/js/kptemplates/Slider Content/TN_psd163522.jpg" /> <xsl:if test="root/dynamic-element[@name='title3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title3']/dynamic-content"/> </div> <!--Heading of the accordion ( clicked to show n hide ) --><!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg.foo-headerfoo-content--> <div id="test52-content"><!--DIV which show/hide on click of header--><!--This DIV is for inline styling like padding...--> <div class="accordion_child" align="justify"> <xsl:if test="root/dynamic-element[@name='textarea3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea3']/dynamic-content"/> <xsl:if test="root/dynamic-element[@name='textarea3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea3']/dynamic-content"/> </div> </div> <!--End of each accordion item--> <!--Start of each accordion item--> <div style="text-align: left" id="test53-header" class="accordion_headings"><img 87 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 alt="" align="left" src="/html/js/kptemplates/Slider Content/TN_psd163522.jpg" /> <xsl:if test="root/dynamic-element[@name='title4']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title4']/dynamic-content"/> </div> <!--Heading of the accordion ( clicked to show n hide ) --><!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg.foo-headerfoo-content--> <div id="test53-content"><!--DIV which show/hide on click of header--><!--This DIV is for inline styling like padding...--> <div class="accordion_child" align="justify"> <xsl:if test="root/dynamic-element[@name='textarea4']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='textarea4']/dynamic-content"/> </div> </div> <!--End of each accordion item--> </div><!--End of accordion parent--> </xsl:template> </xsl:stylesheet> 4.2.4 HIGHSLIDE IMAGE GALLERY Γκθάληζε Σν πξόηππν απηό εκθαλίδεη κηα νκάδα από εηθόλεο κέζσ ελόο εληαίνπ πεξηβάιινληνο ρξήζεο. Απνηειείηαη από 4 εηθόλεο κε ηηο ιεδάληεο ηνπο. Κάλνληαο θιηθ ζηελ κηθξνγξαθία κηαο εηθόλαο ην πξόηππν ελεξγνπνηείηαη, ζθηάδεη ηελ νζόλε θαη εκθαλίδεη ηελ εηθόλα ζην πξαγκαηηθό ηεο κέγεζνο. Ο 88 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 ρξήζηεο κπνξεί λα κεηαθηλεζεί κε ηα βειάθηα ζηηο ππάξρνπζεο εηθόλεο ή λα δεη κηα παξνπζίαζε ηνπο παηώληαο ην Play. Δνκή – (Structure) <root> <dynamic-element name='title1' type='text'></dynamic-element> <dynamic-element name='title2' type='text'></dynamic-element> <dynamic-element name='title3' type='text'></dynamic-element> <dynamic-element name='title4' type='text'></dynamic-element> <dynamic-element name='Img1' type='image'></dynamic-element> <dynamic-element name='Img2' type='image'></dynamic-element> <dynamic-element name='Img3' type='image'></dynamic-element> <dynamic-element name='Img4' type='image'></dynamic-element> </root> Πξόηππν Παξνπζίαζεο – (Template) 89 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" omit-xml-declaration="yes"/> <xsl:template match="/"> <script type="text/javascript" src="/html/js/kptemplates/Slider Content/highslidewith-gallery.js"></script> <script type="text/javascript"> <!-- Script for the Lightbox--> hs.graphicsDir = "/html/js/kptemplates/Slider Content/graphics/"; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = 'glossy-dark'; hs.wrapperClassName = 'dark'; hs.fadeInOut = true; hs.dimmingOpacity = 0.75; // Add the controlbar if (hs.addSlideshow) hs.addSlideshow({ //slideshowGroup: 'group1','group2' interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .6, position: 'bottom center', hideOnMouseOut: true } }); </script> <style type="text/css" media="screen, projection"> /*This is the Css for the Highslide Image Gallery*/ .highslide-container div { font-family: Verdana, Helvetica; font-size: 10pt; } .highslide { 90 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 outline: none; text-decoration: none; } .highslide img { border: 2px solid silver; } .highslide:hover img { border-color:#000000; } .highslide-active-anchor img { visibility: hidden; } .highslide-gallery .highslide-active-anchor img { border-color: black; visibility: visible; cursor: default; } .highslide-image { border-width: 2px; border-style: solid; border-color: white; background:#000000; } .highslide-wrapper, .highslide-outline { background: white; } .glossy-dark { background: #111; } .highslide-image-blur { } .highslide-number { font-weight: bold; color: gray; } .highslide-caption { display: none; border-top: none; font-size: 1em; padding: 5px; background: white; } 91 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 .highslide-heading { display: none; font-weight: bold; margin: 0.4em; } .highslide-dimming { position: absolute; background:#000000; } a.highslide-full-expand { background: url("/html/js/kptemplates/Slider Content/graphics/fullexpand.gif") no-repeat; display: block; margin: 0 10px 10px 0; width: 34px; height: 34px; } .highslide-loading { display: block; color: black; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 3px; border: 1px solid white; background-color: white; padding-left: 22px; background-image: url("/html/js/kptemplates/Slider Content/graphics/loader.white.gif"); background-repeat: no-repeat; background-position: 3px 1px; } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } 92 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } .highslide-move, .highslide-move * { cursor: move; } .highslide-overlay { display: none; } /* Example of a semitransparent, offset closebutton */ .closebutton { position: relative; top: -15px; left: 15px; width: 30px; height: 30px; cursor: pointer; background: url("/html/js/kptemplates/Slider Content/graphics/close.png"); /* NOTE! For IE6, you also need to update the highslideie6.css file. */ } /**************************************************************************** */ /* Controls for the galleries. */ /* Remove these if you are not using a gallery */ /**************************************************************************** */ .highslide-controls { width: 195px; height: 40px; background: url("/html/js/kptemplates/Slider Content/graphics/controlbar-white.gif") 0 -90px no-repeat; margin: 20px 15px 10px 0; 93 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 } .highslide-controls ul { position: relative; left: 15px; height: 40px; list-style: none; margin: 0; padding: 0; background: url("/html/js/kptemplates/Slider Content/graphics/controlbar-white.gif") right -90px no-repeat; list-style: none; } .highslide-controls li { float: left; padding: 5px 0; list-style: none; } .highslide-controls a { background-image: url("/html/js/kptemplates/Slider Content/graphics/controlbar-white.gif"); display: block; float: left; height: 30px; width: 30px; outline: none; } .highslide-controls a.disabled { cursor: default; } .highslide-controls a span { /* hide the text for these graphic buttons */ display: none; } /* The CSS sprites for the controlbar - see http://www.google.com/search?q=css+sprites */ .highslide-controls .highslide-previous a { background-position: 0 0; } .highslide-controls .highslide-previous a:hover { 94 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 background-position: 0 -30px; } .highslide-controls .highslide-previous a.disabled { background-position: 0 -60px; /*!important*/ } .highslide-controls .highslide-play a { background-position: -30px 0; } .highslide-controls .highslide-play a:hover { background-position: -30px -30px; } .highslide-controls .highslide-play a.disabled { background-position: -30px -60px; !important*/ } .highslide-controls .highslide-pause a { background-position: -60px 0; } .highslide-controls .highslide-pause a:hover { background-position: -60px -30px; } .highslide-controls .highslide-next a { background-position: -90px 0; } .highslide-controls .highslide-next a:hover { background-position: -90px -30px; } .highslide-controls .highslide-next a.disabled { background-position: -90px -60px; !important*/ } .highslide-controls .highslide-move a { background-position: -120px 0; } .highslide-controls .highslide-move a:hover { background-position: -120px -30px; } .highslide-controls .highslide-full-expand a { background-position: -150px 0; } .highslide-controls .highslide-full-expand a:hover { 95 /* /* χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 background-position: -150px -30px; } .highslide-controls .highslide-full-expand a.disabled { background-position: -150px -60px; /* !important*/ } .highslide-controls .highslide-close a { background-position: -180px 0; } .highslide-controls .highslide-close a:hover { background-position: -180px -30px; } /**************************************************************************** */ /* Styles for the Individual wrapper class names. */ /* See www.highslide.com/ref/hs.wrapperClassName */ /* You can safely remove the class name themes you don't use */ /**************************************************************************** */ /* hs.wrapperClassName = 'draggable-header' */ .draggable-header .highslide-header { height: 16px; } .draggable-header .highslide-header .highslide-move { cursor: move; display: block; height: 16px; position: absolute; left: 0; right: 16px; top: 0; width: auto; z-index: 1; 96 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 } .draggable-header .highslide-header .highslide-move * { display: none; } .draggable-header .highslide-header .highslide-close { position: relative; float: right; z-index: 2; padding: 0; } .draggable-header .highslide-header .highslide-close a { display: block; height: 16px; width: 16px; background-image: url("/html/js/kptemplates/Slider Content/graphics/closeX.png"); } .draggable-header .highslide-header .highslide-close a:hover { background-position: 0 16px; } .draggable-header .highslide-header .highslide-close span { display: none; } /* hs.wrapperClassName = 'no-footer' */ .no-footer .highslide-footer { display: none; } /* hs.wrapperClassName = 'wide-border' */ .wide-border .highslide-image { border-width: 10px; } .wide-border .highslide-caption { padding: 0 10px 10px 10px; } /* hs.wrapperClassName = 'borderless' */ .borderless .highslide-image { border: none; } 97 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 .borderless .highslide-caption { border-bottom: 1px solid white; border-top: 1px solid white; background: silver; } /* hs.wrapperClassName = 'outer-glow' */ .outer-glow { background: #444; } .outer-glow .highslide-image { border: 5px solid #444444; } .outer-glow .highslide-caption { border: 5px solid #444444; border-top: none; padding: 5px; background-color: gray; } /* hs.wrapperClassName = 'colored-border' */ .colored-border .highslide-image { border: 2px solid green; } .colored-border .highslide-caption { border: 2px solid green; border-top: none; } /* hs.wrapperClassName = 'dark' */ .dark { background: #111; } .dark .highslide-image { border-color: black black #202020 black; background: gray; } .dark .highslide-caption { color: white; background: #111; } .dark .highslide-controls, 98 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 .dark .highslide-controls ul, .dark .highslide-controls a { background-image: url("/html/js/kptemplates/Slider Content/graphics/controlbar-black-border.gif"); } /* hs.wrapperClassName = 'floating-caption' */ .floating-caption .highslide-caption { position: absolute; padding: 1em 0 0 0; background: none; color: white; border: none; font-weight: bold; } </style> <div class="highslide-gallery"> <a class="highslide" onclick="return hs.expand(this,{ slideshowGroup: 13} )" > <xsl:attribute name="href"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='Img1']/dynamic-content"/> </xsl:attribute> <img alt="" width="100" height="100"> <xsl:attribute name="src"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='Img1']/dynamic-content"/> </xsl:attribute> </img> </a> <div class="highslide-caption"> <xsl:if test="root/dynamic-element[@name='title1']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic- 99 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 element[@name='title1']/dynamic-content"/> </div> <a class="highslide" onclick="return hs.expand(this,{ slideshowGroup: 13} )" > <xsl:attribute name="href"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='Img2']/dynamic-content"/> </xsl:attribute> <img alt="" width="100" height="100"> <xsl:attribute name="src"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='Img2']/dynamic-content"/> </xsl:attribute> </img> </a> <div class="highslide-caption"> <xsl:if test="root/dynamic-element[@name='title2']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title2']/dynamic-content"/> </div> <a class="highslide" onclick="return hs.expand(this,{ slideshowGroup: 13} )" > <xsl:attribute name="href"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='Img3']/dynamic-content"/> </xsl:attribute> <img alt="" width="100" height="100"> <xsl:attribute name="src"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='Img3']/dynamic-content"/> </xsl:attribute> </img> </a> <div class="highslide-caption"> 100 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <xsl:if test="root/dynamic-element[@name='title3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title3']/dynamic-content"/> </div> <a class="highslide" onclick="return hs.expand(this,{ slideshowGroup: 13} )"> <xsl:attribute name="href"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='Img4']/dynamic-content"/> </xsl:attribute> <img alt="" width="100" height="100"> <xsl:attribute name="src"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='Img4']/dynamic-content"/> </xsl:attribute> </img> </a> <div class="highslide-caption"> <xsl:if test="root/dynamic-element[@name='title4']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamicelement[@name='title4']/dynamic-content"/> </div> </div> </xsl:template> </xsl:stylesheet> 101 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 4.2.4 SLIDING CONTENT Γκθάληζε Σν πξόηππν απηό ρξεζηκνπνηεί “sliding effects” (εθέ νιίζζεζεο) γηα ηελ εκθάληζε ηνπ πεξηερνκέλνπ. Ο ρξήζηεο κπνξεί λα θάλεη θιηθ είηε ζην κελνύ πνπ βξίζθεηαη ζην πάλσ κέξνο ηνπ πξνηύπνπ ή ζηα βειάθηα πνπ βξίζθνληαη δεμηά θαη αξηζηεξά ώζηε λα εκθαλίζεη ηελ ζειίδα πνπ επηζπκεί. Κάζε κία από ηηο 4 δηαζέζηκεο ζειίδεο κεηαθηλείηαη πξνο ηα αξηζηεξά ή ηα δεμηά ώζηε λα εκθαληζηεί ε επόκελε. Δνκή – (Structure) <root> <dynamic-element name='textarea1' type='text_box'></dynamic-element> <dynamic-element name='textarea2' type='text_box'></dynamic-element> <dynamic-element name='textarea3' type='text_box'></dynamic-element> <dynamic-element name='textarea4' type='text_box'></dynamic-element> <dynamic-element name='title1' type='text'></dynamic-element> <dynamic-element name='title2' type='text'></dynamic-element> <dynamic-element name='title3' type='text'></dynamic-element> <dynamic-element name='title4' type='text'></dynamic-element> </root> Πξόηππν Παξνπζίαζεο – (Template) 102 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" omit-xml-declaration="yes"/> <xsl:template match="/"> <script src="/html/js/kptemplates/Slider Content/jquery-easing.1.2.pack.js" type="text/javascript"></script> <script src="/html/js/kptemplates/Slider Content/jquery-easingcompatibility.1.2.pack.js" type="text/javascript"></script> <script src="/html/js/kptemplates/Slider Content/coda-slider.1.1.1.js" type="text/javascript"></script> <script src="/html/js/kptemplates/Slider Content/accordian.pack.js" type="text/javascript"></script> <script src="/html/js/kptemplates/Slider Content/previewbubble.js" type="text/javascript"></script> <!--This is the script for the PreviewBubble--> <script src="/html/js/kptemplates/Slider Content/kwicks.js" type="text/javascript"></script> <script src="/html/js/kptemplates/Slider Content/UJ slider.js" type="text/javascript"></script> <script type="text/javascript"> function my_kwicks(){ jQuery('.kwicks').kwicks({ duration: 300, max: 200, spacing: 0 }); } </script> <style type="text/css"> * { margin: 0; padding: 0 } 103 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 .customdiv{height:50px;} /*p { text-align: left; margin: 15px 0 } p, ul { font-size: 13px; line-height: 1.4em } p a, li a { color: #39c; text-decoration: none } p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% } p#cross-links { text-align: center } p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }*/ noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left } noscript a { color: #a00; text-decoration: underline } noscript ol { margin-left: 25px; } a:focus { outline:none; } /*img { border: 0; }*/ h3#sliderh3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left } .stripViewer .panelContainer .panel ul { text-align:left; margin: 0 15px 0 30px; } .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin:20px 0; 104 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 position: relative; width:100%; /*background:url("/html/js/kptemplates/Slider Content/body_bg.png")repeat-x*/ /*background-color:#EEE;*/ /* background:url("/html/js/kptemplates/Slider Content/htmlbg.jpg")repeat;*/ } /* These 2 lines specify style applied while slider is loading */ .csw {width:100%; height:100%;background:#ffffff; overflow:hidden} .csw .loading {margin: 200px 0 300px 0; text-align: center} /* To increase or decrease the width of the slider: First, change the width of .stripViewer from the default 700px to your preferred width. A few lines below that in the CSS, enter the same value for the width of .stripViewer .panelContainer .panel (also 700px by default). */ .stripViewer { /* This is the viewing window */ position:relative; overflow: hidden; /*border: 5px solid #000;*/ /* this is the border. should have the same value for the links */ margin: auto; width: 850px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 900px; /*460px original value*/ clear: both; background:#FFF; } .stripViewer .panelContainer { /* This is the big long container used 105 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width:100%; list-style-type: none; } .stripViewer .panelContainer .panel { /* Each panel is arranged endto-end */ float:left; height: 100%; position: relative; width: 850px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; } .stripNav { /*This is the div to hold your nav (the UL generated at run time) */ margin:auto; /*margin-right:126px; EXTRA*/ } .stripNav ul { The auto-generated set of links list-style: none; } .stripNav ul li { float:left; /*margin-right:2px;*/ /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ list-style:none; } 106 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 .stripNav a { /* The nav links */ /*font-size: 12px; font-weight: bold; text-align: center; line-height: 32px; background: #c6e3ff; color: #fff; text-decoration: none;*/ display: block; /* padding: 0 0px; width:150px; */ /*height:50px;*/ /*margin-top:105px;*/ /*cursor:pointer;*/ } /*.stripNav li.tab1 a { background:url("/html/js/kptemplates/Slider Content/Untitlved-2.gif") no-repeat;}*/ /*.stripNav li.tab2 a { background:url("/html/js/kptemplates/Slider Content/Untitvled-1.gif") no-repeat;}*/ /*.stripNav li.tab3 a { background:url("/html/js/kptemplates/Slider Content/Untitvled-3.gif") no-repeat;}*/ /*.stripNav li.tab4 a { background:url("/html/js/kptemplates/Slider Content/Untitvled-5.gif") no-repeat;}*/ /*.stripNav li.tab5 a { background:url("/html/js/kptemplates/Slider Content/General.gif") no-repeat; }*/ /*.stripNav li.tab1 a:hover { background: #333; background:url("/html/js/kptemplates/Slider Content/GeneralHover1.gif") no-repeat; } .stripNav li.tab2 a:hover { background: #333; background:url("/html/js/kptemplates/Slider 107 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Content/PersonnelHover1.gif") no-repeat; } .stripNav li.tab3 a:hover { background: #333; background:url("/html/js/kptemplates/Slider Content/LocationHover1.gif") no-repeat; } .stripNav li.tab4 a:hover { background: #333; background:url("/html/js/kptemplates/Slider Content/CommunicationHover1.gif") no-repeat; } .stripNav li.tab5 a:hover { background: #333; background:url("/html/js/kptemplates/Slider Content/Location.gif") no-repeat; } .stripNav li a.current { background: #ffffff; color: #000000; background:url("/html/js/kptemplates/Slider Content/Untitled-5h.gif") no-repeat; }*/ .stripNavL, .stripNavR { /* The left and right arrows */ position:absolute; top: 500px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display:block; height:85px; width:85px; } 108 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 .stripNavL { left:0; } .stripNavR { right: 0; } .stripNavL { background:url("/html/js/kptemplates/Slider Content/ArrowLeft.png") no-repeat center; } .stripNavR { background:url("/html/js/kptemplates/Slider Content/ArrowRight.png") no-repeat center; } /*The code below is the Css for the accordian used on page personnel*/ #basic-accordian{ /*border:5px solid #EEE;*/ padding:5px; width:100%; position:relative; height:800px; /*left:50%; top:50%;*/ /*margin-left:-175px;*/ /*z-index:2;*/ /*margin-top:-100px;*/ font-family:Verdana; } .accordion_headings{ padding:5px; 109 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 /*background:#99CC00;*/ color:#fff; /*border:1px solid #000000;*/ cursor:pointer; /*font-weight:bold;*/ font-family:Verdana; font-size:16px; background:url("/html/js/kptemplates/Slider Content/20hfeader.gif") no-repeat; height:50px; } .accordion_headings:hover{ /*background:#EEE;*/ /*background:url("/html/js/kptemplates/Slider Content/MenuHover.jpg")no-repeat;*/ } .accordion_child{ padding:10px; /*background:#EEE;*/ /* background:url("/html/js/kptemplates/Slider Content/Table-Back.gif") repeat-x;*/ font-family:Verdana; } .accordian_child_title{ /*background:url("/html/js/kptemplates/Slider Content/20hfeader.gif") no-repeat;*/ margin-top:0px; /*border-bottom:1px solid silver; margin-bottom:5px; padding-bottom:3px;*/ height:40px; } 110 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 /* .header_highlight{ background:#00CCFF; }*/ <!--CSS Fot the Apple Style Accordion Menu--> .kwicks { margin-top:0px; /* margin-bottom:0px;*/ list-style: none; position: relative; padding: 0; background-image:url("/html/js/kptemplates/Slider Content/no_flicker.jpg"); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/ } .kwicks li{ display: block; overflow: hidden; padding: 0; cursor: pointer; float: left; width: 125px; height: 40px; margin-right: 0px; background-image:url("<xsl:if test="root/dynamicelement[@name='MenuImagePath']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic-element[@name='MenuImagePath']/dynamic-content"/> </xsl:if>"); background-repeat:no-repeat; } .kwicks a{ 111 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 display:block; height:40px; text-indent:-9999px; outline:none; } #kwick1 { background-position:0px 0px; } #kwick2 { background-position:-200px 0px; } #kwick3 { background-position:-400px 0px; } #kwick4 { background-position:-600px 0px; } #kwick1.active, #kwick1:hover { background-position: 0 bottom; } #kwick2.active, #kwick2:hover{ background-position: -200px bottom; } #kwick3.active, #kwick3:hover { background-position: -400px bottom; } #kwick4.active, #kwick4:hover { background-position: -600px bottom; } #kwick1 a{ /*background-image:url("/html/js/kptemplates/Slider Content/end.jpg");*/ background-repeat:no-repeat; background-position: left 0px; 112 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 } #kwick1 a:hover{ background-position: left -80px; } #kwick4 a{ /*background-image:url("/html/js/kptemplates/Slider Content/end.jpg");*/ background-repeat:no-repeat; background-position: right -40px; } #kwick4 a:hover{ background-position: right -120px; } /*This is the CSS for the Sliding Footer*/ .jQueryslidepanel{ margin: 0 auto; padding: 0; width:850px; /*height:405px;*/ font: 75%/120% Verdana; } a:focus { outline: none; } #jQueryslidepanelcontent { /*padding:15px;*/ font-family:Verdana; background: url("/html/js/kptemplates/Slider Content/ISTLBg.jpg") repeat-x; height: 50px; display: none; } 113 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 .jQueryslidepanelbutton { margin: 0; padding: 0; border-top: solid 4px #000000; background: url("/html/js/kptemplates/Slider Content/btn-slide2.png") norepeat center top; } .btn-slide { background: url("/html/js/kptemplates/Slider Content/white-arrow.gif") norepeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Verdana; color: #fff; text-decoration: none; } .active { background-position: right 12px; } /*This is the CSS for the Announcements section*/ .ULTlink {cursor:pointer; color:#000000} .ULTlink:hover {color:#000} .newsslider {position:relative; overflow:hidden; /*border-top:3px solid #8BD7EB;*//* border-bottom:2px solid #128FF2;*/ height:70px; width:100%; background:url("/html/js/kptemplates/Slider Content/Announcements.gif") norepeat; margin-top:230px/*;margin-bottom:20px;*/} .newsslidercontent {position:absolute} .newsslidercontent .upper {border-bottom:0px #000000} .newssection {padding:15px; height:70px;font-family:Verdana;font-size:12px;} 114 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 </style> <!-- Initialize each slider on the page. Each slider must have a unique id --> <script type="text/javascript"> jQuery(window).bind("load", function() { jQuery("div#slider1").codaSlider() // jQuery("div#slider2").codaSlider() // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page. new Accordian('basic-accordian',5,'header_highlight') autoScroll('newsslider','newssection',5,true) }); </script> <script type="text/javascript"> jQuery(document).ready(function(){ my_kwicks(); jQuery(".btn-slide").click(function(){ jQuery("#jQueryslidepanelcontent").slideToggle("slow"); jQuery(this).toggleClass("active"); return false; }); }); </script> <div class="slider-wrap"> <div class="customdiv" align="center"> <ul class="kwicks" > <li id="kwick1"><a href="#1" class="cross-link">General</a></li> 115 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <li id="kwick2"><a href="#2" class="cross-link">Personnel</a></li> <li id="kwick3"><a href="#3" class="cross-link">Location</a></li> <li id="kwick4"><a href="#4" class="cross-link">Communication</a></li> </ul> </div> <div id="slider1" class="csw"> <div class="panelContainer"> <div class="panel" title=" "> <div class="wrapper"> <h3 id="sliderh3"><xsl:if test="root/dynamicelement[@name='title1']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic-element[@name='title1']/dynamic-content"/> </xsl:if> </h3> <p align="justify"><xsl:if test="root/dynamicelement[@name='textarea1']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic-element[@name='textarea1']/dynamic-content"/> </xsl:if> </p> <p><a href="#4" class="cross-link" title="Communication">« Previous</a> | <a href="#2" class="cross-link" title="Personnel">Next »</a></p> </div> </div> <div class="panel" title=" "> <div class="wrapper"> <h3 id="sliderh3"> <xsl:if test="root/dynamicelement[@name='title2']/dynamic-content != ''"><xsl:value-of disable-outputescaping="yes" select="root/dynamic-element[@name='title2']/dynamiccontent"/></xsl:if> </h3> 116 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 <p align="justify"><xsl:if test="root/dynamicelement[@name='textarea2']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic-element[@name='textarea2']/dynamic-content"/> </xsl:if> </p> <p><a href="#1" class="cross-link" title="General">« Previous</a> | <a href="#3" class="cross-link" title="Location">Next »</a> </p> </div> </div> <div class="panel" title=" "> <div class="wrapper"> <h3 id="sliderh3"> <xsl:if test="root/dynamicelement[@name='title3']/dynamic-content != ''"><xsl:value-of disable-outputescaping="yes" select="root/dynamic-element[@name='title3']/dynamiccontent"/></xsl:if> </h3> <p align="justify"> <xsl:if test="root/dynamicelement[@name='textarea3']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic-element[@name='textarea3']/dynamic-content"/> </xsl:if> </p> <p><a href="#2" class="cross-link" title="Personnel">« Previous</a> | <a href="#4" class="cross-link" title="Communication">Next »</a> </p> </div> </div> <div class="panel" title=" "> <div class="wrapper"> <h3 id="sliderh3"> <xsl:if test="root/dynamic- 117 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 element[@name='title4']/dynamic-content != ''"><xsl:value-of disable-outputescaping="yes" select="root/dynamic-element[@name='title4']/dynamiccontent"/></xsl:if> </h3> <p align="justify"> <xsl:if test="root/dynamicelement[@name='textarea4']/dynamic-content != ''"> <xsl:value-of disable-output-escaping="yes" select="root/dynamic-element[@name='textarea4']/dynamic-content"/> </xsl:if> </p> <p><a href="#3" class="cross-link" title="Location">« Previous</a> | <a href="#1" class="cross-link" title="General">Next »</a></p> </div> </div> </div><!-- .panelContainer --> </div><!-- #slider1 --> </div><!--.sliderwrap--> <div class="jQueryslidepanel"><!--Footer Useful Links--> <div id="jQueryslidepanelcontent" align="justify"> <a href="http://www.epp.teiher.gr" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.epp.teiher.gr" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <a href="http://www.teicrete.gr" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.teicrete.gr" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <a href="http://www.e-kones.teiher.gr" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.e-kones.teiher.gr" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <a href="http://www.liferay.com" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.liferay.com" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <a href="http://www.jquery.com" class="previewlink"><img 118 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.jquery.com" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <img src="/html/js/kptemplates/Slider Content/Glowing.png" alt="www.jquery.com" style="margin-left:150px;margin-right:150px;margintop:1px;" border="0"/> <a href="http://www.epp.teiher.gr" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.epp.teiher.gr" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <a href="http://www.teicrete.gr" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.teicrete.gr" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <a href="http://www.e-kones.teiher.gr" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.e-kones.teiher.gr" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <a href="http://www.liferay.com" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.liferay.com" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> <a href="http://www.jquery.com" class="previewlink"><img src="/html/js/kptemplates/Slider Content/web-3.png" alt="www.jquery.com" style="margin-left:10px;margin-right:5px;margin-top:4px;" border="0"/></a> </div> <p class="jQueryslidepanelbutton"><a href="#" class="btn-slide">Useful Links</a></p> </div> <!--<p id="cross-links"> Same-page cross-link controls:<br /> <a href="#1" class="cross-link">Panel 1</a> | <a href="#2" class="crosslink">Panel 2</a> | <a href="#3" class="cross-link">Panel 3</a> | <a href="#4" class="cross-link">Panel 4</a>| <a href="#5" class="cross-link">Panel 5</a> </p> --> 119 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 </xsl:template> </xsl:stylesheet> 5. ΔΝΑΡΙΑ ΥΡΗΗ 5.1 Δγγραθή Υρήζηη - Δίζοδος ζηο ύζηημα – Γιατείρηζη Προθίλ Ο επηζθέπηεο ηεο ηζηνζειίδαο ηνπ εξγαζηεξίνπ Σερλνινγίαο θαη πζηεκάησλ Λνγηζκηθνύ κπνξεί λα γξαθηεί ζην Portal θαη λα απνθηήζεη δηθαηώκαηα «ρξήζηε» (θάζε ρξήζηεο κε ηελ εγγξαθή ηνπ απνθηά ηνλ δηθό ηνπ ρώξν ζην portal όπνπ κπνξεί λα δεκηνπξγήζεη ηηο πξνζσπηθέο ηνπ ηζηνζειίδεο θαη λα ηηο ηξνπνπνηήζεη όπσο επηζπκεί) αθνινπζώληαο ηελ παξαθάησ δηαδηθαζία: Από ην κελνύ Welcome πνπ βξίζθεηαη πάλσ δεμηά επηιέγνπκε ην Sign In: 120 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Έπεηηα θάλνπκε θιηθ ζηελ θαξηέια Creat Account: Γκθαλίδεηαη ε ζειίδα δεκηνπξγίαο ινγαξηαζκνύ όπνπ εηζάγνπκε ηα ζηνηρεία καο (όλνκα, επίζεην, e-mail, εκεξνκελία γέλλεζεο θαζώο θαη ην θείκελν επηθύξσζεο) όπσο ζηελ επόκελε εηθόλα: Έπεηηα θάλνπκε θιηθ ζην save. Αλ παξνπζηαζηεί θάπνην ζθάικα ην ζύζηεκα ζα καο ελεκεξώζεη γηα ηηο απαξαίηεηεο δηνξζώζεηο: ηελ ζπλέρεηα εκθαλίδεηαη έλα κήλπκα πνπ καο ελεκεξώλεη γηα ηελ νινθιήξσζε ηεο εγγξαθήο. Ο θσδηθόο πξόζβαζεο δεκηνπξγείηαη απηόκαηα από ην ζύζηεκα θαη απνζηέιιεηαη ζηελ ειεθηξνληθή δηεύζπλζε πνπ δώζακε θαηά ηελ εγγξαθή καο: 121 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 Γηα ηελ είζνδν ζην ζύζηεκα εηζάγνπκε ηα ζηνηρεία καο ζηελ θαξηέια “Already Registered”. ην πεδίν Login βάδνπκε ην e-mail καο θαη ζην πεδίν Password ηνλ θσδηθό πνπ καο έδσζε ην ζύζηεκα. Έπεηηα θάλνπκε θιηθ ζην “Sign in”. Γηα ιόγνπο αζθαιείαο είλαη απαξαίηεην λα αιιάμνπκε ηνλ θσδηθό πνπ καο έδσζε ην ζύζηεκα κε θάπνην θσδηθό ηεο επηινγήο καο. Γηζάγνπκε ηνλ λέν θσδηθό δύν θνξέο γηα επηβεβαίσζε θαη θάλνπκε θιηθ ζην “Save”: Γηα ηελ δηαρείξεζε ηνπ πξνθίι καο πεγαίλνπκε ζην κελνύ “welcome” θαη θάλνπκε θιηθ ζην “My Account”: ηε ζπλέρεηα εκθαλίδεηαη ε ζειίδα δηαρείξεζεο ινγαξηαζκνύ όπνπ ν ρξήζηεο κπνξεί λα ηξνπνπνηήζεη ηα ζηνηρεία πνπ έρεη δώζεη ζην ζύζηεκα (όλνκα, επώλπκν, e-mail, θσδηθό πξόζβαζεο), λα πξνζζέζεη επηπιένλ πξναηξεηηθά ζηνηρεία (SMS Messenger ID, Instant Messenger ID, phone numbers, addresses, websites) θαζώο θαη λα αλεβάζεη κηα εηθόλα ε νπνία ηνλ ραξαθηεξίδεη). Αθνύ έρεη αιιάμεη ηα ππνρξεσηηθά θαη ελδερνκέλσο θαη ηα πξναηξεηηθά ηνπ ζηνηρεία, ν ρξήζηεο ππνβάιεη ηηο αιιαγέο: 122 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 6. ΤΜΠΔΡΑΜΑΣΑ Με ηελ νινθιήξσζε ηεο ηζηνζειίδαο ηνπ εξγαζηεξίνπ Σερλνινγίαο θαη πζηεκάησλ Λνγηζκηθνύ παξέρεηαη ζηνπο ρξήζηεο ε δπλαηόηεηα λα ελεκεξσζνύλ γηα ζέκαηα πνπ αθνξνύλ ην εξγαζηήξην (γεληθέο πιεξνθνξίεο – πξνζσπηθό – ηνπνζεζία – ζηνηρεία επηθνηλσλίαο – project πνπ έρνπλ πινπνηεζεί- ηξέρνπζεο δξαζηεξηόηεηεο θαη δεκνζηεύζεηο). Μεγάιε πξνζνρή δόζεθε ζηελ πινπνίεζε πξόηππσλ πνπ παξέρνπλ ζηνπο ρξήζηεο ηελ δπλαηόηεηα λα παξνπζηάδνπλ ην πεξηερόκελν κε ηξόπν δηαθνξεηηθό από ην 123 χεδίαςη εικονικοφ χώρου ομάδασ με την χρήςη του Liferay CMS 25 Μαΐου 2010 ζπλεζηζκέλν (ρξεζηκνπνηώληαο δηάθνξα εθέ κεηαθίλεζεο – νιίζζεζεο – “accordion” …) 7. ΒΙΒΛΙΟΓΡΑΦΙΑ Liferay Portal Administrator's Guide, Second Edition Liferay Development Guide http://www.liferay.com http://wiki.liferay.com http://www.w3schools.com http://en.wikipedia.org http://www.noupe.com http://www.jquery.com 124