Μιχαλάκη Αικατερίνη – AEM: 2414 Μπελμέζα Βασιλική – ΑΕΜ: 2629

Παρουσίαση με θέμα: "Μιχαλάκη Αικατερίνη – AEM: 2414 Μπελμέζα Βασιλική – ΑΕΜ: 2629"— Μεταγράφημα παρουσίασης:

1 Μιχαλάκη Αικατερίνη – AEM: 2414 Μπελμέζα Βασιλική – ΑΕΜ: 2629
Πτυχιακη Εργασια «Σχεδιαση υποδειγματων (templates) για συστηματα διαχειρισησ περιεχομενου» Σπουδάστριες: Μιχαλάκη Αικατερίνη – AEM: 2414 Μπελμέζα Βασιλική – ΑΕΜ: 2629 Επιβλέπων καθηγητής: Δρ. Τσιμπίρης Αλκιβιάδης

2 Σκοποσ τησ πτυχιακησ Σκοπός αυτής της πτυχιακής εργασίας είναι η μελέτη των απαιτήσεων, η σχεδίαση και η ανάπτυξη προτύπων (templates) για συστήματα διαχείρισης περιεχομένου. Τα βήματα που ακολουθήθηκαν είναι: Μελέτη της δομής και λειτουργίας των προτύπων Joomla Δημιουργία προτύπου Joomla Δημιουργία εφαρμογής Joomla με την χρήση του προτύπου

3 Τεχνολογιεσ που χρησιμοποιηθηκαν
XAMPP Joomla API PHP MySQL CSS 3 HTML 5 JavaScript jQuery Bootstrap 3

4 Δημιουργια προτυπου Joomla
templateDetails.xml Το αρχείο αυτό αποτελεί το αρχείο εγκατάστασης του προτύπου και περιέχει όλες τις απαραίτητες πληροφορίες ώστε να εγκατασταθεί το πρότυπο με τις παραμέτρους που επιθυμούμε. index.php Είναι το αρχείο το οποίο περιέχει το σύνολο του κώδικα HTML της εφαρμογής και αυτό θα προβάλλεται ανάλογα με τις παραμέτρους που έχουν δοθεί. Λοιποί φάκελοι Για την ορθή λειτουργία και εμφάνιση του προτύπου χρειάζεται να χρησιμοποιηθούν επιπρόσθετα αρχεία όπως αρχεία CSS και JavaScript. Για τον λόγο αυτό δημιουργούμε επιπλέον φακέλους ώστε τα αρχεία μας να είναι κατηγοριοποιημένα.

5 Σχεδιαγραμμα αρχειων και φακελων προτυπου

6 templateDetails.xml Το αρχείο templateDetails.xml περιέχει τις εξής πληροφορίες: Τι είδους extension δημιουργείται Τι αρχεία και φάκελοι θα συμπεριληφθούν Ορίζονται οι θέσεις (positions) του προτύπου Ορίζονται οι παράμετροι του προτύπου

7 templateDetails.xml - συνεχεια
<?xmlversion="1.0"encoding="utf-8"?> <!DOCTYPEinstallPUBLIC"-//Joomla! 2.5//DTD template 1.0//EN"" <extension version="3.0« type="template« client="site"> <name>Custom Template</name> <version>1.0</version> <creationDate>18/02/2015</creationDate> <files> <filename>index.php</filenam> <filename>templateDetails.xml</filename> <folder>images</folder> <folder>css</folder> <folder>js</folder> <folder>html</folder> <folder>fonts</folder> </files> </fieldset> <fieldset name="breadcrumbs" label="Breadcrumbs"> <field name="breadcrumbsImage" type="media" label="Εικόνα Breadcrumbs" description="Η εικόνα για το Breadcrumbs"/>

8 templateDetails.xml - συνεχεια
<positions> <position>breadcrumbs</position> <position>menu</position> <position>logo</position> <position>header</position> <position>sidebar</position> <position>boxes</position> <position>position1</position> <position>position2</position> <position>position3</position> <position>position4</position> <position>footer</position> <position>footer-1</position> <position>footer-2</position> <position>footer-3</position> <position>footer-4</position> </positions>

9 index.php Είναι το αρχείο το οποίο περιέχει τον κώδικα HTML και συνδέει όλα τα αρχεία που είναι απαραίτητα μεταξύ τους. defined('_JEXEC') or die; //ανάκτηση παραμέτρων $params = JFactory::getApplication()->getTemplate(true)->params; //Αντικείμενο εγγράφου $doc = JFactory::getDocument(); //Stylesheets (css) $doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.css'); $doc->addStyleSheet('templates/'.$this->template.'/css/tmpl.css');

10 index.php - συνεχεια Στο αρχείο index.php εφαρμόζουμε τις παραμέτρους του προτύπου έτσι ώστε να εμφανίσουμε το περιεχόμενο που επιθυμούμε. <!-- LOGO --> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 logo"> <h1> <?php if($params->get('logoText')){ echo "<a href=".JUri::base()." class='logo-link'>" .$params->get('logoText')."</a>"; } else if($params->get('logoImage')){ echo "<a href=".JUri::base()."><img src=".JUri::base().$params->get('logoImage')."></a>"; }else{ echo "<a href=".JUri::base()." class='logo-link'>Λογότυπο</a>"; ?> </h1> </div>

11 Χρηση κλασεων CSS Για να αποκτήσει η εφαρμογή την μορφή που αρχικά σχεδιάστηκε εφαρμόστηκαν ορισμένες κλάσεις CSS, μερικές από τις οποίες προήλθαν έτοιμες από το Bootstrap 3 ενώ άλλες δημιουργήθηκαν από εμάς. .welcome{ margin-top: 10%; padding: 50px; background: rgba(0,0,0,0.7); color: white; border: 2px white solid; } .welcome-btn{ border-radius: 0px; background: none; border: 1px white solid; margin-top: 30px; padding: 12px;

12 συμπερασματα Διαδικασία μελέτης:οι τρόποι σχεδίασης και ανάπτυξης μπορεί να διαφέρουν από πρότυπο σε πρότυπο. Χρήση των τεχνολογιών για την ανάπτυξη:σημαντικό ρόλο παίζει η χρήση frameworks καθώς και η σωστή χρήση τους. Xρήση του προτύπου από απλούς χρήστες:ένας χρήστης με διάθεση να εκπαιδευτεί επάνω στο αντικείμενο δεν θα βρει δυσκολίες στην κατανόηση του τρόπου λειτουργίας και των δυνατοτήτων του προτύπου.