WELCOME. στο watchshop.gr :P

Transcript

1 WELCOME στο watchshop.gr :P

2 INTRO Μερικά λόγια για την ιστοσελίδα μας (τα πολλά πιο κάτω) Ποιοι είμαστε.. Η ιστοσελίδα αυτή σχεδιάστηκε και στήθηκε από τους Βεργίδη Γιώργο (1743) και Αντώνη Ζάχο (2017) με πολύ κόπο, μεράκι και χαμόγελο. Θα μας έκανε ακόμα πιο χαρούμενους το γεγονός να παρακολουθήσετε αυτήν την παρουσίαση και φυσικά να κινήσουμε όσο πιο πολύ γίνεται το ενδιαφέρον σας. Αρκετά με τις σάλτσες Το watchshop.gr αποτελεί μια δυναμική ιστοσελίδα ηλεκτρονικό κατάστημα με ρολόγια υλοποιημένη με τις πιο καινοτόμες τεχνολογίες PHP,HTML και CSS. Ο βασικός κορμός της ιστοσελίδας βασίζεται στην διαδεδομένη ανοιχτού λογισμικού κονσόλα Joomla 2.5. Οι λειτουργίες του e-shop αποτελούν κομμάτι του Virtuemart ενός ανοιχτού κώδικα πρόσθετου λογισμικού για το Joomla 2.5. Αναλυτικότερα, στην ιστοσελίδα περιλαμβάνονται οι εξής λειτουργίες: Εγγραφή/είσοδος χρήστη Δημιουργία παραγγελίας και πληρωμή online Προβολή χαρακτηριστικών και εικόνων προϊόντος Προσθήκη προϊόντων στο καλάθι και προβολή λίστας Αναζήτηση προϊόντων Κατηγορίες προϊόντων ανά εταιρεία Προβολή προφίλ εταιρειών Ταξινόμηση προϊόντων

3 BASIC INFOS μερικές πληροφορίες σχετικά με τις ορολογίες που θα συναντήσουμε :)

4 E-COMMERCE Μερικές πληροφορίες σχετικά με το e-commerce Τι είναι το e-commerce? Με τον όρο ηλεκτρονικό εµπόριο (e-commerce), εννοείται κάθε εµπορική συναλλαγή κατά κύριο λόγο µέσω του ιαδικτύου. Τι είναι το e-shop? Καταστήματα ηλεκτρονικά που προσομοιάζουν με τις υπηρεσίες που προσφέρουν σε συμβατικά καταστήματα. Αναζήτηση(browsing) δοκιμή(trial). Η αγορά σε αυτά γίνεται με πιστωτικές κάρτες(πρότυπο SET) και έπειτα με αντικαταβολή. Συνηθέστεροι τρόποι πληρωμής! Ηλεκτρονικά Χρήµατα (Electronic cash) Ηλεκτρονικές Επιταγές (Electronic checks) Πληρωµές µε πιστωτική κάρτα (Credit card payments) Μικροσυναλλαγές ή Συναλλαγές µικρού ποσού (Micro payments) Πλεονεκτήματα ηλεκτρονικού καταστήματος! Μερικά από τα πλεονεκτήματα της αγοράς προϊόντων μέσω ενός ηλεκτρονικού καταστήματος είναι: Ευκολία αγοράς Μειωμένο κόστος και καλύτερες προσφορές Αγορά από το σπίτι Παράδοση στο σπίτι Ευκολίες πληρωμής Βίντεο παρουσίαση λειτουργίας προϊόντος Συνεχής ενημέρωση μέσω ηλεκτρονικού ταχυδρομείου Καλύτερη προώθηση προϊόντων με καταλόγους Αναλυτικότερα στοιχεία και χαρακτηριστικά προϊόντος Καλύτερη εξυπηρέτηση πελατών είτε μέσω ηλεκτρονικού ταχυδρομείου είτε τηλεφωνικά

5 E-COMMERCE Μερικές πληροφορίες σχετικά με το e-commerce

6 JOOMLA 2.5 Μερικά λόγια για την κονσόλα Joomla 2.5 Γεμάτο δυνατότητες αλλά και ταυτόχρονα εξαιρετικά ευέλικτο και φιλικό, το Joomla είναι η εφαρμογή που χρειάζεστε για να δημοσιεύσετε στο διαδίκτυο μια προσωπική ιστοσελίδα, αλλά και έναν ολόκληρο εταιρικό δικτυακό τόπο. Είναι προσαρμόσιμο σε περιβάλλοντα επιχειρηματικής κλίμακας όπως τα intranets μεγάλων επιχειρήσεων ή οργανισμών. Οι δυνατότητες επέκτασής του είναι πρακτικά απεριόριστες. Τι σημαίνει ανοιχτού κώδικα Η χρήση του Joomla είναι απολύτως δωρεάν. Είστε ελεύθεροι να το χρησιμοποιήσετε, να το τροποποιήσετε και να διερευνήσετε τις δυνατότητές του χωρίς να πρέπει να πληρώσετε κάποια άδεια χρήσης σε κανέναν. HTML 5 Πως λειτουργεί Το Joomla εγκαθίσταται σε έναν κεντρικό υπολογιστή, τον web server. Ο χρήστης, εσείς δηλαδή, έχετε πρόσβαση στο περιβάλλον διαχείρισης μέσω ενός browser, όπως είναι ο Internet Explorer ή ο Firefox. Από τη στιγμή που είστε εσείς ο διαχειριστής, μπορείτε να προσθέσετε οποιοδήποτε κείμενο ή γραφικό, και έτσι να δημιουργήσετε τις ιστοσελίδες σας. JOOMLA CSS 3

7 HTML 5 Μερικά λόγια για την HTML5 Τι είναι η HTML5? Η HTML5 είναι η νέα έκδοση της γνωστής γλώσσας προγραμματισμού HTLM. Η προηγούμενη έκδοση, η οποία χρησιμοποιούμε ακόμα σήμερα, βγήκε το Από τότε όμως έχουν αλλάξει πολλά στον παγκόσμιο ιστό, και έτσι η ανάγκη για standards και πλήρη συμβατότητα οδήγησε το World Wide Web Consortium (W3C) και το Web Hypertext Application Technology Working Group (WHATWG) να συνεργαστούν και να δημιουργήσουν την νέα αυτή γλώσσα. Η HTML5 είναι ακόμα υπό ανάπτυξη, αλλά μερικοί browsers υποστηρίζουν από τώρα κάποια χαρακτηριστικά της και κάποιες λειτουργίες της. Κάποιοι βασικοί κανόνες που έχουν οριστεί για την HTML5 είναι: Βάση για τα νέα χαρακτηριστικά να είναι οι HTML, CSS, DOM, και η JavaScript Ελαχιστοποίηση των plugins (όπως το Flash) Καλύτερη λειτουργία εντοπισμού λαθών Περισσότερο markup για να αντικατασταθεί το scripting Πλήρη συμβατότητα ανεξαρτήτως συσκευής. Πως ξεκίνησε η HTML5? Η HTML5 είναι η συνεργασία μεταξύ του World Wide Web Consortium (W3C) και της Web Hypertext Application Technology Working Group (WHATWG). Η WHATWG δούλευε με φόρμες και εφαρμογές ενώ το W3C δούλευε με την XHTML 2.0. Το 2006, αποφάσισαν να συνεργαστούν και να δημιουργήσουν μια νέα έκδοση της HTML. Νέα χαρακτηριστικά! Κάποια νέα χαρακτηριστικά της HTML5 είναι: Το στοιχείο canvas για το drawing Τα στοιχεία video και audio για αναπαραγωγή πολυμέσων Νέα στοιχεία περιεχομένου όπως τα footer, header, nav και section Νέα στοιχεία δημιουργίας φόρμας όπως τα calendar, date, time, , url και search

8 Τι είναι το CSS3? CSS3 είναι η επόμενη γενιά του CSS το οποίο βρίσκεται σε μια συνεχή φάση ανάπτυξης και αναμένεται να αλλάξει όλο τον παγκόσμιο ιστό όταν οριστικοποιηθεί.είναι σε εξέλιξη από το 2002 και δεν έχει ακόμη ολοκληρωθεί. Τα περισσότερα προγράμματα περιήγησης (με εξαίρεση το IE ) υποστηρίζουν σε μεγάλο βαθμό τις ιδιότητες του CSS 3. Χαρακτηριστικά και οφέλη του CSS3 CSS3 προσφέρει κάποια σπουδαία νέα selectors, τα οποία θα δώσουν στους web designers, όχι μόνο καλύτερη εμφάνιση από τις εικόνες, αλλά και πολλές δυνατότητες εξοικονόμηση χρόνου για να έχουν το επιθυμητό τελικό αποτέλεσμα. Τα κύρια οφέλη του CSS3 είναι ότι επιτρέπει την δημιουργία λειτουργιών του στυλ Javascript, χωρίς όμως να χρησιμοποιείται. Ένα άλλο συν στο CSS3 είναι η δυνατότητα δημιουργίας απίστευτων γραφικών,που μέχρι τώρα χωρίς το Photoshop ήταν αδύνατον να δημιουργηθούν. Το CSS3 σήμερα Αυτήν τη στιγμή - Safari, Chrome, Firfox, Opera 10.5 alpha και IE9 Preview υποστηρίζουν μεγάλη ποικιλία από συγκεκριμένες CSS3 μορφές. Το μειονέκτημα με το CSS3 όπως με όλα τα web design είναι ότι IE δεν τα υποστηρίζει πλήρως. ( και τι υποστηρίζει να μου πείτε,αλλά άλλο κεφάλαιο αυτό ). Η τρέχουσα σταθερή έκδοση του IE8 browser έχει ελάχιστη υποστήριξη για CSS3, Όμως το IE9 που είναι σήμερα σε εξέλιξη θα υποστηρίζει πλήρως το CSS3. Το πρόβλημα με τα IE9 είναι ότι θα διατίθεται μόνο σε Vista λειτουργικά συστήματα και άνω και όχι για τα XP δυστυχώς, τα οποία ένα μεγάλο ποσοστό εξακολουθούμε να χρησιμοποιούμε. CSS 3 Μερικά λόγια για την CSS3 Τι μπορούμε να κάνουμε με CSS3 Εδώ είναι μια μικρή λίστα από CSS3 selectors Στρογγυλεμένες γωνίες (rounded corners) Χρήση πολλαπλών εικόνων φόντου (Multiple background images ) RGB τιμές χρωμάτων (RGB color values) Χρήση οποιαδήποτε γραμματοσειράς επιθυμούμε Border image και Multiple borders User interfaces,όπως box sizing και resizing Multi column Και αρκετά άλλα..

9 WEBSITE FUNCTIONS λεπτομερής περιγραφή των λειτουργιών της ιστοσελίδας

10 MAIN MENU Βασικό μενού πλοήγησης Στην αρχική σελίδα, ο χρήστης μπορεί εύκολα να εντοπίσει και να χρησιμοποιήσει το βασικό μενού με όλες τις κατηγορίες προϊόντων. Συγκεκριμένα στο μενού υπάρχουν οι επιλογές: Αρχική σελίδα Κατηγορίες ρολογιών Προσφορές Επικοινωνία Η κάθε κατηγορία ρολογιών μπορεί να περιέχει μια υποκατηγορία για ευκολότερη εύρεση προϊόντων.

11 ITEM SLIDER Προβολή διαφήμιση καλύτερων νέων προϊόντων Για την καλύτερη προώθηση και διαφήμιση των καινούργιων και πιο δημοφιλή προϊόντων καθώς και των προσφορών, η ιστοσελίδα περιλαμβάνει σε κεντρικό σημείο της αρχικής σελίδας ένα slider με τα προϊόντα. Ο χρήστης κάνοντας κλικ σε αυτά μπορεί να μεταβεί στο ανάλογο προϊόν και να δει εικόνες και χαρακτηριστικά του προϊόντος.

12 ITEM LIST Λίστα προϊόντων Στην αρχική σελίδα, υπάρχει μια λίστα με όλα τα προϊόντα του καταστήματος. Ο χρήστης μπορεί πολύ εύκολα με το πάτημα ενός κουμπιού να προσθέσει το προϊόν που του αρέσει στο καλάθι του.

13 ITEM SORT Ταξινόμηση προϊόντων Για την λίστα αυτή έχει προστεθεί μια λειτουργία ταξινόμησης των προϊόντων ανάλογα πχ με την τιμή τους, την διαθεσιμότητά τους, την ημερομηνία κλπ

14 ITEM SEARCH Αναζήτηση προϊόντων Στην ιστοσελίδα έχει προστεθεί η λειτουργία αναζήτησης προϊόντων για να μπορούν οι χρήστες να βρουν εύκολα τα προϊόντα που επιθυμούν. Αφού ο χρήστης εκτελέσει την αναζήτηση, εμφανίζονται αποτελέσματα που ταιριάζουν στα κριτήρια και στις παραμέτρους που έχει εισάγει. Να σημειωθεί πως ο χρήστης κάνοντας κλικ πάνω σε ένα αποτέλεσμα, μπορεί να μεταβεί στο ανάλογο προϊόν.

15 USER REGISTER Εγγραφή χρήστη Οι χρήστες μπορούν με την συμπλήρωση μιας φόρμας, να γραφτούν στο σύστημα. Η εγγραφή έχει πολλά πλεονεκτήματα όπως ενημέρωση μέσω ηλεκτρονικού ταχυδρομείου, αποθήκευση ρυθμίσεων και στοιχείων, προσφορές κλπ. Ο χρήστης συμπληρώνει με τα στοιχεία του την διπλανή φόρμα, επαληθεύει το ηλεκτρονικό του ταχυδρομείο και μπορεί πλέον να κάνει χρήση των κωδικών που έχει δηλώσει.

16 USER LOGIN/CART Είσοδος χρήστη και προσωπικό καλάθι αγορών Για να εισέλθει ένας χρήστης στο σύστημα, μπορεί να συμπληρώσει την διπλανή φόρμα εισόδου με τους κωδικούς που είχε επιλέξει κατά την εγγραφή του. Μία από τις λειτουργίες που διαθέτουν οι εγγεγραμμένοι χρήστες είναι η αποθήκευση ρυθμίσεων και των προϊόντων στο προσωπικό καλάθι. Οι επισκέπτες που δεν κάνουν είσοδο, μετά την έξοδο από την ιστοσελίδα, το καλάθι τους αδειάζει.

17 ADD BILL INFO Προσθήκη διεύθυνσης αποστολής Αφού ολοκληρώσουμε τις αγορές μας δεν μένει παρά να προσθέσουμε την διεύθυνση αποστολής των προϊόντων. Στην εικόνα δεξιά βλέπουμε μία φόρμα φιλική προς τον χρήση και εύκολη στην χρήση, για προσθήκη στοιχείων όπως τηλέφωνο, ονοματεπώνυμο, διεύθυνση, τκ κλπ. Τα στοιχεία αλληλογραφίας και αποστολής προϊόντων αποθηκεύονται αν ο χρήστης είναι συνδεδεμένος και όχι απλός επισκέπτης.

18 PAYMENY METHOD Μέθοδος πληρωμής Τελευταίο βήμα για την ολοκλήρωση των αγορών του ένας πελάτης πρέπει να επιλέξει τον τρόπο πληρωμής των προϊόντων. Οι βασικότερες μέθοδοι πληρωμής είναι Αντικαταβολή VISA/MASTERCARD PAYPAL Μετά την επιλογή της μεθόδου πληρωμής, ο χρήστης μεταβαίνει αυτόματα στην σελίδα εισαγωγής στοιχείων.

19 CONTACT Τρόποι επικοινωνίας Η ιστοσελίδα διαθέτει τρόπους προς τον χρήστη να επικοινωνήσει με την εταιρεία. Αυτοί είναι είτε μέσω της συμπλήρωσης της φόρμας επικοινωνίας Είτε μέσω των διαθέσιμων στοιχείων όπως τηλέφωνο, ηλεκτρονική διεύθυνση κλπ.

20 SCREENSHOTS & FAQS μερικά στιγμιότυπα και απαντήσεις σε κάποιες βασικές ερωτήσεις

21 SCREENSHOTS Μερικά στιγμιότυπα της ιστοσελίδας μας (για περισσότερα απλά επισκεφθείτε μας) FRONTPAGE Στιγμιότυπο από την αρχική σελίδα του watchshop.gr Διακρίνουμε το βασικό μενού, ένα slider με τα πρόσφατα προϊόντα καθώς και μερικά από αυτά σε λίστα πιο κάτω ITEM INFO Στιγμιότυπο από την λεπτομερή προβολή ενός προϊόντος Διακρίνουμε την εικόνα του προϊόντος, στοιχεία σχετικά με αυτό καθώς και μια καρτέλα με reviews (σχόλια) πελατών FOOTER Στιγμιότυπο από το κάτω μέρος της σελίδας Διακρίνουμε τους φορείς δικτύωσης και τα βασικά στοιχεία επικοινωνίας

22 FAQS Απαντήσεις σε κάποιες συχνές ερωτήσεις Γιατί Joomla και όχι κώδικας HTML? Η κονσόλα Joomla αποτελεί μία από τις πιο προχωρημένες κονσόλες για ιστοσελίδες που κυκλοφορούν. Είναι δωρεάν και διαθέτει λύσεις για τα μεγαλύτερα προβλήματα ασφαλείας και κωδικοποίησης. Επίσης, είναι ευκολότερο στη χρήση από τον ωμό κώδικα HTML. Με λίγα λόγια «Δεν χρειάζεται να ξαναανακαλύψουμε τον τροχό». Οι ιστοσελίδες σε Joomla είναι συμβατές με όλους τους browsers? Με τις νέες τεχνολογίες; Οι ιστοσελίδες σε Joomla καλύπτουν κατά ένα ποσοστό 98% συμβατότητα με όλους τους γνωστούς browsers που κυκλοφορούν. Οι λειτουργίες και ο κώδικας που χρησιμοποιείται πλέον, είναι συμβατά και με τις διάφορες νέες συσκευές όπως smartphone, tablets κλπ. Όσον αφορά τις νέες τεχνολογίες, ο κώδικας υπόκειται συνεχώς σε αναβαθμίσεις με αποτέλεσμα να συμβαδίζει με HTML5 και CSS3 χωρίς να παρουσιάζονται προβλήματα.

23 ANY QUESTIONS? Υπάρχουν ερωτήσεις; Αν ναι, μην διστάσετε να μας ρωτήσετε Θα μας βρείτε εδώ Ο υπολειπόμενος χρόνος μας θα διατεθεί προς πραγματοποίηση ερωτήσεων/αποριών και διευκρινήσεων. Website: Για την ακρίβεια δεν διαθέταμε τον χρόνο και το χρήμα για να αγοράσουμε επίσημο domain οπότε και χρησιμοποιήσαμε τον προσωπικό μας ιστοχώρο του ΑΠΘ. Website:

24 THANK YOU FOR YOUR PATIENCE!!! Μην ξεχάσετε να επισκεφθείτε το ηλεκτρονικό μας κατάστημα στο