Ξεκινήστε με το HTML5

Ξεκινήστε με το HTML5
Αυτός ο οδηγός είναι διαθέσιμος για λήψη ως δωρεάν PDF. Κάντε λήψη αυτού του αρχείου τώρα Το Μη διστάσετε να το αντιγράψετε και να το μοιραστείτε με τους φίλους και την οικογένειά σας.

Πίνακας περιεχομένων

§1. Εισαγωγή





–2 – Σημασιολογική σήμανση





–3 – Έντυπα





4 - Μεσαίο

–5 – CSS3 Μεταμορφώσεις και κινούμενα σχέδια



§6 – Just Enough Javascript

§7 – Δημιουργικός καμβάς





§8 – Πού στη συνέχεια;

1. Εισαγωγή

Το έχετε ακούσει: HTML5. Όλοι το χρησιμοποιούν. Κηρύσσεται ως ο σωτήρας του Διαδικτύου, επιτρέποντας στους ανθρώπους να δημιουργούν πλούσιες, ελκυστικές ιστοσελίδες χωρίς να καταφεύγουν στη χρήση του Flash και του Shockwave.





Τι είναι όμως στην πραγματικότητα;

Λοιπόν, αυτό δεν είναι εύκολο να απαντηθεί. Σε αυτό το σεμινάριο HTML5, θα προσπαθήσουμε να δώσουμε μερικές απαντήσεις. Το HTML5 χρησιμοποιείται για να περιγράψει μια πραγματικά διαφορετική ομάδα πραγμάτων. Είναι ένα πρότυπο γραφής ιστοσελίδων. Είναι μια συλλογή API. Είναι ένας νέος τρόπος προσθήκης διαδραστικότητας σε ιστοσελίδες.

Το HTML5 είναι όλα αυτά και πολλά άλλα. Τι αφορά λοιπόν αυτό το βιβλίο;

Σε αυτό το σεμινάριο HTML5, θα υποθέσω ότι κάποια στιγμή αγγίξατε το HTML και το CSS. Perhapsσως έχετε δημιουργήσει το δικό σας θέμα Wordpress ή έχετε επεξεργαστεί μια διάταξη MySpace την ίδια μέρα. Perhapsσως έχετε διαβάσει τον δικό του οδηγό XHTML του MakeUseOf. Το θέμα είναι ότι υποθέτω ότι γνωρίζετε τον τρόπο περιήγησής σας σε μια ιστοσελίδα και ότι αυτό που συζητάμε σε αυτόν τον οδηγό δεν θα σας είναι πολύ ξένο.

Ο στόχος αυτού του οδηγού δεν είναι να σας διδάξει ολόκληρο το HTML5. Αυτό θα ήταν εντελώς εκτός του πεδίου αυτού του βιβλίου. Ο στόχος είναι να παρέχουμε μια απαλή εισαγωγή σε αυτές τις εκπληκτικές νέες τεχνολογίες ιστού και να σας δείξουμε μερικούς υπέροχους τρόπους ενσωμάτωσής τους στους ιστότοπούς σας.

Γιατί θα θέλατε να μάθετε HTML5;

Είναι δίκαιη ερώτηση. Σε έναν κόσμο smartphone και εφαρμογών, είναι πραγματικά σημαντικό να μάθετε πώς να προγραμματίζετε ιστοσελίδες;

Λοιπόν, το πιστεύετε ή όχι, είναι πολύ συνηθισμένο να γράφετε εφαρμογές smartphone χρησιμοποιώντας τεχνολογίες HTML5. Μέχρι πρόσφατα, η εφαρμογή Facebook για Android γράφτηκε χρησιμοποιώντας HTML5, CSS και Javascript.

Η Blackberry είναι μια άλλη μεγάλη εταιρεία που ενδιαφέρεται πάρα πολύ για το HTML5. Αυτό είναι προφανές στην τελευταία επανάληψη του λειτουργικού τους συστήματος για κινητά, Blackberry OS 10, όπου ενθαρρύνουν ενεργά τους προγραμματιστές να αναπτύξουν εφαρμογές για τα τηλέφωνά τους χρησιμοποιώντας τεχνολογίες ιστού.

Τα νέα smartphone Firefox OS λειτουργούν εξ ολοκλήρου και σε εφαρμογές HTML5. Η εργασιακή γνώση της HTML5 είναι απαραίτητη στο σημερινό κλίμα smartphone.

Επιπλέον, η εκμάθηση HTML5 κάνει καλό στην καριέρα σας. Δεν με πιστεύεις; Σύμφωνα με το Indeed.com , ο μέσος ετήσιος μισθός για έναν προγραμματιστή HTML5 είναι εντυπωσιακός 89.000 $. Όλο και περισσότερες εταιρείες αλλάζουν τους ιστότοπούς τους για να χρησιμοποιούν τεχνολογίες HTML5, οι προγραμματιστές που γνωρίζουν τη στοίβα HTML5 είναι περιζήτητοι - τώρα περισσότερο από ποτέ.

1.1 Προϋποθέσεις

Αυτό το σεμινάριο HTML5 προϋποθέτει μερικά πράγματα. Πρώτον, προϋποθέτει ότι γνωρίζετε πώς λειτουργεί ο ιστός και ότι γνωρίζετε πώς να δημιουργείτε μια βασική ιστοσελίδα. Θα πρέπει να είστε σε θέση να καλύψετε ορισμένα στοιχεία HTML μαζί και να είστε σε θέση να παρουσιάσετε ορισμένες πληροφορίες σε ένα πρόγραμμα περιήγησης ιστού. Βλέποντας και

Οι ετικέτες δεν είναι πολύ τρομακτικές και δεν φοβάστε να λερώσετε τα χέρια σας σε κάποιον πηγαίο κώδικα.

Δεύτερον, αυτός ο οδηγός υποθέτει ότι γνωρίζετε τι είναι το CSS και πώς λειτουργεί. Δεν περιμένουμε να είστε ιδιοφυΐες σχεδιασμού, ούτε αναμένεται να γνωρίζετε ολόκληρη την προδιαγραφή CSS στο πίσω μέρος του χεριού σας. Ωστόσο, θα πρέπει να μπορείτε να εφαρμόζετε στυλ σε ένα στοιχείο σε μια ιστοσελίδα, να μπορείτε να συνδέεστε σε ένα αρχείο CSS και να γνωρίζετε τη διαφορά μεταξύ ενός αναγνωριστικού και μιας κλάσης και πώς να εφαρμόζετε το στυλ σε καθένα από αυτά.

Εάν ξύνετε το κεφάλι σας στα παραπάνω, μην ανησυχείτε. Ένα από τα καλύτερα πράγματα για το HTML και το CSS είναι ότι είναι πραγματικά, πολύ εύκολο. Στην πραγματικότητα, το MakeUseOf διαθέτει έναν απίστευτο οδηγό XHTML που θα σας φέρει στην ταχύτητα πολύ γρήγορα.

Αφού διαβάσετε αυτόν τον οδηγό, ίσως θελήσετε επίσης να ρίξετε μια ματιά στα ακόλουθα άρθρα:

Θα χρειαστείτε επίσης έναν σύγχρονο επεξεργαστή κειμένου και πρόγραμμα περιήγησης. Οποιαδήποτε έκδοση του Internet Explorer είναι παλαιότερη από το IE 9 και ορισμένες παλαιότερες εκδόσεις του Safari, του Chrome και του Firefox θα αντιμετωπίσουν πολλές δυνατότητες που αποτελούν μέρος του HTML5 και μπορεί να σας εμποδίσουν να ακολουθήσετε αυτόν τον οδηγό.

Ως αποτέλεσμα, ενθαρρύνεστε να κάνετε λήψη ενός σύγχρονου προγράμματος περιήγησης. Προτείνω το Google Chrome και θα το χρησιμοποιώ σε κάθε παράδειγμα.

Από εκεί και πέρα, το μόνο που θα χρειαστείτε είναι η διάθεση να μάθετε. Α, και ένας επεξεργαστής κειμένου.

1.2 Επεξεργαστές κειμένου για ανάπτυξη Ιστού

Ο επεξεργαστής κειμένου είναι αυτό που θα χρησιμοποιήσετε για να γράψετε τον κώδικά σας. Mayσως αναρωτιέστε τι είναι ο επεξεργαστής κειμένου.

Λοιπόν, πρώτον δεν είναι επεξεργαστής κειμένου. Προγράμματα όπως το Microsoft Word και οι σελίδες της Apple είναι εντελώς ακατάλληλα για ανάπτυξη ιστού. Αυτό συμβαίνει επειδή επισυνάπτουν πρόσθετες πληροφορίες στα αρχεία HTML, CSS και Javascript που καθιστούν δύσκολη την ανάγνωση του προγράμματος περιήγησής σας.

Ένας επεξεργαστής κειμένου εκπέμπει χαρακτήρες σε ένα αρχείο κειμένου και όχι πολλά άλλα. Αυτό σας επιτρέπει να δημιουργήσετε αρχεία που δεν έχουν επιπλέον μορφοποίηση και μπορούν να αποθηκευτούν με οποιαδήποτε επέκταση της επιλογής σας.

Ο υπολογιστής σας διαθέτει ήδη ένα. Εάν χρησιμοποιείτε υπολογιστή με Windows, τότε το Σημειωματάριο είναι ο επεξεργαστής κειμένου που πιθανότατα έχετε εγκαταστήσει.

Σε Mac, η κατάσταση είναι ελαφρώς διαφορετική. Το OS X έρχεται με τέσσερις διαφορετικούς επεξεργαστές κειμένου. Αυτά ονομάζονται Vim, Emacs, Pico και Nano. Ωστόσο, σε αντίθεση με το Σημειωματάριο, όλα αυτά τυχαίνει να λειτουργούν στο τερματικό.

Αυτό είναι λίγο εκφοβιστικό για τους ανθρώπους που είναι νέοι στην ανάπτυξη ιστού και δεν πρέπει να χρησιμοποιούνται από άτομα που είναι νέοι στην ανάπτυξη λογισμικού. Δεν θα τα χρησιμοποιήσουμε σε αυτόν τον οδηγό. Ωστόσο, όταν είστε λίγο πιο σίγουροι με την ανάπτυξη λογισμικού και ιστού, σίγουρα αξίζει να ρίξετε μια ματιά στο Vim και το Emacs. Είναι και οι δύο ισχυροί συντάκτες κειμένου και όταν γίνουν κατακτημένοι μπορούν να σας εξοικονομήσουν πολύ χρόνο.

Στο Linux, ο προεπιλεγμένος επεξεργαστής κειμένου διαφέρει μεταξύ των διανομών. Στο Ubuntu, είναι πιθανό το Gedit, το οποίο είναι ένας αρκετά ευχάριστος επεξεργαστής κειμένου που δεν είναι πολύ διαφορετικός από το Σημειωματάριο.

Ωστόσο, σε αυτό το μάθημα θα γράψουμε τον κωδικό μας χρησιμοποιώντας τρία διαφορετικά εργαλεία.

Το πρώτο είναι το Sublime Text 2. Ειλικρινά δεν μπορώ να το συστήσω αρκετά. Έρχεται με όλα τα πράγματα που διευκολύνουν τη ζωή για έναν αρχάριο προγραμματιστή. Πρώτον, θα διευκολύνει την ανάγνωση του κώδικά σας χρωματίζοντας ορισμένα μέρη. Δεύτερον, σας επιτρέπει να κάνετε εναλλαγή μεταξύ αρχείων εύκολα και να διαχειρίζεστε ολόκληρα έργα αρχείων. Αυτό είναι ιδανικό για εναλλαγή μεταξύ αρχείων και επεξεργασία πολλών κομματιών κώδικα εν κινήσει.

Το τρίτο είναι η κονσόλα Javascript που είναι ενσωματωμένη στο Google Chrome. Αυτό μας επιτρέπει να γράψουμε Javascript και να το δούμε να τρέχει αμέσως και θα χρησιμοποιηθεί για να εξηγήσει βασικές έννοιες προγραμματισμού.

Το δεύτερο είναι ένας ιστότοπος που ονομάζεται Codepen.io. Αυτός ο αξιόλογος ιστότοπος θα σας επιτρέψει να κωδικοποιήσετε HTML, CSS και Javascript στο πρόγραμμα περιήγησης και είναι δωρεάν για χρήση. Θα σας επιτρέψει επίσης να δείτε τις αλλαγές σας αμέσως.

2. Σημασιολογική σήμανση

Σε αυτό το κεφάλαιο, θα μάθετε για τη σημασιολογική σήμανση και πώς να οργανώσετε τον κώδικά σας με βάση το περιεχόμενό του.

Μέχρι πρόσφατα, ο κώδικας HTML ήταν γενικά οργανωμένος με ετικέτες. Αυτά σας επέτρεψαν να δημιουργήσετε μια ομάδα στοιχείων και στη συνέχεια να εφαρμόσετε στυλ σε αυτά τα στοιχεία.

Αυτό λειτούργησε, αλλά υπήρχαν περιθώρια βελτίωσης. Το πρόβλημα με τις ετικέτες ήταν ότι δεν ήταν σημασιολογικό. Στην πραγματικότητα, το Div δεν σημαίνει τίποτα.

Η σημασιολογική σήμανση είναι μια νέα δυνατότητα στο HTML5. Φέρνει νέες ετικέτες, οι οποίες λειτουργούν με τον ίδιο τρόπο όπως μια ετικέτα 'div', αλλά προορίζονται για την προσθήκη ετικετών σε κοινά μέρη μιας σελίδας.

Λοιπόν, πώς λειτουργούν; Εξετάστε τον ακόλουθο κώδικα.

Σε αυτό το κομμάτι κώδικα, έχουμε μια γραμμή πλοήγησης, έναν τίτλο και μια λίστα. Αυτό δεν είναι πολύ ανόμοιο με τους περισσότερους ιστότοπους που πιθανότατα θα συνεχίσετε, όταν το σκεφτείτε.

Ο ελεγκτής ps4 δεν θα συνδεθεί στο ps4

Ας ρίξουμε μια ματιά σε ένα άρθρο στο MakeUseOf. Θα παρατηρήσετε ότι υπάρχει ένα μέρος της σελίδας που προορίζεται αποκλειστικά για πλοήγηση σε άλλα άρθρα. Θα παρατηρήσετε επίσης ότι υπάρχει ένα άλλο μέρος της σελίδας που περιέχει τις λέξεις που αποτελούν άρθρο. Στο επάνω μέρος της σελίδας, θα δείτε μια κεφαλίδα που περιέχει το λογότυπο MakeUseOf και μερικούς άλλους συνδέσμους.

Όταν το σκέφτεστε, πολλοί ιστότοποι ακολουθούν αυτές τις συμβάσεις. Οι περισσότεροι ιστότοποι διαθέτουν ένα μέρος που προορίζεται για πλοήγηση. Συνήθως έχουν ένα περιεχόμενο. Πιθανότατα έχουν κεφαλίδα.

Οι σημασιολογικές ετικέτες είναι ετικέτες που σας επιτρέπουν να ορίσετε τμήματα ενός ιστότοπου που βρίσκονται συνήθως στους περισσότερους ιστότοπους. Δεν προσθέτουν τίποτα στη σελίδα, αλλά σας επιτρέπουν να ομαδοποιήσετε ετικέτες με βάση το περιεχόμενό τους και να εφαρμόσετε στυλ σε αυτές τις ομάδες.

Λοιπόν, θυμάστε αυτόν τον κωδικό που είχαμε πριν; Ας το δούμε προσθέτοντας κάποια σημασιολογική σήμανση.

Όπως μπορείτε να δείτε, ο κώδικας διαβάζεται πολύ πιο εύκολα. Ξέρετε ποια μέρη είναι ποια και δεν υπάρχει ασάφεια. Αυτό είναι σημαντικό, διότι διευκολύνει τη σύνταξη ενός καλού, καθαρού κώδικα. Εάν αποφασίσετε ποτέ να γίνετε επαγγελματίας σχεδιαστής ιστοσελίδων, αυτό θα γίνει πρωταρχικό - ποτέ δεν ξέρετε ποιος θα διαβάσει το έργο που παράγετε.

Λοιπόν, ας δούμε μερικές ακόμη σημασιολογικές ετικέτες σήμανσης.

2.1 Ενότητα

Η ενότητα είναι μια πραγματικά χρήσιμη ετικέτα. Χρησιμοποιείται για την απόκτηση τεράστιων ποσοτήτων πληροφοριών και περιεχομένου που επισημαίνονται με έναν τίτλο ή έναν τίτλο. Σκεφτείτε το σαν ένα κεφάλαιο σε ένα βιβλίο. Ένα κεφάλαιο έχει τίτλο και μπορεί επίσης να περιέχει εικόνες, διαγράμματα, γραφήματα και λέξεις. Μια ετικέτα ενότητας θα χρησιμοποιηθεί για να τα περιέχει όλα αυτά.

2.2 Άρθρο

Η ετικέτα άρθρου χρησιμοποιείται για αυτό που ακούγεται. Περιέχει περιεχόμενο όπως μια ανάρτηση ιστολογίου ή μια είδηση. Αυτό το περιεχόμενο θα πρέπει να μπορεί να αποσπαστεί από το υπόλοιπο ιστολόγιο και να έχει συνεκτικό νόημα.

2.3 Στο πλάι

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

2.4 Κεφαλίδα

Πολλές ιστοσελίδες έχουν μια γραμμή στο επάνω μέρος της σελίδας που περιέχει ένα λογότυπο, μερικές πληροφορίες που αφορούν τον ιστότοπο και ίσως κάποιους συνδέσμους. Στη σημασιολογική σήμανση, θα χρησιμοποιούσατε μια ετικέτα κεφαλίδας για να τα περιέχει όλα αυτά.

2.5 Nav

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

Αυτή η ετικέτα προορίζεται για το κάτω μέρος της σελίδας. Εδώ, θα μπορούσατε να βάλετε ορισμένα στοιχεία επικοινωνίας, πληροφορίες πνευματικών δικαιωμάτων, έναν χάρτη ή κάποιους συνδέσμους στη σελίδα 'για μένα'.

2.7 Δοκιμάστε τον εαυτό σας

  • Τι είναι η σημασιολογική σήμανση και σε τι χρησιμοποιείται;
  • Δημιουργώ μια ιστοσελίδα και θέλω να χρησιμοποιήσω μια σημασιολογική ετικέτα για να περιέχει μια βιογραφία για μένα. Ποιο χρησιμοποιώ;

3. Έντυπα

Εάν έχετε κάνει ποτέ λίγο σχεδιασμό ιστοσελίδων, πιθανότατα γνωρίζετε πώς να δημιουργήσετε μια απλή φόρμα σε HTML. Εάν είστε πραγματικά έξυπνοι, πιθανότατα γνωρίζετε πώς να λαμβάνετε τις πληροφορίες που λαμβάνετε από τη φόρμα σας και πώς να κάνετε κάτι με αυτό, όπως να τις βάλετε σε μια βάση δεδομένων.

Οι μορφές έχουν τεράστια σημασία. Αποτελούν τη βάση για τα περισσότερα από τα πράγματα που κάνουμε στο Διαδίκτυο. Κάθε φορά που δημιουργείτε μια ενημέρωση κατάστασης στο αγαπημένο σας κοινωνικό δίκτυο, αγοράζετε κάτι από την Amazon ή στέλνετε ένα email, πιθανότατα έχετε χρησιμοποιήσει μια φόρμα HTML.

Αυτό που πιθανώς δεν γνωρίζατε είναι ότι ο τρόπος που δημιουργούμε φόρμες έχει αλλάξει ριζικά στο HTML5. Είναι επίσης σημαντικά καλύτερο. Σε αυτό το κεφάλαιο, θα εξετάσουμε μερικά από τα υπέροχα πράγματα που μπορείτε να κάνετε τώρα, μόνο με απλή παλιά σήμανση.

Λοιπόν, τι είναι τόσο ωραίο για τον νέο τρόπο με τον οποίο μπορούμε να γράψουμε φόρμες σε HTML5; Πρώτον, μπορείτε να διασφαλίσετε ότι ορισμένα πεδία πρέπει να συμπληρωθούν για την υποβολή, αλλάζοντας απλώς τη σήμανση της ίδιας της φόρμας. Επιπλέον, δεν χρειάζεται πλέον να γράφετε βουνά JavaScript ή PHP για να το κάνετε αυτό. Είναι ασήμαντα εύκολο.

Δεύτερον, μπορείτε να διασφαλίσετε ότι οι χρήστες σας μπορούν να υποβάλλουν μόνο ορισμένους τύπους πληροφοριών στη φόρμα σας. Ας υποθέσουμε ότι έχετε έναν ιστότοπο για τη λίστα αλληλογραφίας σας και θέλετε μόνο οι άνθρωποι να μπορούν να υποβάλλουν πραγματικές διευθύνσεις ηλεκτρονικού ταχυδρομείου; Μπορείτε να το κάνετε αυτό, χρησιμοποιώντας μόνο το HTML5. Είναι πραγματικά απίστευτα ισχυρό.

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

3.1 Βελτίωση φόρμας

Ας δούμε λοιπόν μια φόρμα και θα δούμε πώς μπορούμε να την κάνουμε καλύτερη.

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

Έτσι, το πρώτο πράγμα που θα θέλουμε να κάνουμε είναι να διασφαλίσουμε ότι το πεδίο email λαμβάνει μόνο ένα email. Αυτό ήταν πράγματι μια αρκετά δύσκολη εργασία, καθώς θα έπρεπε να δημιουργήσετε όλα τα είδη του παράξενου κώδικα Regex. Λοιπόν, όχι άλλο. Απλώς πρέπει να αλλάξετε τον τύπο της εισόδου από 'κείμενο' σε 'email'. Όταν προσπαθείτε να υποβάλετε αυτήν τη φόρμα με αηδία, θα παραπονεθεί και θα επιμείνει να υποβάλετε ένα μήνυμα ηλεκτρονικού ταχυδρομείου.

3.2 Τύποι εισαγωγής και μοτίβα

Υπάρχουν άλλοι τύποι εισόδου, τους οποίους μπορείτε να απαιτήσετε. Αυτά περιλαμβάνουν αριθμούς τηλεφώνου, διευθύνσεις ιστού, φόρμες αναζήτησης, ακόμη και επιλογείς χρωμάτων! Καθώς το HTML5 εξελίσσεται συνεχώς, είναι λογικό ότι σύντομα θα είμαστε σε θέση να καθορίσουμε περισσότερους τύπους εισόδου στο εγγύς μέλλον.

Επιπλέον, για πράγματα όπως αριθμοί τηλεφώνου που διαφέρουν ανάλογα με την τοποθεσία, μπορείτε να καθορίσετε μοτίβα για εισόδους. Αυτά δημιουργούνται χρησιμοποιώντας κάτι που ονομάζεται «Κανονικές εκφράσεις» και είναι μάλλον περίπλοκο, αλλά απίστευτα ισχυρό.

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

Θα διασφαλίσουμε ότι απαιτείται το πεδίο 'Αγαπημένο χρώμα'. Στην τελευταία αγκύλη (>) στην ετικέτα εισαγωγής email, απλώς γράψτε «απαιτείται». Αυτό είναι. Τώρα, όταν προσπαθείτε να υποβάλετε τη φόρμα σας χωρίς τιμή, θα εμφανιστεί μήνυμα σφάλματος.

Το πραγματικά απίστευτο με αυτά τα μηνύματα σφάλματος είναι ότι ο χρήστης δεν χρειάζεται να τα γράψει ή να γράψει κώδικα για να τα δημιουργήσει. Απλώς αλλάζετε ένα πεδίο για να το κάνετε υποχρεωτικό και απλά λειτουργεί. Με αυτά τα παραπάνω, είναι δυνατό να τα προσαρμόσετε, αν το θέλετε.

Αυτή ήταν μια απίστευτα σύντομη εισαγωγή στη δύναμη των μορφών στο HTML5. Αν θέλετε να διαβάσετε περισσότερα, σας συνιστώ να επισκεφθείτε αυτούς τους συνδέσμους.

Περαιτέρω ανάγνωση:

  • CSS Tricks - Ας γράψουμε σημασιολογική σήμανση
  • HTML5 Doctor - Ας μιλήσουμε για τη σημασιολογία

3.3 Δοκιμάστε τον εαυτό σας

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

  • Ονομα
  • Διεύθυνση ηλεκτρονικού ταχυδρομείου
  • Τηλεφωνικό νούμερο
  • Αλλεργίες

Βεβαιωθείτε ότι τα πεδία ονόματος, email και αριθμού τηλεφώνου είναι υποχρεωτικά και ότι τα πεδία Email και Number Phone έχουν οριστεί με τους τύπους εισαγωγής 'email' και 'tel'. Δημιουργήστε ένα σύμβολο κράτησης θέσης για το αλλεργικό πεδίο με την τιμή «γύρη, αυγά, κις».

Παίξτε με τη φόρμα. Δοκιμάστε να υποβάλετε τα απαιτούμενα πεδία ως κενά και δοκιμάστε να εισαγάγετε μη αριθμητικούς χαρακτήρες στο πεδίο αριθμού τηλεφώνου. Στο πεδίο email, εισαγάγετε κάτι που δεν είναι διεύθυνση email. Τι γίνεται;

4. Μέσος όρος

Υπήρχε μια εποχή που ο μόνος τρόπος με τον οποίο μπορούσατε να εισαγάγετε βίντεο ή ήχο σε μια ιστοσελίδα ήταν χρησιμοποιώντας κάτι όπως Flash, Shockwave ή SilverLight.

Αυτό δεν ήταν ιδανικό. Πρώτον, κανένα από αυτά τα πλαίσια δεν λειτούργησε τόσο καλά σε φορητές συσκευές. Απλώς δεν ήταν εξοπλισμένα για τον σύγχρονο κόσμο των smartphone και των tablet.

πώς να δημιουργήσετε ένα αρχείο δέσμης στα παράθυρα

Επιπλέον, ήταν ιδιόκτητες μορφές. Ως αποτέλεσμα, οι χρήστες Linux και OS X θα μπορούσαν να αποκτήσουν μια εμπειρία δεύτερης κατηγορίας ή ακόμη και να τους εμποδίσουν να καταναλώσουν υπηρεσίες πολυμέσων, καθώς δεν ήταν διαθέσιμο για την πλατφόρμα τους.

Τέλος, είχαν την τάση να είναι αργά. Εάν ήσασταν σε υπολογιστή με χαμηλή ισχύ ή παλαιότερο υπολογιστή, δεν θα είχατε καλή εμπειρία προβολής βίντεο χρησιμοποιώντας αυτά τα πλαίσια. Το Flash ήταν ιδιαίτερα διαβόητο για αυτό.

4.1 Πώς το HTML5 κάνει το βίντεο και τον ήχο φοβερό

Το HTML5 άλλαξε αυτό επιτρέποντας στους προγραμματιστές ιστού να συμπεριλάβουν βίντεο και ήχο στις ιστοσελίδες τους με λίγες μόνο γραμμές κώδικα. Λειτουργεί μια απόλαυση σε φορητές συσκευές και λειτουργεί σε κάθε σύγχρονο πρόγραμμα περιήγησης ιστού.

Ως αποτέλεσμα, μεγάλες εταιρείες όπως το YouTube, το Vimeo και το Netflix εκμεταλλεύονται την επανάσταση του HTML5. Γιατί δεν συμμετέχετε μαζί τους;

4.2 Όλα για τους κωδικοποιητές

Σε αυτό το κεφάλαιο, θα μάθετε πώς να χρησιμοποιείτε τη δύναμη του HTML5 για να συμπεριλάβετε ήχο και βίντεο στις ιστοσελίδες σας.

Πρώτον, θα πρέπει να ξεκινήσω με μια προειδοποίηση. Ενώ μπορείτε να χρησιμοποιήσετε βίντεο HTML5 σε κάθε σύγχρονο πρόγραμμα περιήγησης ιστού, δεν λειτουργεί το ίδιο σε κάθε πρόγραμμα περιήγησης ιστού. Οι κωδικοποιητές που χρησιμοποιούνται από κάθε πρόγραμμα περιήγησης διαφέρουν. Στον Internet Explorer, περιορίζεστε στη χρήση βίντεο MP4. Το Chrome είναι λίγο πιο γενναιόδωρο και σας επιτρέπει να χρησιμοποιείτε βίντεο WebM, MP4 και Ogg Theora. Η Opera είναι λίγο πιο περιοριστική και σας επιτρέπει να χρησιμοποιείτε μόνο βίντεο Theora και WebM.

Ως αποτέλεσμα, πρέπει να είστε λίγο έξυπνοι με τον τρόπο εισαγωγής βίντεο στην ιστοσελίδα σας. Λοιπόν, ας δούμε πώς λειτουργεί.

4.3 Έναρξη με βίντεο

Αρχικά, θα χρειαστεί να δημιουργήσετε μερικές ετικέτες ανοίγματος και κλεισίματος. Είναι εδώ όπου θα συνδέσετε τα αρχεία βίντεο σας. Αλλά πρώτα, θα θελήσετε να δημιουργήσετε μια αφίσα. Τι σημαίνει αυτό?

Λοιπόν, όταν περιμένετε να φορτωθεί το βίντεό σας, το άτομο που επισκέπτεται τον ιστότοπό σας μπορεί να δει μια εικόνα που σχετίζεται με το βίντεο. Για να το κάνετε αυτό, απλώς δώστε στις ετικέτες βίντεο ένα χαρακτηριστικό «αφίσα» με την τιμή της εικόνας με την οποία θέλετε να συνδεθείτε. Θα πρέπει να μοιάζει με αυτό.

Το επόμενο πράγμα που θα θέλουμε να κάνουμε είναι να δημιουργήσουμε ένα εφεδρικό. Τι σημαίνει αυτό? Έτσι, ας υποθέσουμε ότι χρησιμοποιείτε ένα από τα παλαιότερα, λιγότερο φοβερά προγράμματα περιήγησης εκεί έξω. Πολλά από αυτά τα παλαιότερα προγράμματα περιήγησης δεν υποστηρίζουν βίντεο HTML5 και επομένως δεν μπορούν να αναπαράγουν βίντεο HTML5. Θα θέλετε να τους αφήσετε ένα μήνυμα που θα τους ενημερώνει ότι θα θέλουν να αναβαθμίσουν το πρόγραμμα περιήγησής τους και ότι μέχρι να το κάνουν αυτό, δεν θα μπορούν να παρακολουθήσουν το βίντεό σας.

Για να το κάνετε αυτό, απλά γράψτε το μήνυμά σας μέσα στις ετικέτες βίντεο. Τίποτα άλλο δεν απαιτείται. Μόλις το κάνετε αυτό, θα σας μείνει ένας κωδικός που μοιάζει με αυτόν.

Τώρα, ας προσθέσουμε ένα βίντεο. Θα το δοκιμάσω στο Google Chrome, οπότε θα συνδεθώ με μια ταινία MP4. Για να γίνει αυτό, δημιουργώ μια ετικέτα πηγής και της δίνω ένα χαρακτηριστικό src το οποίο έχει την τιμή του βίντεο που θέλω να συμπεριλάβω.

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

4.4 Προσθήκη ήχου

Ο ήχος μπορεί να εισαχθεί στην ιστοσελίδα σας με τρόπο που θυμίζει πολύ τον τρόπο που εισαγάγαμε βίντεο στη σελίδα μας.

Πρώτον, κάποιος δημιουργεί κάποιες ετικέτες ήχου. Αυτές οι ετικέτες ήχου περιέχουν ένα χαρακτηριστικό «χειριστήρια». Αυτό δίνει στον χρήστη που επισκέπτεται τη σελίδα τη δυνατότητα παύσης, αναπαραγωγής προς τα πίσω και γρήγορης προώθησης του ήχου που αναπαράγεται.

Στη συνέχεια, συμπεριλαμβάνετε μια ετικέτα προέλευσης στο αρχείο MP3 στο οποίο θέλετε να συνδεθείτε. Δεν χρειάζεται πραγματικά να ανησυχείτε τόσο πολύ όταν πρόκειται για συμβατότητα με κωδικοποιητές. Τα πιο πρόσφατα προγράμματα περιήγησης ιστού έχουν τη δυνατότητα αναπαραγωγής ήχου MP3, αν και είναι καλή πρακτική να συμπεριλάβετε επίσης ένα αρχείο .ogg και ένα .wav - για κάθε περίπτωση.

Τέλος, μπορείτε να δημιουργήσετε ένα εφεδρικό για παλαιότερα προγράμματα περιήγησης. Αυτό γίνεται με τον ίδιο τρόπο με τον οποίο δημιουργήσατε το εφεδρικό για το βίντεό σας.

Το τελικό αποτέλεσμα μοιάζει κάπως έτσι.

Όταν το ανοίγετε στο πρόγραμμα περιήγησής σας, θα πρέπει να μοιάζει κάπως με αυτό.

4.5 Δοκιμάστε τον εαυτό σας

  • Ποιος είναι ο σκοπός να έχετε μια αφίσα στις ετικέτες βίντεο;
  • Τι κωδικοποιητές δεν μπορείτε να χρησιμοποιήσετε στον Internet Explorer;
  • Αν ήθελα τη δυνατότητα παύσης κάποιου ήχου, ποιο χαρακτηριστικό θα προσθέσατε στην ετικέτα 'ήχου';

Περαιτέρω ανάγνωση:

5. CSS3 Transformations And Animations

Το CSS παραδοσιακά χρησιμοποιήθηκε για τον χειρισμό της διάταξης και του σχεδιασμού μιας ιστοσελίδας. Αυτό εξακολουθεί να ισχύει, αλλά στην τελευταία του επανάληψη έχει αποκτήσει τη δυνατότητα να χειρίζεται κινούμενα σχέδια και μετατροπές στοιχείων και εικόνων.

Οι άνθρωποι έχουν κάνει μερικά καταπληκτικά πράγματα με το CSS3, από τη δημιουργία ενός ψηφιακού ρολογιού μέχρι τη συγγραφή ενός πλήρους παιχνιδιού Pong. Κάποιος μάλιστα το χρησιμοποίησε για να δημιουργήσει ξανά τις εισαγωγικές πιστώσεις στους Mad Men. Είναι μια πραγματικά ισχυρή τεχνολογία και όταν κατακτηθεί μπορεί να χρησιμοποιηθεί για να προσθέσετε ένα εκπληκτικό επίπεδο λειτουργικότητας στην ιστοσελίδα σας.

Σε αυτό το κεφάλαιο, θα σας κάνω μια σύντομη εισαγωγή στο CSS3 και θα σας δείξω πώς να προσθέσετε μερικά εκπληκτικά εφέ στη σελίδα σας.

Πρώτα, μεταβείτε στο codepen.io και δημιουργήστε μια νέα πένα. Θα το χρησιμοποιήσουμε ως χώρο εργασίας για όλη τη διάρκεια αυτού του κεφαλαίου.

Θα ξεκινήσουμε απλά και θα δημιουργήσουμε έναν απλό μετασχηματισμό εικόνας που περιστρέφει μια εικόνα κατά 3 μοίρες όταν αιωρείται. Πρώτα απ 'όλα, δημιουργήστε μια ετικέτα div και δώστε της ένα αναγνωριστικό. Στο παρακάτω παράδειγμα, του έδωσα ένα αναγνωριστικό «muo».

5.1 Εφέ CSS Hover

Σε αυτό το τμήμα, συμπεριλάβετε μια εικόνα της επιλογής σας. Έχω συμπεριλάβει ένα αντίγραφο του λογότυπου για το MakeUseOf.

Στη συνέχεια, θα χρειαστεί να γράψετε μερικούς κανόνες φύλλου στυλ. Στο παρακάτω παράδειγμα, δημιούργησα ένα επάνω και αριστερό περιθώριο για να δώσω λίγο χώρο στην εικόνα. Έχω συμπεριλάβει επίσης έναν περίεργο κανόνα φύλλου στυλ που ξεκινά με '#muo: hover'. Τι ΕΙΝΑΙ ΑΥΤΟ?

Όταν συνδέετε το ': hover' σε έναν κανόνα φύλλου στυλ, είτε πρόκειται για ένα στοιχείο, ένα αναγνωριστικό ή μια κλάση, λέτε ουσιαστικά στο πρόγραμμα περιήγησης να εφαρμόσει αυτό το στυλ όταν το ποντίκι σας ρυθμίζει το στοιχείο. Αρκετά δροσερό, σωστά;

Μέσα στον κανόνα '#muo: hover', έχουμε μια γραμμή που λέει '-webkit-transform: rotate (3deg)'. Όπως είμαι σίγουρος ότι έχετε μαντέψει, αυτό λέει στο πρόγραμμα περιήγησης να περιστρέψει αυτό το στοιχείο div κατά τρεις μοίρες.

Ωστόσο, αξίζει να σημειωθεί ότι αυτή η ετικέτα λειτουργεί μόνο στο Chrome και το Safari. Εάν θέλετε ο κωδικός σας να λειτουργεί στον Firefox ή στον Internet Explorer 9 και άνω, θα θέλετε να αλλάξετε το αρχείο CSS ώστε να περιλαμβάνει τις ακόλουθες γραμμές.

Τώρα, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, μοιάζει με αυτό:

5.2 Χρήση CSS3 για αλλαγή μεγέθους εικόνων

Λοιπόν, γιατί να σταματήσουμε εκεί; Γνωρίζατε ότι μπορείτε επίσης να χρησιμοποιήσετε τη μέθοδο 'μετασχηματισμός' για μεγέθυνση ή συρρίκνωση μιας εικόνας. Ας αλλάξουμε το αρχείο CSS ώστε να περιλαμβάνει τις ακόλουθες γραμμές.

Όπως μπορείτε να δείτε, τώρα έχουμε συμπεριλάβει έναν νέο κανόνα μετασχηματισμού, αλλά αυτή τη φορά του λέμε να κάνει κάτι που ονομάζεται «κλίμακα». Αυτός είναι ένας πολύ όμορφος τρόπος για να αυξήσετε το μέγεθος μιας εικόνας. Χρειάζονται δύο παράμετροι (αυτοί οι αριθμοί που βλέπετε μεταξύ αυτών των παρενθέσεων) και αντιπροσωπεύουν το ποσό κατά το οποίο αυξάνετε το ύψος και το πλάτος του στοιχείου.

Όπως μπορείτε να δείτε από τον κώδικα, θα αυξήσω το μέγεθος του λογότυπου MakeUseOf div κατά 50%. Μπορείτε να δοκιμάσετε αυτό το έργο τοποθετώντας το δείκτη του ποντικιού πάνω του. Θα δείτε ότι τώρα το λογότυπο 'MakeUseOf' είναι τώρα πολύ πιο τεντωμένο.

Αυτή ήταν μια πολύ ήπια εισαγωγή στους μετασχηματισμούς CSS3. Παρά το γεγονός ότι το CSS3 είναι πολύ νέο, μπορείτε τώρα να δείτε ότι μπορείτε να κάνετε πολλούς πολύ ενδιαφέροντες χειρισμούς με αυτό.

5.3 Δοκιμάστε τον εαυτό σας

  • Πώς εφαρμόζουμε ένα στυλ σε ένα στοιχείο όταν αιωρούμε;
  • Πώς περιστρέφετε μια εικόνα χρησιμοποιώντας το CSS3;
  • Πώς κλιμακώνετε μια εικόνα χρησιμοποιώντας το CSS3;
  • Τι συμβαίνει εάν περάσετε τη μέθοδο μετατροπής «μετάφραση (50px, 50px)»;

Περαιτέρω ανάγνωση:

HTML5 Rocks - Παρουσίαση

6. Just Enough Javascript

Εάν θέλετε να χρησιμοποιήσετε δέσμη ενεργειών στο πρόγραμμα περιήγησής σας, πρέπει να χρησιμοποιήσετε Javascript. Δεν υπάρχουν δύο τρόποι, δυστυχώς. Είναι μια γλώσσα που έχει πολλούς θαυμαστές, και πολλούς επικριτές επίσης. Όσο περνούν οι γλώσσες, έχει πολλά κονδυλώματα. Υπάρχει ένας λόγος που το πιο αξιοσημείωτο βιβλίο για τη γλώσσα ονομάζεται «Javascript: The Good Parts».

Θα είναι αδύνατο να σας διδάξει πώς να χρησιμοποιείτε το Javascript σε ένα μόνο κεφάλαιο. Δεν είναι αυτός ο στόχος εδώ. Ο στόχος είναι να σας διδάξει αρκετά Javascript, ώστε να κατανοήσετε το επόμενο κεφάλαιο, το οποίο αφορά τη χρήση μιας τεχνολογίας που ονομάζεται Canvas για τη δημιουργία σχεδίων και κινούμενων σχεδίων.

6.1 Πρόσβαση στην Κονσόλα

Για να γίνει αυτό, θα χρησιμοποιήσουμε την κονσόλα Javascript που είναι ενσωματωμένη σε κάθε αντίγραφο του Google Chrome. Για να αποκτήσετε πρόσβαση σε αυτό, μπορείτε να κάνετε δεξί κλικ σε οποιαδήποτε ιστοσελίδα και στη συνέχεια να πατήσετε 'Επιθεώρηση στοιχείου'. Στη συνέχεια, κάντε κλικ στο «Κονσόλα». Θα πρέπει να το δείτε αυτό.

Είναι παραδοσιακό ότι το πρώτο πρόγραμμα που γράφει ποτέ ένας εκκολαπτόμενος προγραμματιστής είναι το πρόγραμμα 'Hello World'. Αυτό είναι ένα απλό πρόγραμμα που εκτυπώνει τη φράση 'Hello World' και όχι πολλά άλλα. Στην κονσόλα σας, πληκτρολογήστε 'console.log (' Hello world! ') ;.

6.2 Το πρώτο σας πρόγραμμα

Λοιπόν, τι ακριβώς κάναμε; Αρχικά, καλέσαμε κάτι που ονομάζεται 'console.log'. Αυτός είναι ένας κώδικας που είναι ενσωματωμένος στον υπολογιστή και εκτυπώνει απλώς ό, τι του πείτε. Στη συνέχεια επισυνάψαμε μερικές παρενθέσεις σε αυτό και συμπεριλάβαμε τα διπλά εισαγωγικά 'Hello World'. Αυτό ονομάζεται «πέρασμα ορισμάτων» και ο τύπος ορίσματος που περάσαμε ονομάζεται συμβολοσειρά. Κάθε φορά που θέλετε να κάνετε κάτι που περιλαμβάνει γράμματα και ειδικούς χαρακτήρες, πρέπει απλώς να χρησιμοποιήσετε μεμονωμένα εισαγωγικά. Ωστόσο, εάν θέλετε να κάνετε οτιδήποτε χρησιμοποιώντας αριθμούς, συνήθως δεν χρειάζεται να χρησιμοποιήσετε εισαγωγικά, όπως φαίνεται παρακάτω.

6.3 Μεταβλητές στο JavaScript

Μπορείτε επίσης να περάσετε μεταβλητές στο 'console.log'. Οι μεταβλητές ακούγονται περίπλοκες, αλλά το μόνο που πραγματικά είναι είναι ένας χώρος για να βάλετε κομμάτια πληροφοριών. Αυτά συχνά είναι αριθμοί ή γράμματα. Για να το κάνετε αυτό, δηλώνετε μια μεταβλητή χρησιμοποιώντας τη λέξη -κλειδί 'var', της δίνετε ένα όνομα και, στη συνέχεια, με ένα σύμβολο ίσον, της δίνετε μια τιμή. Έτσι, θα δημιουργήσω μια μεταβλητή που ονομάζεται 'γεια' και στη συνέχεια θα της δώσω μια τιμή 'Hello World!'. Στη συνέχεια, θα το περάσω στο console.log.

Σημειώστε πώς δεν πέρασα το «γεια» στο console.log χρησιμοποιώντας εισαγωγικά. Αυτό συμβαίνει επειδή ήθελα να εκτυπώσω στην κονσόλα το περιεχόμενο του 'γεια' και όχι του 'γεια' του ίδιου.

6.4 Τι λειτουργίες κάνουν

Μπορεί να είναι λίγο κουραστικό να ξαναγράφουμε το ίδιο κομμάτι κώδικα ξανά και ξανά, γι 'αυτό γράφουμε συναρτήσεις. Οι λειτουργίες είναι πιο εύκολες από όσο νομίζετε. Το μόνο που είναι είναι κομμάτια κώδικα που μπορούμε να επαναχρησιμοποιήσουμε χωρίς να ξαναγράψουμε ξανά τον ίδιο κώδικα. Παρακάτω, έχουμε δημιουργήσει μια συνάρτηση που ονομάζεται «sup» και της μεταφέρουμε ένα όρισμα χρησιμοποιώντας παρενθέσεις που στη συνέχεια καταγράφεται στην οθόνη. Καλούμε 'sup' στέλνοντας στην κονσόλα 'sup (' Hello world! ');'.

6.5 Επανάληψη ενέργειας με βρόχο 'For'

Ας υποθέσουμε ότι θέλατε να κάνετε την ίδια ενέργεια για ορισμένες φορές. Αυτός είναι ο λόγος για τον οποίο θα χρησιμοποιούσαμε έναν βρόχο 'for'. Φαίνονται τρομακτικά στην αρχή, αλλά είναι τόσο εύκολο να τα κάνεις μόλις τα καταλάβεις. Ξεκινάτε γράφοντας 'για ()'.

Σε αυτές τις παρενθέσεις, θα θέλουμε να δημιουργήσουμε μια μεταβλητή που μετράει πόσες φορές έχουμε εκτελέσει μια ενέργεια. Έτσι, παίρνουμε κάτι που μοιάζει με αυτό 'για (var i = 0;)'.

Στη συνέχεια, θέλουμε να ελέγξουμε ότι δεν πληρώ μια προϋπόθεση. Έτσι, σε αυτή την περίπτωση, θέλουμε να δούμε ότι είναι λιγότερο από 10. Έτσι, μετά το ερωτηματικό, γράφουμε «i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Εάν είμαι μικρότερος από 10, θέλουμε να το προσθέσουμε κατά ένα και μετά να κάνουμε κάτι. Έτσι, βάζουμε 'i = i + 1'. Ο βρόχος μας έχει σχεδόν ολοκληρωθεί: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Μετά από αυτό, θα θέλουμε να κάνουμε μια ενέργεια. Έτσι, μετά τις τελευταίες παρενθέσεις, γράφουμε μερικά σγουρά σιδεράκια και μεταξύ τους θα κάνουμε console.log την τιμή του i. Αυτό θα δημιουργήσει έναν μετρητή που μετράει έως εννέα.

Οι δύο τελευταίες κατασκευές προγραμματισμού που θα εξετάσουμε είναι οι δηλώσεις 'εάν' και οι βρόχοι 'ενώ'.

6.6 Αν δηλώσεις

Μια δήλωση 'αν' εκτελεί μια ενέργεια εάν πληρούνται ορισμένα κριτήρια. Είναι παρόμοιοι με τους βρόχους «για» στην κατασκευή και λειτουργούν ως εξής. Ας υποθέσουμε ότι έχετε μια μεταβλητή που ονομάζεται «cheeseburgers» και θέλετε να δείτε αν έχει μια τιμή «νόστιμο». Εάν συμβεί, θέλετε να συνδεθείτε στην οθόνη 'yum, cheeseburgers'. Για να το κάνετε αυτό θα γράφατε κάτι τέτοιο.

Σημειώστε πώς έγραψα 'αν (cheeseburgers ==' νόστιμο ')'. Χρησιμοποιείτε διπλά ή τριπλά ίσα για τον έλεγχο της ισότητας και μόνο ίσα για να εκχωρήσετε μια τιμή.

6.7 Ενώ βρόχους

Τέλος, ο βρόχος 'while' εκτελεί μια ενέργεια ενώ πληρούνται τα κριτήρια. Οπότε, φανταστείτε ότι θέλετε να συνδεθείτε «yum, cheeseburgers», ενώ τα cheeseburgers είναι εξίσου νόστιμα. Για να το κάνετε αυτό, γράψτε τα παρακάτω.

Αξίζει να σημειωθεί ότι αυτό θα εισέλθει σε έναν άπειρο βρόχο και θα πρέπει να αποφύγετε να κάνετε μια ενέργεια σε μια τιμή που δεν είναι πιθανό να αλλάξει. Αυτό μπορεί να προκαλέσει το κλείδωμα του προγράμματος περιήγησής σας ή τον κωδικό σας να μην λειτουργεί.

Όπως ανέφερα προηγουμένως, αυτή ήταν μια πολύ σύντομη εισαγωγή στις κατασκευές προγραμματισμού στο Javascript. Σας ενθαρρύνουμε να διαβάσετε περισσότερα για αυτό το συναρπαστικό, αν και τεράστιο θέμα.

6.8 Δοκιμάστε τον εαυτό σας

  • Θέλω να μετρήσω αντίστροφα από τα 30. Γράψτε έναν βρόχο 'for' που θα το έκανε αυτό.
  • Θέλω να δημιουργήσω μια μεταβλητή που ονομάζεται 'makeuseof' και να της δώσω μια τιμή 'φοβερό'. Πώς γίνεται αυτό;
  • Θέλω να δημιουργήσω μια συνάρτηση που τυπώνει 'MakeUseOf Is Awesome' όταν καλείται. Γράψτε αυτήν τη συνάρτηση.

Περαιτέρω ανάγνωση:

7. Δημιουργικός καμβάς

Ο καμβάς είναι μια υπέροχη τεχνολογία που σας επιτρέπει να σχεδιάζετε εικόνες και να δημιουργείτε κινούμενα σχέδια χωρίς να χρειάζεται να καταφύγετε στη χρήση Flash ή Silverlight. Οι άνθρωποι το έχουν χρησιμοποιήσει για να δημιουργήσουν παράξενα και υπέροχα πράγματα, όπως προσομοιωτή στεγνωτήρα μαλλιών και διάφορα βιντεοπαιχνίδια. Είναι ένα υπέροχο και ασύλληπτα μεγάλο κομμάτι τεχνολογίας, σε αυτό το σεμινάριο, θα σας κάνω μια σύντομη εισαγωγή σε αυτό.

Αξίζει να σημειωθεί ότι ο Canvas λειτουργεί μόνο σε σύγχρονα προγράμματα περιήγησης ιστού. Εάν χρησιμοποιείτε μια παλιά έκδοση του IE, του Chrome ή του Firefox, ενδέχεται να μην μπορείτε να ακολουθήσετε αυτό το κεφάλαιο. Εάν συμβαίνει αυτό, θα πρέπει να εξετάσετε τη λήψη της πιο πρόσφατης έκδοσης του Google Chrome, το οποίο ήταν το πρόγραμμα περιήγησης ιστού στο οποίο δημιούργησα αυτό το σεμινάριο.

7.1 Ξεκινώντας με τον καμβά

Πρώτα απ 'όλα, θα χρειαστεί να ανοίξετε το πρόγραμμα περιήγησης ιστού και να μεταβείτε στο codepen.io. Δημιουργήστε ένα νέο στυλό.

Τώρα, θα πρέπει να δηλώσουμε ένα στοιχείο καμβά. Δημιουργήστε δύο ετικέτες ανοίγματος και κλεισίματος καμβά. Σε αυτά, θα πρέπει να του περάσετε τρία χαρακτηριστικά. Αυτά είναι το πλάτος και το ύψος του στοιχείου Canvas, μαζί με το αναγνωριστικό που του δίνετε. Όπως και πριν όταν εισαγάγατε κάποιο βίντεο, θα πρέπει να συμπεριλάβετε ένα εφεδρικό μήνυμα.

Τώρα, θα θέλουμε να γράψουμε κώδικα Javascript που θα τραβήξει κάτι στην οθόνη. Θα ξεκινήσουμε βασικά και θα δημιουργήσουμε ένα απλό κόκκινο τετράγωνο.

Θα δημιουργήσουμε μια μεταβλητή (την ονόμασα «επίδειξη») και, στη συνέχεια, επιλέγουμε το στοιχείο καμβά και το εκχωρούμε σε αυτήν τη μεταβλητή. Για να το κάνετε αυτό, χρησιμοποιείτε το document.getElementByID () και εισάγετε το αναγνωριστικό του στοιχείου που θέλετε να επιλέξετε.

Η δεύτερη γραμμή στο σενάριό μας δημιουργεί μια άλλη μεταβλητή που ονομάζεται 'περιβάλλον' και στη συνέχεια καλεί 'demo.getContext (' 2d ')' σε αυτήν. Αυτό είπε στο πρόγραμμα περιήγησης ότι θα δουλέψουμε σε μια 2d εικόνα και μετά περάσαμε τις απαραίτητες λειτουργίες που θα χρειαζόμασταν για να σχεδιάσουμε την οθόνη.

Η τρίτη και η τέταρτη γραμμή είναι αυτές που κάνουν πραγματικά το σχέδιο στην οθόνη. Η τρίτη γραμμή γεμίζει ένα ορθογώνιο με το κόκκινο χρώμα, ενώ η τέταρτη γραμμή καλεί το fillRect, το οποίο το τοποθετεί και ορίζει το μήκος και το πλάτος του.

Αυτό όμως δεν είναι εντυπωσιακό. Ας κάνουμε κάτι λίγο πιο προηγμένο και χρησιμοποιήστε τη μαγεία του Javascript και του Canvas για να δημιουργήσετε το MakeUseOf ενός ολοκαίνουργιου λογότυπου.

7.2 Σχήματα και κείμενο

Ας διαγράψουμε την τέταρτη γραμμή μας και την αντικαταστήσουμε με μια που τοποθετεί το ορθογώνιο μας στην επάνω αριστερή γωνία και το απλώνει για το μήκος του καμβά μας.

Τα δύο πρώτα ορίσματα ορίζουν πού θέλουμε να τοποθετήσουμε τον άξονα x και y του σχήματος. Ας θέσουμε αυτά τα δύο στο '0' προς το παρόν. Το τρίτο όρισμα αναφέρεται στο πλάτος του σχήματος. Ας το θέσουμε σε '200' και μετά αφήνουμε το τέταρτο επιχείρημα στο '50'. Τώρα πρέπει να έχετε κάτι που μοιάζει λίγο με αυτό.

Αυτή είναι μια καλή αρχή, αλλά δεν αναφέρει καθόλου το MakeUseOf. Έτσι, θα προσθέσουμε λίγο κείμενο. Ας δημιουργήσουμε μια μεταβλητή που περιέχει 'makeuseof' και θα την ονομάσουμε 'MakeUseOf'.

Στη συνέχεια, θα θελήσουμε να δημιουργήσουμε μια άλλη μεταβλητή περιβάλλοντος. Ονομάστε αυτό το 'context2' και βεβαιωθείτε ότι είναι 2d. Αυτό θα χρησιμοποιήσουμε για να γράψουμε το κείμενό μας.

Θα θέλουμε το κείμενό μας να έχει μπλε χρώμα και να επικαλύπτει το κόκκινο τετράγωνό μας. Έτσι, όπως και πριν, θα θέλουμε να του δώσουμε ένα πλήρες στυλ «μπλε». Τώρα, θα επιλέξουμε τα χαρακτηριστικά του κειμένου μας. Θέλουμε να είναι 20px μεγάλο, με έντονη μορφή και να χρησιμοποιεί γραμματοσειρά Arial. Καλούμε τη γραμματοσειρά στο πλαίσιο2 και της δίνουμε την τιμή 'έντονη γραφή 20px'.

Επειδή θέλουμε αυτό το κείμενο να επικαλύπτει το προηγούμενο κόκκινο πλαίσιο, πρέπει να καλέσουμε το 'textBaseLine' στο πλαίσιο2 και να του δώσουμε μια τιμή κορυφής. Μόλις ολοκληρωθεί, καλούμε 'fillText' στο περιβάλλον2 και του μεταβιβάζουμε τη μεταβλητή που περιέχει το κείμενό μας και τις συντεταγμένες x και y στις οποίες σκοπεύουμε να τοποθετήσουμε το κείμενό μας. Το τελικό αποτέλεσμα του κώδικα μας είναι κάπως έτσι.

Η εικόνα που παράγεται από τον κώδικα μοιάζει με αυτήν.

7.3 Μια λέξη σε καμβά

Ενώ αυτή ήταν μια απίστευτα βασική εισαγωγή στον Καμβά, θα πρέπει να καταλάβετε ότι είναι επίσης μια απίστευτα μεγάλη τεχνολογία και απίστευτα ισχυρή για εκκίνηση. Αυτός ο οδηγός χρησίμευσε απλώς ως εισαγωγή στη δημιουργία γραφικών χρησιμοποιώντας αυτήν τη νέα τεχνολογία.

μπορώ να κατεβάσω ταινίες amazon prime στο φορητό υπολογιστή μου

7.4 Δοκιμάστε τον εαυτό σας

  • Προσθέστε το ακόλουθο σλόγκαν στην εικόνα που δημιουργήσατε: 'Ο καλύτερος ιστότοπος τεχνολογίας ποτέ!'
  • Δημιουργήστε έναν βρόχο 'for' που εκτελείται για δέκα επαναλήψεις. Δείτε αν μπορείτε να μετακινήσετε το σχέδιό σας προς τα κάτω στον καμβά, ένα pixel κάθε φορά.
  • Τυλίξτε το σχέδιό σας σε μια συνάρτηση. Τι θα συμβεί αν δεν το καλέσετε;

Περαιτέρω ανάγνωση:

8. Πού Στη συνέχεια;

Σας ευχαριστώ που διαβάσατε τον απίστευτα σύντομο οδηγό μου για τις νέες τεχνολογίες που υπάρχουν στο HTML5. Είναι αδιαμφισβήτητο ότι το HTML5 είναι η τεχνολογία του μέλλοντος. Υιοθετείται από την περισσότερη τεχνολογία, καθώς είναι εύκολο να γραφτεί και ισχυρό πέρα ​​από κάθε μέτρο. Οι άνθρωποι κάνουν απίστευτα πράγματα με αυτό συνεχώς και δεν έχω καμία αμφιβολία ότι στο μέλλον, θα είστε ένας από αυτούς τους ανθρώπους. Είναι τιμή μου που ήμουν μέρος του ταξιδιού σας στον άγριο και υπέροχο κόσμο του HTML5.

Σας ικετεύω να συνεχίσετε να μαθαίνετε. Συνεχίστε την κωδικοποίηση. Συνεχίστε να ανεβαίνετε επίπεδο και να βελτιώνεστε και σε ελάχιστο χρόνο θα χρησιμοποιείτε τις τεχνολογίες που έχουν εισαχθεί σε αυτόν τον σύντομο οδηγό για να δημιουργήσετε υπέροχα προϊόντα.

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Αξίζει την αναβάθμιση σε Windows 11;

Τα Windows έχουν επανασχεδιαστεί. Είναι όμως αυτό αρκετό για να σας πείσει να μεταβείτε από τα Windows 10 στα Windows 11;

Διαβάστε Επόμενο
Σχετικά θέματα
  • Wordpress & Web Development
  • HTML5
  • Μακροσκελές έντυπο
  • Οδηγός Longform
Σχετικά με τον Συγγραφέα Μάθιου Χιουζ(Δημοσιεύθηκαν 386 άρθρα)

Ο Matthew Hughes είναι προγραμματιστής λογισμικού και συγγραφέας από το Λίβερπουλ της Αγγλίας. Σπάνια βρίσκεται χωρίς ένα φλιτζάνι δυνατό μαύρο καφέ στο χέρι και λατρεύει απόλυτα το Macbook Pro και τη φωτογραφική του μηχανή. Μπορείτε να διαβάσετε το ιστολόγιό του στη διεύθυνση http://www.matthewhughes.co.uk και να τον ακολουθήσετε στο twitter στο @matthewhughes.

Περισσότερα από τον Matthew Hughes

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή