Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8

Περιεχόμενα Κατέβασμα και εγκατάσταση Netbeans 8 Δημιουργία project εφαρμογής HTML(5)/CSS/Javascript ''Εκτέλεση'' εφαρμογής στον ενσωματωμένο Browser Δυνατότητες ανάπτυξης σελίδων HTML Δυνατότητες σύνταξης κανόνων CSS Άσκηση εξοικείωσης με το περιβάλλον ανάπτυξης

Εγκατάσταση https://netbeans.org/downloads/

Δημιουργία Netbeans HTML5 Project 1. Επιλέξτε File > New Project 2. Επιλέξτε κατηγορία HTML5/Javascript και HTML5/JS Application 3. Πατήστε ''Next''

Δημιουργία Netbeans HTML5 Project 1. Αλλάξτε το ''Project Name'' σε ''exhtml5_js'' 2. Αλλάξτε (αν θέλετε) το ''Project Location πατώντας ''Browse'' 3. Πατήστε ''Next''

Δημιουργία Netbeans HTML5 Project 1. Πατήσε ξανά ''Next για να περάσετε στο 4ο βήμα (Tools) 2. Ακυρώστε όλες τις επιλογές 3. Πατήστε ''Finish''

Δημιουργία Netbeans HTML5 Project Εμφάνιση του Project exhtml5_js Κειμενογράφος (Editor) Tab ''Projects'' Tab ''Navigator''

''Εκτέλεση'' Project στον Ενσωματωμένο Browser του Netbeans Στη γραμμή εργαλείων... Επιλέξτε...

''Εκτέλεση'' Project στον Ενσωματωμένο Browser του Netbeans Πατήστε (δεξί κλίκ) στο όνομα του project... Επιλέξτε ''Run''

Το Περιβάλλον ''Εκτέλεσης'' Netbeans Connector Σ6 Σ3 Σ5 Σ1 Σ2 Σ4 Σ7

Διαχείριση Παραθύρου του Browser Για να μεγαλώσετε την εμφάνιση του Browser (Σ1 στην προηγούμενη διαφάνεια): Πατήστε......και στη συνέχεια περάστε το ποντίκι πάνω από το εικονίδιο που εμφανίζεται στην κάτω μπάρα του Netbeans Μεγαλώστε το παράθυρο του Browser που εμφανίζεται όσο θέλετε Το παράθυρο θα παραμένει ανοιχτό για όσο διάστημα έχετε το ποντίκι στο εσωτερικό του

(Στατική) Διαχείριση του DOM της Σελίδας Στο αρχείο index.html Αλλάξτε τον τίτλο της σελίδας μεταβάλλοντας την ετικέτα <title>...</title> σε <title>εφαρμοσμένη Πληροφορική ΙΙ(Ε)</title> Μεταβάλλετε το περιεχόμενο της ετικέτας <div>...</div> σε <h1>περιεχόμενα</h1>

(Στατική) Διαχείριση του DOM της Σελίδας Με την πληκτρολόγηση του ''<h'', το περιβάλλον εμφανίζει τις πιθανές επιλογές (αυτο-) συμπλήρωσης της εντολής σας (κάτω) καθώς και την τεκμηρίωση της επιλεγμένης επιλογής (πάνω). Πατώντας <tab> η επιλογή προστίθεται στο αρχείο σας. Επίσης, στο παράθυρο ''Navigator'' μπορείτε να δείτε την μεταβολή του DOM της σελίδας.

(Στατική) Διαχείριση του DOM της Σελίδας Με την συμπλήρωση του ''<h1>'', το περιβάλλον εμφανίζει την επιλογή προσθήκης του τέλους της ετικέτας την οποία μπορείτε να επιλέξετε πατώντας διπλό κλικ πάνω της. Επίσης το <h1> εμφανίζεται (πριν τη συμπλήρωση) κόκκινο, δηλώνοντας ότι η ετικέτα <h1> πρέπει να ακολουθείται από το τέλος της (λάθος σύνταξης). Φέρνοντας το ποντίκι πάνω σε ένα από τα 2 εικονίδια των γραμμών 15, 17 μπορείτε να δείτε πιθανές οδηγίες διόρθωσης. Οι ενδείξεις λάθους σύνταξης διορθώνονται με τη συμπλήρωση του </h1> στον κώδικα HTML.

(Στατική) Διαχείριση του DOM της Σελίδας Μπορείτε να δείτε τη μεταβολή στο DOM της σελίδας στο παράθυρο Navigator Προσθέστε στο εσωτερικό του <div>...</div> την παρακάτω μη ταξινομημένη λίστα <ul> (unordered list--ul): </ul> <li>html/css</li> <li>javascript</li> <li>ext JS</li> <li>openlayers</li>

(Στατική) Διαχείριση του DOM της Σελίδας Για τη σωστότερη μορφοποίηση του κώδικά σας, πατήστε δεξί κλικ στο εσωτερικό του αρχείου index.html και επιλέξτε ''Format''. Αποθηκεύστε το αρχείο σας επιλέγοντας ''Menu>File>Save'' ή με Ctrl-s. Οι αλλαγές που κάνατε στη σελίδα εμφανίζονται αμέσως στον Browser.

Τροποποίηση Εμφάνισης Σελίδας HTML Με Τη Γλώσσα CSS Μεταβάλλετε την εμφάνιση των στοιχείων <div> της σελίδας με την προσθήκη του παρακάτω κανόνα εμφάνισης στο τμήμα <head> του index.html: <style> div { background-color:orange; /* υπόβαθρο πορτοκαλί*/ color:white; /* γράμματα άσπρα */ margin:20px; padding:20px; /* περιθώριο του < div>από όλες τις πλευρές της σελίδας*/ /* απόσταση από όλες τις πλευρές των ορίων του <div>*/ } </style> Αποθηκεύστε το αρχείο και δείτε την αλλαγμένη σελίδα στον Browser.

Τροποποίηση Εμφάνισης Σελίδας HTML Με Τη Γλώσσα CSS Στο παράθυρο ''Browser DOM'' πατήστε πάνω στο ''div''. Στο παράθυρο ''div- CSS Styles'' μπορείτε Να δείτε τον κανόνα εμφάνισης για τα <div> Να αλλάξετε τιμές των ιδιοτήτων και να προσθέσετε/αφαιρέσετε νέες ιδιότητες στον κανόνα, οι οποίες θα εφαρμοστούν στα στοιχεία <div> της σελίδας. Κάθε αλλαγή σας προστίθεται άμεσα στον ορισμό της εμφάνισης του κανόνα div στο αρχείο σας.

Τροποποίηση Εμφάνισης Σελίδας HTML Με Τη Γλώσσα CSS Κάθε φορά που πηγαίνετε το ποντίκι σε ένα στοιχείο της σελίδας στο παράθυρο ''Βrowser DΟΜ'', στον Browser εμφανίζεται η γραφική απεικόνιση αυτού του στοιχείου στη σελίδα.

Δημιουργία Αρχείου CSS Δημιουργήστε τον φάκελο ''css'' στο παράθυρο ''Projects'' Πατήστε δεξί κλικ πάνω στο ''Site Root'' Στο μενού που ανοίγει επιλέξτε ''New>Folder'' Στο παράθυρο που ανοίγει δώστε ''Folder Name'' ''css'' και πατήστε ''Finish'' Δημιουργήστε το αρχείο ''first-css.css'' στο παράθυρο ''Projects'' Πατήστε δεξί κλικ πάνω στο ''css'' Στο μενού που ανοίγει επιλέξτε ''New>Cascading Style Sheet'' Στο παράθυρο που ανοίγει δώστε ''File Name'' ''first-css'' και πατήστε ''Finish''

Δημιουργία Αρχείου CSS Μεταφέρετε τον κώδικα μεταξύ των <style>...</style> από το αρχείο ''index.html'' στο αρχείο ''first-css.css''. Αποθηκεύστε και τα 2 αρχεία (η εμφάνιση της σελίδας στον Browser αλλάζει στην αρχική της μορφή). Στο αρχείο index.html, αντικαταστήστε το κείμενο με τη γραμμή <style></style> <link rel="stylesheet" type="text/css" href="css/first-css.css"> η οποία συνδέει τη σελίδα HTML με τα περιεχόμενα του αρχείου CSS (η εμφάνιση της σελίδας στον Browser αλλάζει και πάλι, σύμφωνα με τις ιδιότητες της κλάσης div του αρχείου CSS).

Προσθήκη κανόνα σε αρχείο CSS Στον κειμενογράφο επιλέξτε το αρχείο ''firstcss.css''. Στο παράθυρο της CSS, επιλέξτε ''Document'' και στη συνέχεια πατήστε το εικονίδιο ''Edit CSS Rules''. Στο παράθυρο που ανοίγει Επιλέξτε ''Element'' Γράψτε ''Selector'' body Πατήστε ''ΟΚ'' (ο κανόνας προστίθεται στο αρχείο ''first-css.css'')

Προσθήκη κανόνα σε αρχείο CSS Για την προσθήκη ιδιοτήτων στον κανόνα: Στο παράθυρο ''body properties'' Πατήστε στο ''Add properties'' Επιλέξτε από τη λίστα ιδιοτήτων την ''background-color'' Επιλέξτε στη συνέχεια το χρώμα ''forestgreen (ή όποιο άλλο)'' από τη λίστα χρωμάτων (η ιδιότητα προστίθεται στον ορισμό του κανόνα, στο αρχείο ''first-css.css'') Η εμφάνιση της σελίδας αλλάζει και πάλι σύμφωνα με τους 2 κανόνες.

Παλέτα Στοιχείων HTML5 του Netbeans Σταματήστε την ''εκτέλεση'' της εφαρμογής κλείνοντας το Tab της σελίδας στον Browser Προσθέστε στο αρχείο index.html τη γραμμή <h1>javascript</h1>

Παλέτα Στοιχείων HTML5 του Netbeans Προσθέστε στο περιβάλλον την παλέτα στοιχείων HTML5 του Netbeans, επιλέγοντας από το κυρίως μενού Window>IDE Tools>Palette Αλλάξτε γραμμή στο αρχείο index.html Κρατήστε με το ποντίκι το στοιχείο ''Οrdered List'' της παλέτας και σύρετε το στην κενή γραμμή που δημιουργήσατε στο αρχείο index. html

Παλέτα Στοιχείων HTML5 του Netbeans Στο παράθυρο που ανοίγει Δώστε ''Νumber of Items''... Επιλέξτε Πατήστε ''ΟΚ'' Στο στοιχείο διατεταγμένης λίστας (ordered list) <ol> που δημιουργήθηκε αυτόματα στο index.html προσθέστε τα εξής στοιχεία:

Άσκηση Εξοικείωσης με το IDE Μορφοποιήστε και αποθηκεύστε το αρχείο index.html Εκτελέστε ξανά την εφαρμογή για να δείτε τις τελευταίες μεταβολές στη σελίδα. Προσθέστε στο αρχείο ''first-css.css'' ένα νέο κανόνα για τα στοιχεία <ol> της σελίδας που να περιλαμβάνει τις ιδιότητες: χρώμα υποβάθρου χρώμα χαρακτήρων σύνορο (border) και χρώμα συνόρου (border-color) και τιμές ιδιοτήτων της αρεσκείας σας. Προσθέστε ένα νέο στοιχείο <div> στο σώμα της σελίδας και στο εσωτερικό του προσθέστε Το στοιχείο <h1> με κείμενο ''Ext JS'' και Τη μή ταξινομημένη λίστα με στοιχεία ''Το σύστημα κλάσεων της Εxt JS'' ''Οπτικός προγραμματσιμός με Ext JS'' Αποθηκεύστε τις αλλαγές σας. Σταματήστε την ''εκτέλεση'' της εφαρμογής.