Online HTML5 Εργαλεία Για Επιτάχυνση Του Coding

[Anastasis 48]

Η HTML5 είναι από τις πιο δημοφιλείς γλώσσες των προγραμματιστών και των σχεδιαστών, καθώς παρέχει λειτουργικότητα και βοηθά τους προγραμματιστές να σχεδιάζουν εύκολα εφαρμογές web. Το HTML5 έχει πολλά χαρακτηριστικά σε browsers σαν το Firefox 6, Google Chrome, IE9 κ.λπ., τη δομή ειδικών tags, τα οπτικά στοιχεία, drag and drop interactive, νέων βίντεο, ήχου, canvas στοιχεία και πολλά περισσότερα.

 

Σε αυτό το άρθρο υπάρχουν 16 Online tools HTML5 για την απλοποίηση και την επιτάχυνση του HTML5 coding.

 

1. Mockups

 

 

 

 

Το Moqups είναι μια HTML5 εφαρμογή που χρησιμοποιείται για τη δημιουργία wireframes, mockups ή UI εννοιών, πρωτότυπα ανάλογα με το πώς θέλουμε να τα λέμε. Έχουν προσπαθήσει να κάνουν τα πράγματα απλά και αρκετά ευκολονόητα ώστε να μπορούμε να απελευθερώσουμε τη δημιουργικότητά μας, χωρίς εμπόδια. Το Moqups είναι χτισμένο βάσει κριτηρίων, προσπαθώντας να παρέχει την καλύτερη εμπειρία μέσα στον browser, χωρίς συμβιβασμούς.

 

Πηγή

 

2. Stitches

 

 

Το stitches είναι ένα HTML5 σύστημα φύλλων. Απλά σύρουμε και βάζουμε τα αρχεία εικόνας στο χώρο που μας δίνεται, κάνουμε κλικ στο κουμπί “Δημιουργία” για να δημιουργήσουμε μια σελίδα με στυλ. Το stitches χρησιμοποιεί ένα ζευγάρι των HTML5 APIs, και είναι μόνο προς το παρόν συμβατό με τις τελευταίες εκδόσεις του Chrome και Firefox. Ωστόσο, δεν λειτουργεί σε IE9. Απαιτούσε jQuery 1.7.1 +, Modernizr, Dropfile, Flashcanvas για παλαιότερα browsers. Είναι υπό την άδεια του License MIT.

 

Πηγή

 

3. HTML5 Maker

 

 

Το HTML5 Maker είναι μια online Animatio υπηρεσία / εργαλείο για τη δημιουργία κινούμενου, διαδραστικού περιεχομένου με χρήση HTML, HTML5, CSS και JavaScript. Είναι πολύ εύκολο στη χρήση και την ίδια στιγμή μπορεί να μας βοηθήσει να επιτευχθούν πολύ καλά αποτελέσματα. Επιτρέπει την παραγωγή cross-browser κινούμενου περιεχομένου, όπως javascript και HTML5 animation, Slideshows, Presentations και Sliders.

 

Πηγή

 

4. Initializr

 

 

Το Initializr είναι ένα σύστημα HTML5 templates για να μας βοηθήσει να ξεκινήσουμε με ένα νέο σχέδιο που βασίζεται σε Boilerplate HTML5. Δημιουργεί ένα καθαρό προσαρμόσιμο template με ακριβώς αυτό που χρειαζόμαστε για να ξεκινήσουμε.

 

Πηγή

 

4. Sprite Box

 

 

Το Spritebox είναι ένα εργαλείο WYSIWYG για να βοηθήσει τους σχεδιαστές ιστοσελίδων να δημιουργήσουν εύκολα και γρήγορα CSS classes και IDs από μια μοναδική εικόνα sprite. Βασίζεται στην αρχή του να χρησιμοποιούμε το background – position property για την ευθυγράμμιση περιοχών μιας εικόνας sprite σε στοιχεία διαγράμματος μιας ιστοσελίδας. Αυτό έγινε με ένα συνδυασμό JQuery, CSS3 και HTML5, και είναι δωρεάν στη χρήση.

 

Πηγή

 

5. Liveweave

 

 

Το Liveweave αποτελείται από στοιχεία HTML5, CSS3 και Javascript για web developers και designers. Το Liveweave έχει ενσωματωμένη context-sensitive αυτόματη συμπλήρωση για HTML4/HTML5 και CSS2/CSS3, και το κάνει πιο εύκολο. Ας συνεχίσουμε την πληκτρολόγηση των HTML5 και CSS3 tags / στοιχείων που χρειαζόμαστε. Η ευκολία της γραφής HTML5 και CSS3 θα είναι κάτι αρκετά θετικό.

 

Πηγή

 

6. Literally Canvas

 

 

Το Literally Canvas είναι ένα λογισμικό ανοικτού κώδικα HTML5 widget, το οποίο μπορεί να ενσωματωθεί σε οποιαδήποτε σελίδα, που να επιτρέπει στους χρήστες να σχεδιάζουν online. Έχει ένα απλό σύνολο εργαλείων, συμπεριλαμβανομένου το σχεδιασμό, τη διαγραφή, την επιλογή χρώματος, τα κουμπιά undo, redo, pan και zoοm. Το widget είναι φτιαγμένο με jQuery Underscore.js + και έχει ένα API για να καθορίσει το χρώμα του φόντου, τα εργαλεία και τις διαστάσεις.

 

Πηγή

 

7. HTML5 Demos

 

 

Τα HTML5 Demos θα μας ενημερώσουν αμέσως αν ο Firefox υποστηρίζει HTML5 canvas ή αν ο Safari μπορεί να χρησιμοποιήσει το HTML5 simple chat client ή όχι.

 

Πηγή

 

8. HTML5 Visual Cheat Sheet

 

 

Αυτό το cheat sheet είναι ουσιαστικά ένα απλό οπτικό δίκτυο με έναν κατάλογο όλων των HTML tags και των σχετικών χαρακτηριστικών τους, που υποστηρίζονται από HTML εκδόσεις 4.01 ή / και 5. Το απλό οπτικό στυλ που χρησιμοποιείται μας επιτρέπει να βρούμε με μια ματιά όλα αυτά που ψάχνουμε.

 

Πηγή

 

9. Switch to HTML5

 

 

Η αλλαγή σε HTML5 είναι ένα βασικό και αποτελεσματικό σύστημα template. Αν ξεκινάμε ένα νέο project, θα πρέπει να επισκεφθούμε την ιστοσελίδα και θα έχουμε ένα δωρεάν HTML5 website template.

 

Πηγή

 

10. Online SVG to HTML5 Canvas Tool

 

 

Αυτό το εργαλείο μετατρέπει το SVG σε λειτουργία HTML5 Canvas JavaScript. Συνεργάζεται με οποιοδήποτε host, και βοηθά τους ανθρώπους να πειραματιστούν με το canvas. Οι περισσότεροι φορείς πακέτων (Illustrator, Inkscape κλπ) μπορούν να εξαχθούν ως SVG.

 

Πηγή

 

11. On/OFF FlipSwitch

 

 

Πηγή

 

12. HTML5 Test

 

 

Το HTML5 test score είναι μια ένδειξη του πόσο καλά ο browser μας υποστηρίζει τα επικείμενα HTML5 standard και τις σχετικές προδιαγραφές. Ακόμη και αν η προδιαγραφή δεν έχει οριστικοποιηθεί ακόμα, όλοι οι κατασκευαστές browsers διασφαλίζουν έτσι ώστε οι browsers να είναι έτοιμοι για το μέλλον. Μαθαίνουμε ποια είναι τα μέρη του HTML5 που ήδη υποστηρίζονται από το browser μας και συγκρίνουμε τα αποτελέσματα με άλλους browsers.

 

Πηγή

 

13. Patternizer

 

 

Το Patternizer είναι ένα εύκολο σύστημα για να χρησιμοποιήσουμε μοτίβο με ραβδώσεις.

 

Πηγή

 

14. Lime JS

 

 

Πρόκειται για ένα πλαίσιο παιχνιδιού HTML5 για τη δημιουργία παιχνιδιών έτσι ώστε να δουλέψει στις σύγχρονες οθόνες αφής και τα desktop browsers. Το LimeJS έχει δημιουργηθεί με το Closure Library built από την Google και συνοδεύεται με λειτουργίες / classes για να ελέγχει το timeline, τα γεγονότα, τα σχήματα και τα κινούμενα σχέδια. Επίσης, το πλαίσιο έχει την πλήρη υποστήριξη Sprite φύλλων (μπορούμε να συλλέξουμε όλες τις εικόνες μέσα σε ένα ενιαίο αρχείο).

 

Πηγή

 

15. HTML5 Reset

 

 

Το HTML5 Reset είναι ένα σύνολο αρχείων (HTML, CSS, κ.λπ.) που έχουν σχεδιαστεί για να βοηθά τους χρήστες και εξοικονομεί χρόνο για τα νέα έργα τους.

 

Πηγή