Σχεδιασμός ιστοσελίδας με Angularjs και Bootstrap.

Έχουμε καλύψει τις βασικές έννοιες της Angularjs και θα αλλάξουμε την ιστοσελίδα που είχαμε σχεδιάσει με το Bootstrap έτσι ώστε να φορτώνει ορισμένα από τα δεδομένα της με τη χρήση της Angularjs. Δείτε τα σχόλια στο κώδικα για να κατανοήσετε τα επιμέρους τμήματα της σελίδας. Μπορείτε να αντιγράψτε να τροποποιήστε και να χρησιμοποιήστε το θέμα για τις δικές σας ιστοσελίδες.

 

Δοκιμάστε!

 

AngularJS API

Το AngularJS API(Application Programming Interface) είναι ένα σύνολο λειτουργιών JavaScript για την εκτέλεση κοινών εργασιών, όπως η σύγκριση, η επανάληψη και η μετατροπή δεδομένων. Μερικές API λειτουργίες είναι οι angular.isNumber, angular.lowercase, angular.uppercase, angular.isString.

 

Δοκιμάστε!

 

AngularJS Form Validation(επικύρωση)

Στις εφαρμογές μας με την AngularJS μπορούμε να ελέγξουμε τα δεδομένα εισόδου (input, textarea, select). Αν θέλουμε να επικυρώσουμε την είσοδο ενός χρήστη στην εφαρμογή μας είναι απαραίτητη η επικύρωση στον server.

 

Δοκιμάστε!

 

AngularJS Forms

Στις εφαρμογές μας με την AngularJS μπορούμε να μεταφέρουμε εύκολα δεδομένα στα στοιχεία input, select, button, textarea της HTML με τη χρήση της ng-model οδηγίας.

 

Δοκιμάστε!

 

AngularJS Tables

Στην AngularJS μπορούμε να εμφανίσουμε πολύ εύκολα tables με τη χρήση της ng-repeat.

 

Δοκιμάστε!

 

AngularJS Events

H AngularJS έχει τις δικές της HTML οδηγίες γεγονότων(events), όπως οι ng-click, ng-dblclick , ng-mousedown, ng-mouseenter κ.α.

 

Δοκιμάστε!

 

AngularJS Services(Υπηρεσίες)

Στην AngularJS η υπηρεσία(service) είναι μία συνάρτηση(function) ή ένα αντικείμενο(object) που εκτελείται μέσα σε μία AngularJS εφαρμογή. Υπάρχουν τριάντα έτοιμα services(π.χ. $location, $http, $timeout, $interval). Στο παράδειγμά μας θα δούμε το $timeout service.

 

Δοκιμάστε!

 

AngularJS Filters(φίλτρα)

Στην AngularJS μπορούμε να προσθέσουμε φίλτρα(filters) για να μορφοποιήσουμε τα δεδομένα μας. Η AngularJS έχει τα εξής φίλτρα: currency, date, json, limitTo, lowercase, number, orderBy, uppercase. Μπορούν να προστεθούν με τη χρήση του χαρακτήρα | που ακολουθείται από ένα φίλτρο.

 

Δοκιμάστε!

 

AngularJS Scope

Μία εφαρμογή της AngularJS αποτελείται από:

  • View, που είναι η HTML.
  • Model, που είναι τα διαθέσιμα στοιχεία για την τρέχουσα προβολή δεδομένων(Scope).
  • Controller, που είναι η JavaScript συνάρτηση που ελέγχει τα δεδομένα.

Το scope είναι ένα αντικείμενο JavaScript με ιδιότητες και μεθόδους, που είναι διαθέσιμο και στο Model και στον Controller.

 

Δοκιμάστε!

 

AngularJS Ενότητες(Modules)

Μια ενότητα(module) της AngularJS καθορίζει μια εφαρμογή με τη χρήση της συνάρτησης angular.module. Μέσα στην εφαρμογή μπορούμε να προσθέσουμε controllers, directives, filters, και άλλα στοιχεία της AngularJS.

 

Δοκιμάστε!

 

AngularJS Expressions

Η AngularJS δεσμεύει δεδομένα HTML χρησιμοποιώντας εκφράσεις(Expressions). Οι AngularJS εκφράσεις μπορούν να γραφούν με δύο τρόπους είτε μέσα σε διπλές αγκύλες {{ expression }}, είτε με τη μορφή ng-bind= ‘expression’ .

 

Δοκιμάστε!

 

AngularJS

Στις επόμενες αναρτήσεις θα ασχοληθούμε με την AngularJS η οποία είναι ένα JavaScript framework που προσθέτει στην HTML νέα χαρακτηριστικά. Με την AngularJS είναι πολύ εύκολο να κάνουμε εφαρμογές SPA(Single Page Applications), όλα τα quiz στα μαθήματα μας έχουν γίνει με την AngularJS. Αρχικά θα ασχοληθούμε με βασικές έννοιες όπως τι είναι οι controllers, expressions, directives, modules και μετά θα εξετάσουμε έννοιες όπως DOM, Forms, Validation και άλλες. Απαραίτητες γνώσεις για την κατανόηση της AngularJS είναι οι βασικές έννοιες σε HTML, CSS, και JavaScript.

 

Δοκιμάστε!

 

jQuery – η μέθοδος noConflict()

Η jQuery χρησιμοποιεί το σύμβολο του δολαρίου($) σαν shortcut. Υπάρχουν και άλλα javascript frameworks που μπορεί να χρησιμοποιούν το δολάριο($) σαν shortcut, τότε το ένα από τα δύο frameworks δεν λειτουργεί. Για αυτό στην jQuery υπάρχει η μέθοδος noConflict.

 

Δοκιμάστε!

 

jQuery – Διαστάσεις

Με τη jQuery, είναι εύκολο να δούμε και να αλλάξουμε τις διαστάσεις από HTML στοιχεία. Θα δούμε τις μεθόδους width(), height().

 

Δοκιμάστε!

 

jQuery εφέ – Fading

Με τη jQuery μπορείτε να εμφανίσετε και να εξαφανίσετε στοιχεία HTML με fading(ξεθώριασμα). Υπάρχουν οι μέθοδοι fadeIn(), fadeOut(), fadeToggle(), fadeTo().

 

Δοκιμάστε!

 

jQuery Events

Όλες οι ενέργειες ενός χρήστη σε μία ιστοσελίδα ονομάζονται events(γεγονότα). Ένα γεγονός αντιπροσωπεύει την ακριβή στιγμή που θα συμβεί κάτι(μετακινώντας το ποντίκι, επιλέγοντας ένα κουμπί, κάνοντας κλικ σε ένα στοιχείο κ.α). Μερικά γεγονότα για το ποντίκι click, dbclick, mouseenter, mouseleave. Για το πληκτρολόγιο keypress, keydown, keyup. Για φόρμες submit, change, focus. Για παράθυρα load, resize, scroll.

 

Δοκιμάστε!

 

jQuery Selectors

Οι jQuery Selectors μας επιτρέπουν να επιλέξουμε και να αλλάξουμε στοιχεία της HTML, με βάση το όνομα(name), την ταυτότητα(id), τα είδη(types) και πολλά άλλα. Όλοι οι jQuery Selectors ξεκινούν με το σύμβολο του δολαρίου και παρένθεσης: $().

 

Δοκιμάστε!

 

jQuery

Στις επόμενες αναρτήσεις θα ασχοληθούμε με την jQuery. Η jQuery είναι μία JavaScript βιβλιοθήκη. Με την jQuery σε μία γραμμή κώδικα μπορούμε να γράψουμε εργασίες που απαιτούν πολλές γραμμές κώδικα Javascript. Η jQuery είναι ένα αρχείο JavaScript που τη καλούμε στο head της HTML. Με την jQuery εκτελούμε “δράσεις” σε στοιχεία HTML $(selector).action(). Στα παραδείγματα μας θα χρησιμοποιήσουμε το γεγονός $(document).ready(function(){// jQuery μέθοδοι...}); για να εκτελεστεί ο κώδικας της jQuery μετά τη φόρτωση του κειμένου, δείτε τα σχόλια στο κώδικα για να κατανοήστε πως λειτουργεί.

 

Δοκιμάστε!

 

Φιλοξενία ιστοσελίδων και ονόματα(domains).

 

it-838384_1280

Αν θέλουμε να φτιάξουμε την ιστοσελίδα μας πρέπει καταρχάς να αποφασίσουμε που θα τη αποθηκεύσουμε. Δεν μπορούμε να τη αποθηκεύσουμε στον υπολογιστή του σπιτιού μας γιατί δεν θα είναι προσβάσιμη όταν κλείσει ο υπολογιστής μας και μπορεί να εξυπηρετήσει μόνο μικρό αριθμό επισκεπτών. Θα χρειαστούμε μία εταιρεία που θα μας παρέχει τον απαραίτητο χώρο για να την αποθηκεύσουμε. Ακόμη θα χρειαστούμε και ένα όνομα για να μας βρίσκουν, μπορούμε να χρησιμοποιήσουμε την ίδια εταιρεία η κάποια άλλη για να καταχωρίσουμε το όνομα μας(domain).

 

Τι είναι το World Wide Web?
Το Web είναι ένα δίκτυο υπολογιστών σε όλο τον κόσμο. Όλοι οι υπολογιστές μπορούν να επικοινωνούν μεταξύ τους και χρησιμοποιούν ένα πρωτόκολλο επικοινωνίας που ονομάζεται HTTP.

 

Πως λειτουργεί το WWW?
Οι Web πληροφορίες είναι έγγραφα που ονομάζονται ιστοσελίδες και είναι αποθηκευμένες σε υπολογιστές που ονομάζονται διακομιστές. Οι υπολογιστές που βλέπουν τις ιστοσελίδες ονομάζονται πελάτες και βλέπουν τις ιστοσελίδες με τους web browsers. Δημοφιλείς web browsers είναι ο Google Chrome, Firefox και Internet Explorer.

 

Πως ένας web browser ζητάει μία ιστοσελίδα;
Ένας web browser ζητάει μια σελίδα από ένα web server(διακομιστή) με μια τυποποιημένη αίτηση HTTP που περιέχει μια διεύθυνση σε αυτή τη μορφή: http://plinet.net/index.html

 

Πως ένας web browser εμφανίζει μία ιστοσελίδα;
Όλες οι ιστοσελίδες περιέχουν οδηγίες, ο web browser εμφανίζει την ιστοσελίδα διαβάζοντας αυτές τις οδηγίες. Οι πιο κοινές οδηγίες είναι οι ετικέτες HTML(δείτε τα μαθήματα HTML).

 

Τι είναι ένας Web Server?
Για να δημοσιεύσουμε την ιστοσελίδα σας, θα πρέπει να την αντιγράψουμε σε έναν web server και να καταχωρίσουμε το όνομα της ιστοσελίδας μας(domain).

 

Ας δούμε πως μπορούμε να αποθηκεύσουμε την ιστοσελίδα μας και να έχουμε το δικό μας όνομα στο ΠΣΔ(δωρεάν για εκπαιδευτικούς και σχολικές μονάδες). Θα χρειαστούμε δύο προγράμματα, ένα απλό κειμενογράφο για την επεξεργασία του κώδικα της ιστοσελίδας μας, σας προτείνω το Notepad++, και ένα πρόγραμμα για την μεταφορά της ιστοσελίδας μας από τον υπολογιστή μας στο web server, σας προτείνω το filezilla.

 

1. Αν δεν έχετε, ανοίξτε λογαριασμό στο ΠΣΔ.
%ce%ba%ce%b1%cf%84%ce%b1%ce%b3%cf%81%ce%b1%cf%86%ce%ae1

 

2. Δημιουργείστε ένα φάκελο στον υπολογιστή σας(myweb). Ανοίξτε το Notepad++ και γράψτε στην πρώτη γραμμή <!DOCTYPE html> (δηλώνουμε την HTML), επιλέξτε και αντιγράψτε τον κώδικα της ιστοσελίδας που έχουμε αποθηκεύσει στο codepen.io και επικολλήσετε τον κώδικα κάτω από τη γραμμή που γράψατε. Αποθηκεύστε το αρχείο στο φάκελο με το όνομα index.html(όνομα αρχικής ιστοσελίδας).

capture5

3. Συνδεθείτε στο λογαριασμό σας στο ΠΣΔ, και επιλέξτε MySch > Πίνακας Ελέγχου > Στοιχεία δικτυακού τόπου. Μπορείτε να δείτε την Διεύθυνση δικτυακού τόπου(http://users.sch.gr/το όνομα σας) και το FTP url(users.sch.gr/το όνομα σας).

capture1

4. Ανοίξτε τον filezilla επιλέξτε τον Διαχειριστή τοποθεσιών για να δηλώσετε τον web server του ΠΣΔ. Πατήστε ‘Νέα τοποθεσία’, δηλώστε τα στοιχεία όπως φαίνονται στην παρακάτω εικόνα και πατήστε ‘Σύνδεση’.

capture6

5. Στο αριστερό παράθυρο βρίσκονται τα αρχεία του υπολογιστή σας και στο δεξί τα αρχεία του web server. Βρείτε το φάκελο σας στο αριστερό παράθυρο επιλέξτε το αρχείο index.html και κάντε διπλό κλικ για να σταλεί στον web server. Συγχαρητήρια, μόλις ανεβάσατε την πρώτη ιστοσελίδα σας, μπορείτε να τη δείτε στην διεύθυνση ‘http://users.sch.gr/το όνομα σας’.

capture3