ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΩΝ Ένας Συνοπτικός Οδηγός Καμήλαλη Δέσποινα Μαθηματικός, MSc Πληροφορικής, Υποψήφια Διδάκτωρ Χαροκοπείου Πανεπιστημίου Αθηνών.

Παρουσίαση με θέμα: "ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΩΝ Ένας Συνοπτικός Οδηγός Καμήλαλη Δέσποινα Μαθηματικός, MSc Πληροφορικής, Υποψήφια Διδάκτωρ Χαροκοπείου Πανεπιστημίου Αθηνών."— Μεταγράφημα παρουσίασης:

1 ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΩΝ Ένας Συνοπτικός Οδηγός Καμήλαλη Δέσποινα Μαθηματικός, MSc Πληροφορικής, Υποψήφια Διδάκτωρ Χαροκοπείου Πανεπιστημίου Αθηνών.

2 BLOG BLOG HTML HTML CSS CSS JAVA SCRIPT JAVA SCRIPT PHP PHP DRUPAL DRUPAL Ενδιαφέρεστε για τη δημιουργία ιστοσελίδων, αλλά έχετε μπερδευτεί! Τι σημαίνουν όλα αυτά, από πού πρέπει να ξεκινήσετε; Εργαλεία Δημιουργίας Ιστοσελίδων

3 Θέλω να κατασκευάζω ιστοσελίδες. Θέλω να κατασκευάζω ιστοσελίδες. Να τις διαμορφώνω όπως θέλω. Να τις διαμορφώνω όπως θέλω. Μου αρέσει ο προγραμματισμός! Μου αρέσει ο προγραμματισμός! Θέλω να κατασκευάζω ιστοσελίδες. Θέλω να κατασκευάζω ιστοσελίδες. Να τις διαμορφώνω όπως θέλω. Να τις διαμορφώνω όπως θέλω. Μου αρέσει ο προγραμματισμός! Μου αρέσει ο προγραμματισμός! Πρώτα πρέπει να αποφασίσετε τι θέλετε! Επιλέξτε αυτό που σας εκφράζει. Θέλω να βρίσκω μία ιστοσελίδα έτοιμη και να τη γεμίζω με περιεχόμενο. Θέλω να βρίσκω μία ιστοσελίδα έτοιμη και να τη γεμίζω με περιεχόμενο. Δε θέλω να ξέρω πώς κατασκευάστηκε! Δε θέλω να ξέρω πώς κατασκευάστηκε! Θέλω να βρίσκω μία ιστοσελίδα έτοιμη και να τη γεμίζω με περιεχόμενο. Θέλω να βρίσκω μία ιστοσελίδα έτοιμη και να τη γεμίζω με περιεχόμενο. Δε θέλω να ξέρω πώς κατασκευάστηκε! Δε θέλω να ξέρω πώς κατασκευάστηκε! Ποιοι είναι οι στόχοι σας;

4 Είμαι ιδιώτης. Θέλω να γράφω τις απόψεις μου, για διάφορα θέματα, ή για κάποιο θέμα στο οποίο είμαι σχετικά ειδικός. Είμαι ιδιώτης. Θέλω να γράφω τις απόψεις μου, για διάφορα θέματα, ή για κάποιο θέμα στο οποίο είμαι σχετικά ειδικός. Υπάρχει μεγάλη διαφορά σ’ αυτό που χρειάζεστε, αν είστε ιδιώτης, ή εταιρία. Επιλέξτε αυτό που σας αντιπροσωπεύει. Είμαι επαγγελματίας. Έχω δικιά μου εταιρία. Θέλω ένα site που θα προβάλλει την εταιρία μου και θα πουλάει ίσως και τα προϊόντα μου on line. Είμαι επαγγελματίας. Έχω δικιά μου εταιρία. Θέλω ένα site που θα προβάλλει την εταιρία μου και θα πουλάει ίσως και τα προϊόντα μου on line. Ποια είναι η ιδιότητά σας;

5 Δοκιμάστε: www.wordpress.com www.blogger.com Δοκιμάστε: www.wordpress.com www.blogger.com blog! Αυτό που θα σας ικανοποιούσε, θα ήταν η δημιουργία ενός blog! Μπορείτε πολύ εύκολα να δημιουργήσετε ένα blog και να δημοσιεύετε εκεί τα άρθρα σας. Είστε ιδιώτης

6 Πρέπει να απευθυνθείτε σε κάποιον Web Developer και να του αναθέσετε να κατασκευάσει για σας, έναν δικτυακό τόπο που θα καλύπτει τις ανάγκες σας. Στη συνέχεια εσείς, θα μπορείτε να προσθέσετε περιεχόμενο. Drupal! Ο Web Developer θα μπορούσε να δημιουργήσει το site σας, με το Drupal! Είστε επαγγελματίας

7 Πολλά πράγματα πρέπει να μάθει κανείς, για να γίνει επαγγελματίας στην Ανάπτυξη Δικτυακών Τόπων (Web Developer) Ας εξετάσουμε βήμα – βήμα, τα σημαντικότερα Web Developer

8 Η HTML, είναι η βασική γλώσσα δημιουργίας ιστοσελίδων. Κάθε ιστοσελίδα αρχίζει και τελειώνει με την ετικέτα: HTML Hello World Hello World Hello World Κώδικας HTML Ιστοσελίδα στον browser

9 Η CSS, είναι γλώσσα μορφοποίησης του περιεχομένου. Μπορούμε να προσθέσουμε τις εντολές της στον κώδικα της HTML, για να πάρουμε πιο εντυπωσιακές ιστοσελίδες! CSS p.x {color:rgb(0,0,255);} Δεν είναι της κλάσης x. Είναι της κλάσης x! p.x {color:rgb(0,0,255);} Δεν είναι της κλάσης x. Είναι της κλάσης x! Δεν είναι της κλάσης x. Είναι της κλάσης x! Κώδικας HTML + CSS Ιστοσελίδα στον browser

10 Η JAVA SCRIPT, είναι μία γλώσσα προγραμματισμού για ιστοσελίδες. Μπορούμε να προσθέσουμε τις εντολές της στον κώδικα της HTML, για να πάρουμε δυναμικές ιστοσελίδες! Οι εντολές της Java Script εκτελούνται στον υπολογιστή του χρήστη. JAVA SCRIPT Πάτησέ με function myFunction() { var x=""; var time=new Date().getHours(); if (time<20) { x="Καλημέρα!"; } document.getElementById("demo").innerHTML=x; } Πάτησέ με function myFunction() { var x=""; var time=new Date().getHours(); if (time<20) { x="Καλημέρα!"; } document.getElementById("demo").innerHTML=x; }

11 Η PHP, είναι κι αυτή μία γλώσσα προγραμματισμού για ιστοσελίδες. Μπορούμε να προσθέσουμε τις εντολές της στον κώδικα της HTML, για να πάρουμε δυναμικές ιστοσελίδες, οι οποίες μπορούν να συνδεθούν με βάσεις δεδομένων και να προσφέρουν απεριόριστες δυνατότητες. Οι εντολές PHP εκτελούνται στο server! PHP … $query = "SELECT * FROM USER WHERE EMAIL='$user' and PASSWORD='$password' "; $results = mysql_query ($query) or die(mysql_error()); $res=mysql_num_rows($results); if ($res ==1) { $_SESSION['authuser'] = 1; echo «Καλώς ήλθατε", $_POST['Name']; echo ' Η αρχική σας σελίδα '; } else { echo «Έχετε ξεχάσει το όνομα χρήστη ή τον κωδικό πρόσβασης"; echo " "; echo «Παρακαλώ προσπαθήστε ξανά"; exit(); } ?> … $query = "SELECT * FROM USER WHERE EMAIL='$user' and PASSWORD='$password' "; $results = mysql_query ($query) or die(mysql_error()); $res=mysql_num_rows($results); if ($res ==1) { $_SESSION['authuser'] = 1; echo «Καλώς ήλθατε", $_POST['Name']; echo ' Η αρχική σας σελίδα '; } else { echo «Έχετε ξεχάσει το όνομα χρήστη ή τον κωδικό πρόσβασης"; echo " "; echo «Παρακαλώ προσπαθήστε ξανά"; exit(); } ?> Έλεγχος πρόσβασης του χρήστη

12 HTML + CSS + JAVA SCRIPT + PHP HTML: προσδιορίζει το περιεχόμενο μιας ιστοσελίδας. CSS: προσδιορίζει τη μορφή και τη διάταξη του περιεχομένου της ιστοσελίδας. JavaScript - PHP: προσδιορίζουν τη συμπεριφορά της ιστοσελίδας. Το’ πιασα!

13 Το Drupal είναι ένα Content Management System. Ένα σύστημα εγκατάστασης, ανάπτυξης και διαχείρισης δικτυακών τόπων, με απεριόριστες δυνατότητες! Συνδυάζοντας όλα τα προηγούμενα εργαλεία, το Drupal σας δίνει τη δυνατότητα να γίνετε ένας επαγγελματίας Web Developer DRUPAL

14 ( HTML + CSS + JAVA SCRIPT + PHP + … ) = DRUPAL HTML – CSS: περιεχόμενο και μορφοποιήσεις. JAVASCRIPT - PHP: προγραμματισμός για δυναμικές ιστοσελίδες. DRUPAL: σύστημα που περιλαμβάνει όλα τα παραπάνω, για την ανάπτυξη πανίσχυρων δικτυακών τόπων! Το’ πιασα!

15 deskamilali@gmail.com