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

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
12/09/2013 από
Zeoz

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

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

1. Mockups

 

Moqups

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

Πηγή

2. Stitches

stitches

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

Πηγή

3. HTML5 Maker

html5maker

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

Πηγή

4. Initializr

intializr

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

Πηγή

4. Sprite Box

spritebox

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

Πηγή

5. Liveweave

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-widget

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

Πηγή

7. HTML5 Demos

html5demos

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

Πηγή

8. HTML5 Visual Cheat Sheet

html5cheatsheet

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

Πηγή

9. Switch to HTML5

switchtohtml5

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

Πηγή

10. Online SVG to HTML5 Canvas Tool

Professor Cloud

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

Πηγή

11. On/OFF FlipSwitch

on-off flipswitch

Πηγή

12. HTML5 Test

html5test

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

Πηγή

13. Patternizer

Patternizer

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

Πηγή

14. Lime JS

limejs

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

Πηγή

15. HTML5 Reset

html5reset

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

Πηγή








Hide ↑

Xtnd.it Group | e-xtend your possibilities

Ripple Effects με SVG και Javascript ~ Material Design 

18 September 2015

Ενα σε βάθος tutorial για το πώς να οικοδομήσουμε  ripple effect  που περιγράφονται με βάση των προδιαγραφών σχεδιασμού της Google και να τις συνδυάσουμε[…]

Read more...

5η Έκθεση για τις Υπηρεσίες Internet Web World Expo 2015

18 September 2015

 24-25 Οκτωβρίου – Ζάππειο Μέγαρο|  

Η WebWorldExpo[…]

Read more...

WordPress Greek Community 3rd meetup

21 April 2015

Τρίτη 28/04/2015, 18:00
THE HUB EVENTS, Αλκμήνης 5, Κ. Πετράλωνα

Η ελληνική κοινότητα του WordPress είναι εδώ! Αρκετό καιρό μετά το προηγούμενο meetup[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

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

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.