Ξεκινήστε με HTML5 / CSS3: Συμβουλές, βιτρίνες και δείγματα κωδικοποίησης

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


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

1. Βασικό σε HTML5

HTML5

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

Εδώ είναι μια γρήγορη συμβουλή για να ελέγξετε το συμβατότητα προγράμματος περιήγησης.

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

2. Εφέ κειμένου – Προσθήκη εφέ σκιάς και προώθησης κειμένου σε HTML5

Εφέ κειμένου σε HTML5

Βασικό εφέ σκιάς στο κείμενο

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

Δείγμα κωδικοποίησης

# σκιά h1 {
κείμενο-σκιά: 0px 1px 1px rgba (0,0,0, .2);
}

Κείμενο για εκ των προτέρων εφέ φωτιάς

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

Δείγμα κωδικοποίησης

# φωτιά h1 {
text-align: center;
περιθώριο: 200px auto;
οικογένεια γραμματοσειρών: "Λιγκ-Γοτθικό", Μεταφορέας;
μέγεθος γραμματοσειράς: 200px; text-transform: κεφαλαία;
χρώμα: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px 80 εικονοστοιχεία # 451b0e;
}

Άλλο εξαιρετικό παράδειγμα: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Στρογγυλεμένη γωνία σε HTML5

Στρογγυλεμένη γωνία σε HTML5

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

Δείγμα κωδικοποίησης

div {
περίγραμμα: 2px στερεό # 434343;
επένδυση: 10px;
φόντο: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
πλάτος: 500px;
}

Σημείωση: Το Moz σημαίνει Mozilla και το webkit είναι για Safari και Chrome.

Άλλο εξαιρετικό παράδειγμα: http://fjd1.com/roundcorner.html

4. Scalable Vector Graphic (SVG) σε HTML5

Σεμινάρια HTML, οδηγός και δείγματα

Το Scalable Vector Graphic ή κοινώς γνωστό ως (SVG) είναι ένα διανυσματικό γραφικό 2 διαστάσεων που ορίζεται σε αρχεία κειμένου XML. Με άλλα λόγια, επειδή το DNA τους βασίζεται σε αρχείο κειμένου XML, μπορούν να δημιουργηθούν ή να επεξεργαστούν στην διαδικτυακή πλατφόρμα. Αυτό σημαίνει επίσης ότι μπορεί να γίνει κλίμακα εύκολα και οι μηχανές αναζήτησης είναι σε θέση να διαβάζουν και να κατανοούν την εικόνα.

Δείγμα κώδικα

Άλλα μεγάλα παραδείγματα:

5. Ενσωμάτωση αρχείου ταινίας σε HTML5

Βίντεο σε HTML5

Εδώ είναι ένα άλλο ενδιαφέρον μέρος για να αναδείξετε τις δυνατότητες του HTML5. Πολλά από τα διαδικτυακά βίντεο παρουσιάζονται συνήθως στον χρήστη με τη μορφή Flash. Μέχρι πρόσφατα, η ενσωμάτωση βίντεο σε HTML5 κερδίζει σιγά-σιγά δυναμική (το YouTube είναι καλό παράδειγμα) και το Flash χάνει αργά την ελκυστικότητά του. Γιατί είναι έτσι? Χρήστες κινητών. Εάν θέλετε το βίντεό σας να μπορεί να αναπαράγεται σε iPhone και Android τηλέφωνα, το HTML5 είναι ο τρόπος να προχωρήσετε.

Για να ενσωματώσετε το βίντεο, θα πρέπει να γνωρίζετε ότι υπάρχουν 3 μορφές που υποστηρίζονται από διαφορετικά προγράμματα περιήγησης. .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Δείγμα κώδικα

Άλλο εξαιρετικό παράδειγμα: https://www.html5rocks.com/en/tutorials/video/basics/

6. Παρουσίαση διαφανειών σε HTML5

Σεμινάρια HTML, οδηγός και δείγματα

Το Powerpoint υπήρξε συνώνυμο όνομα με παρουσίαση διαφανειών. Γιατί, όμως, να περιοριστείτε με μια παρουσίαση εκτός σύνδεσης όπου μπορείτε να δημιουργήσετε διαφάνειες που προορίζονται για κοινό στο διαδίκτυο; Η HTML5 έφτασε στη διάσωση για τη δημιουργία πολύ ισχυρών διαφανειών παρουσίασης, πλήρης με μενού μετάβασης και πλοήγησης. Το καλύτερο μέρος είναι ότι μπορείτε ακόμη και να εφαρμόσετε μετασχηματισμό 3D στην παρουσίασή σας.

Δείγμα κώδικα

προ {
μετάβαση: όλα τα 1s easy-inout
}

προ: αιωρηθείτε {
χρώμα φόντου: # F2F5FE;
χρώμα περιγράμματος: μαύρο;
}

div {
μετασχηματισμός: rotate3d (1,1,0, 45deg);
}

Άλλα μεγάλα παραδείγματα:

7. Επεξεργάσιμο περιεχόμενο σε HTML5

Σεμινάρια HTML, οδηγός και δείγματα

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

Δείγμα κώδικα

Αυτό το περιεχόμενο είναι επεξεργάσιμο!

Άλλο εξαιρετικό παράδειγμα: http://html5demos.com/contenteditable

8. Διαδραστικός καμβάς Ιστού σε HTML5

Σεμινάρια HTML, οδηγός και δείγματα

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

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

Άλλο εξαιρετικό παράδειγμα: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Μεταφορά και απόθεση σε HTML5

Σεμινάρια HTML, οδηγός και δείγματα

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

Δείγμα κώδικα (εγγενές DnD)

document.addEventListener (‘dragstart’, συνάρτηση (event) {
event.dataTransfer.setData (“κείμενο”, “Προσαρμοσμένο κείμενο”);
event.dataTransfer.effectAllowed = ‘αντίγραφο’;
}, λάθος);

Άλλο εξαιρετικό παράδειγμα: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Καθαρό διάγραμμα δεδομένων CSS σε HTML5

Σεμινάρια HTML, οδηγός και δείγματα

Πριν από το HTML5, είναι επίσης αδύνατο να δημιουργήσετε ένα παρουσιάσιμο γράφημα χρησιμοποιώντας απλώς κωδικοποίηση σε HTML. Επιπλέον, η αλλαγή της τιμής δεδομένων και η απεικόνιση στο γράφημα δεν είναι απλή εργασία. Και πάλι, HTML5 για τη διάσωση. Μαζί με το CSS, μπορείτε να δημιουργήσετε ένα απολύτως όμορφο γράφημα που προκαλεί ντροπή στο Microsoft Excel. Οι κωδικοί είναι απλοί και το μόνο που χρειάζεται να κάνετε είναι να αφιερώσετε χρόνο για να προσαρμόσετε το τέλειο χρώμα και αποτέλεσμα για το γράφημα σας.

Άλλο εξαιρετικό παράδειγμα: http://cssglobe.com/pure-css-data-chart/

Δεν μπορώ να λάβω αρκετό HTML 5?

Το ίδιο και εμείς! Δείτε περισσότερα σχετικά με το θέμα, δείτε τα.

* 30 Πολύ καλά παραδείγματα ιστότοπων HTML 5
* Ξεκινώντας με HTML 5
* Πρέπει να διαβάσετε HTML 5 Tutorials το 2012
* Μάθετε HTML 5: 10 Πρέπει να διαβάσετε μαθήματα

Επίσης, ρίξτε μια ματιά  αυτό το πρόγραμμα HTML 5 crash από τον Robin Nixon. Ο Robin Nixon είναι ο συγγραφέας του Learning PHP, MySQL και JavaScript. το μάθημα καλύπτει σχεδόν όλα όσα πρέπει να γνωρίζει ένας αρχάριος σε HTML5 – συμπεριλαμβανομένων βασικών κωδικοποιήσεων HTML, καμβά HTML5 για σχέδιο, γεωγραφικής θέσης, τοπικής αποθήκευσης, καθώς και ήχου και βίντεο HTML5.

Το πρωτότυπο άρθρο δημοσιεύθηκε για πρώτη φορά στις Ιστολόγιο WHSR; Τώρα διαχειρίζεται και ενημερώνεται από το προσωπικό του BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map