Περιεχόμενο
- 01. Φάρος
- 02. Πολυμερές
- 03. Εξερεύνηση API
- 04. Φτερουγίσματα
- 05. Google GitHub
- 06. Μαριονέτα
- 07. Κουτί εργασίας
- 08. Codelabs
- 09. Χρώμα εργαλείο
- 10. Σχεδίαση σπριντ
- 11. Βιβλίο οδηγιών People + AI
- 12. Βοηθός Google
- 13. PageSpeed Insights
- 14. AMP στο Google
- 15. Google DevTools
- 16. Σχεδιασμός υλικών
Η εργασία στον Ιστό συνήθως σημαίνει ότι θα συνεργάζεστε με την Google σε κάποιο σχήμα ή μορφή. Και βλέποντας ότι το Google Chrome βρίσκεται μπροστά από τον ανταγωνισμό, οι σχεδιαστές και οι προγραμματιστές πρέπει να σκεφτούν πώς θα λειτουργήσει το έργο τους με το πρόγραμμα περιήγησης. Πώς θα φαίνεται; Τι τεχνολογίες υποστηρίζει, πόσο ασφαλές είναι και πώς θα λειτουργήσει;
Ευτυχώς, το Chrome παρέχει εργαλεία για να διασφαλίσει ότι οποιοσδήποτε ιστότοπος ή εφαρμογή θα είναι στα καλύτερά του. Τα DevTools επιτρέπουν στους σχεδιαστές και τους προγραμματιστές να αποκτήσουν πληροφορίες για μια ιστοσελίδα: μπορείτε να χειριστείτε το DOM, να ελέγξετε το CSS, να πειραματιστείτε σε σχέδια με ζωντανή επεξεργασία, να εντοπίσετε σφάλματα JavaScript και να ελέγξετε την απόδοση. (Δείτε περισσότερα σχετικά με τον τρόπο χρήσης αυτών των εργαλείων ιστού Google εδώ και αν ξεκινάτε από το μηδέν, δείτε και τη λίστα με τους κορυφαίους κατασκευαστές ιστού).
Όμως η Google προσφέρει περισσότερα από απλώς το πρόγραμμα περιήγησης. Διαθέτει εργαλεία και πόρους για να βοηθήσει σχεδόν κάθε πτυχή της ζωής σας στο σχεδιασμό και την ανάπτυξη. Θέλετε να μάθετε πώς να βελτιώσετε την απόδοση; Ο φάρος είναι εδώ για να σας βοηθήσει. Θέλετε να δημιουργήσετε ιστότοπους για κινητά με καλύτερη απόδοση; Τότε πείτε γεια στο AMP. Θέλετε να δημιουργήσετε όμορφα PWA; Στη συνέχεια, το Flutter, το Material Design και το Workbox είναι έτοιμα να μπουν.
Η ομορφιά της χρήσης εργαλείων, πόρων, βιβλιοθηκών και πλαισίων Google είναι ότι γνωρίζετε ότι θα λειτουργούν καλά με το πρόγραμμα περιήγησης Chrome - το πιο δημοφιλές πρόγραμμα περιήγησης στον πλανήτη. Για περισσότερα εργαλεία, ανατρέξτε στη συλλογή εργαλείων σχεδιασμού ιστοσελίδων.
01. Φάρος
Η απόδοση αποτελεί βασικό παράγοντα για την επιτυχία ενός ιστότοπου και το Lighthouse είναι το εργαλείο της Google για τη βελτίωση της ποιότητας των ιστοσελίδων (η σωστή υπηρεσία φιλοξενίας ιστοσελίδων θα βοηθήσει επίσης). Λοιπόν, πώς χρησιμοποιείτε το φάρο και τι μπορεί να κάνει; Στην απλούστερη μορφή του, μπορείτε να εκτελέσετε το Lighthouse από την καρτέλα "Έλεγχοι" και να επιλέξετε από μια επιλογή επιλογών, συμπεριλαμβανομένων επιτραπέζιων υπολογιστών ή κινητών, εκτός από πλαίσια επιλογής για απόδοση, προσβασιμότητα και SEO, για να δημιουργήσετε μια τελική αναφορά με προτεινόμενες βελτιώσεις.
02. Πολυμερές
Το Polymer είναι γνωστό για τη δουλειά του με στοιχεία ιστού, αλλά το έργο έχει πλέον επεκτείνει το ρεπερτόριό του για να συμπεριλάβει μια συλλογή βιβλιοθηκών, εργαλείων και προτύπων. Τι περιλαμβάνεται; Το LitElement είναι ένα πρόγραμμα επεξεργασίας που διευκολύνει τον ορισμό των στοιχείων ιστού, ενώ το lit-html είναι μια βιβλιοθήκη templating HTML που επιτρέπει στους χρήστες να γράφουν πρότυπα HTML επόμενης γενιάς στο JS. Επιπλέον, θα βρείτε επίσης ένα κιτ PWA Starter, την αρχική βιβλιοθήκη Polymer και σύνολα στοιχείων ιστού.
03. Εξερεύνηση API
Η Google διαθέτει μια τεράστια βιβλιοθήκη API για προγραμματιστές, αλλά η εύρεση αυτού που χρειάζεστε δεν είναι εύκολη υπόθεση. Αυτό είναι όπου ο εξερευνητής API της Google μπαίνει για να προσφέρει ένα βοήθημα. Υπάρχει μια μεγάλη λίστα που μπορεί να μετακινηθεί, αλλά, για ταχύτερη πρόσβαση, υπάρχει ένα πλαίσιο αναζήτησης για το φιλτράρισμα της λίστας API. Κάθε καταχώριση συνδέεται με μια σελίδα αναφοράς με περισσότερες λεπτομέρειες σχετικά με τον τρόπο χρήσης του API.
04. Φτερουγίσματα
Αν ψάχνετε να δημιουργήσετε όμορφες εφαρμογές για κινητά, ιστούς και επιτραπέζιους υπολογιστές από μία βάση κώδικα, τότε το Flutter θα μπορούσε να είναι για εσάς. Ο ιστότοπος είναι μια πλήρης αναφορά στην εργασία και την κατασκευή με το Flutter. Δεν έχω ιδέα τι να κάνω; Τα έγγραφα μεταφέρουν έναν χρήστη από την εγκατάσταση έως τη δημιουργία, με τη βοήθεια πολλών δειγμάτων και μαθημάτων.
05. Google GitHub
Όπως θα γνωρίζουν οι περισσότεροι, το GitHub είναι η πλατφόρμα / αποθετήριο φιλοξενίας για την αποθήκευση και κοινή χρήση κώδικα και αρχείων. Και ευτυχώς η Google έχει τη δική της θέση στην πλατφόρμα με πάνω από 260 αποθετήρια για να περάσει. Χρησιμοποιήστε το φίλτρο για να μειώσετε τον χρόνο αναζήτησης και να πλησιάσετε το αποθετήριο με το οποίο θέλετε να παίξετε ή να συνεισφέρετε.
06. Μαριονέτα
Ενσωματωμένος κόμβος, το Puppeteer προσφέρει ένα API υψηλού επιπέδου που σας επιτρέπει να έχετε πρόσβαση σε χωρίς κεφαλή Chrome - ουσιαστικά το Chrome χωρίς το περιβάλλον εργασίας χρήστη, το οποίο οι προγραμματιστές μπορούν στη συνέχεια να ελέγχουν μέσω της γραμμής εντολών Τι μπορείτε λοιπόν να κάνετε με το Puppeteer; Μερικές επιλογές είναι διαθέσιμες για τη δημιουργία στιγμιότυπων οθόνης και PDF σελίδων, την αυτοματοποίηση της υποβολής φόρμας και τη δημιουργία ενός αυτοματοποιημένου περιβάλλοντος δοκιμών.
07. Κουτί εργασίας
Αν θέλετε να δημιουργήσετε ένα PWA τότε αυτό είναι ένα εξαιρετικό σημείο εκκίνησης. Το Workbox παρέχει μια συλλογή βιβλιοθηκών JavaScript για την προσθήκη υποστήριξης εκτός σύνδεσης σε εφαρμογές ιστού. Μια επιλογή σε βάθος οδηγών δείχνει πώς να δημιουργήσετε και να καταχωρήσετε ένα αρχείο εργαζόμενου υπηρεσίας, αιτήματα διαδρομής, χρήση πρόσθετων και χρήση πακέτων στο Workbox. Και υπάρχει επίσης ένα σύνολο παραδειγμάτων στρατηγικών προσωρινής αποθήκευσης που μπορείτε να δείτε.
08. Codelabs
Χρειάζεστε πρακτική καθοδήγηση για ένα προϊόν Google; Το Codelabs παρέχει «μια καθοδηγούμενη, φροντιστηριακή, πρακτική εμπειρία κωδικοποίησης». Ο ιστότοπος χωρίζεται σε κατηγορίες και εκδηλώσεις, καθιστώντας γρήγορο και εύκολο να βρείτε αυτό που θέλετε. Περιλαμβάνει Analytics, Android, Βοηθό, επαυξημένη πραγματικότητα, Flutter, G Suite, Search, TensorFlow και εικονική πραγματικότητα. Ορίστε μια επιλογή και λάβετε τον κωδικό και τις οδηγίες που χρειάζεστε για να δημιουργήσετε μικρές εφαρμογές.
09. Χρώμα εργαλείο
Το Color Tool είναι ένα απλό εργαλείο που σας επιτρέπει να δημιουργείτε, να μοιράζεστε και να εφαρμόζετε μια παλέτα εκτός από τον έλεγχο προσβασιμότητας. Οι χρήστες μπορούν να επιλέξουν μια προκαθορισμένη παλέτα από την παλέτα υλικών. Απλώς επιλέξτε ένα χρώμα και, στη συνέχεια, εφαρμόστε το στο βασικό συνδυασμό χρωμάτων, μεταβείτε στη δευτερεύουσα επιλογή και επιλέξτε ξανά. Τέλος, επιλέξτε χρώματα κειμένου και για τα δύο σχήματα. Εναλλακτικά, μεταβείτε στο Custom για να επιλέξετε τα χρώματα σας. Στη συνέχεια, μεταβείτε στην Προσβασιμότητα για να ελέγξετε ότι όλα είναι καλά πριν, τελικά, εξαγάγετε την παλέτα.
10. Σχεδίαση σπριντ
Το Design Sprint Kit είναι για όσους μαθαίνουν πώς να συμμετέχουν ή να τρέχουν σπριντ σχεδιασμού. Φαίνεται να καλύπτει όλες τις βάσεις γνώσεων, από πρώτους έως έμπειρους διαμεσολαβητές σπριντ. Μάθετε σχετικά με τη μεθοδολογία ή μεταβείτε κατευθείαν στο στάδιο του σχεδιασμού, συμπεριλαμβανομένης της σύνταξης συνόλων, της συλλογής δεδομένων και της έρευνας, καθώς και τι πρέπει να κάνετε μετά το σπριντ. Περιλαμβάνει επίσης μια σειρά πόρων όπως εργαλεία, πρότυπα, συνταγές και την επιλογή υποβολής της δικής σας μεθόδου. Επίσης, πιθανότατα θα χρειαστείτε κάπου για να αποθηκεύσετε και να μοιραστείτε πόρους, οπότε βεβαιωθείτε ότι η επιλογή αποθήκευσης στο cloud είναι σωστή.
11. Βιβλίο οδηγιών People + AI
Αυτός ο οδηγός είναι το έργο της πρωτοβουλίας People + AI Research στο Google και φαίνεται να προσφέρει βοήθεια σε όσους θέλουν να κατασκευάσουν προϊόντα AI με επίκεντρο τον άνθρωπο. Ο περιεκτικός οδηγός χωρίζεται σε έξι κεφάλαια που καλύπτουν τις ανάγκες των χρηστών, τη συλλογή και αξιολόγηση δεδομένων, τα διανοητικά μοντέλα, την εμπιστοσύνη, τα σχόλια και τη χαριτωμένη αποτυχία. Κάθε κεφάλαιο συνοδεύεται από ασκήσεις, φύλλα εργασίας και τα εργαλεία και τους πόρους που απαιτούνται για την πραγματοποίησή του.
12. Βοηθός Google
Αυτή είναι η πλατφόρμα προγραμματιστή του Βοηθού Google, που προσφέρει έναν οδηγό για τον τρόπο ενσωμάτωσης του περιεχομένου και των υπηρεσιών σας με τον Βοηθό Google. Σας δείχνει πώς να επεκτείνετε την εφαρμογή σας για κινητά, να παρουσιάζετε περιεχόμενο με πλούσιους τρόπους για Αναζήτηση και Βοηθό, φώτα ελέγχου, καφετιέρες και άλλες συσκευές στο σπίτι και να δημιουργείτε φωνητικές και οπτικές εμπειρίες για έξυπνα ηχεία, οθόνες και τηλέφωνα.
13. PageSpeed Insights
Το PageSpeed Insights αναλύει το περιεχόμενο ιστού και, στη συνέχεια, προσφέρει προτάσεις για το πώς να το κάνει να φορτώνει γρηγορότερα. Απλώς προσθέστε μια διεύθυνση URL, πατήστε το κουμπί ανάλυσης και περιμένετε να συμβεί η μαγεία. Ελέγξτε τα Έγγραφα για να λάβετε μια καλύτερη εικόνα σχετικά με τον τρόπο λειτουργίας του PageSpeed API και πώς να ξεκινήσετε να το χρησιμοποιείτε.
14. AMP στο Google
Το AMP είναι το εργαλείο της Google για τη δημιουργία σελίδων για κινητές συσκευές που φορτώνουν γρήγορα και (ελπίζουμε) ότι θα φτάσουν στην κορυφή της κατάταξης αναζήτησης. Μάθετε πώς μπορείτε να δημιουργήσετε γρήγορους ιστότοπους πρώτους χρήστες, να ενσωματώσετε AMP σε προϊόντα Google, να χρησιμοποιήσετε το Google AMP Cache για να κάνετε τις σελίδες AMP ταχύτερες και να δημιουργήσετε έσοδα από σελίδες AMP με άλλα προϊόντα Google.
15. Google DevTools
Κάθε σχεδιαστής και προγραμματιστής γνωρίζει (ή τουλάχιστον πρέπει να γνωρίζει) ότι το Chrome διαθέτει ένα σύνολο εργαλείων ενσωματωμένων απευθείας στο πρόγραμμα περιήγησης. Τα DevTools του Chrome είναι ιδανικά για τον έλεγχο των στοιχείων που αποτελούν μια σελίδα, τον έλεγχο CSS, την επεξεργασία σελίδων εν κινήσει και πολλά άλλα.
Η καρτέλα Στοιχεία είναι η εισαγωγή στο DevTools. Εμφανίζει τον κώδικα HTML που αποτελεί την επιλεγμένη σελίδα. Λάβετε μια εικόνα για τις ιδιότητες κάθε div ή ετικέτας από την επιλεγμένη σελίδα και ξεκινήστε τη ζωντανή επεξεργασία. Αυτό είναι ιδανικό για πειραματισμούς με σχέδια. Ελέγξτε τη διάταξη - αν χρησιμοποιείτε Flexbox ή Grid - και ρίξτε μια ματιά σε σχετικές γραμματοσειρές με παραδείγματα και εξετάστε κινούμενες εικόνες.
Αλλού, μπορείτε να δείτε και να αλλάξετε CSS. Η καρτέλα Στυλ στον πίνακα "Στοιχεία" παραθέτει τους κανόνες CSS που εφαρμόζονται στο τρέχον επιλεγμένο στοιχείο στο Δέντρο DOM. Ενεργοποιήστε και απενεργοποιήστε τις ιδιότητες (ή προσθέστε νέες τιμές) για να πειραματιστείτε με σχέδια. Αυτό είναι το τέλειο εργαλείο για να διασφαλίσετε ότι όλα λειτουργούν όπως αναμένεται πριν εφαρμόσετε τυχόν αλλαγές στο ζωντανό σχέδιο.
Μπορείτε επίσης να εντοπίσετε σφάλματα JavaScript, να βελτιστοποιήσετε την ταχύτητα του ιστότοπου και να ελέγξετε την ταχύτητα του δικτύου. Ακολουθεί μια γρήγορη συμβουλή που μπορείτε να χρησιμοποιήσετε για να επιταχύνετε αμέσως τη ροή εργασίας σας. Μεταβείτε στην καρτέλα Πηγές, κάντε κλικ στο Νέο απόσπασμα και προσθέστε κώδικα που χρησιμοποιείται συχνά. Ονομάστε το απόσπασμα κώδικα και αποθηκεύστε. Επαναλάβετε όπως απαιτείται. Τώρα μπορείτε να πάρετε αυτό το απόσπασμα κώδικα αντί να το γράψετε ξανά.
Όπως κάθε καλό πρόγραμμα περιήγησης, το Chrome εξελίσσεται συνεχώς και κάθε νέα έκδοση φέρνει νέες δυνατότητες. Μάθετε τι συμβαίνει στην πλατφόρμα κατάστασης του Chrome
16. Σχεδιασμός υλικών
Η ανάπτυξη μπορεί να θεωρηθεί ως το αγαπημένο παιδί της Google, αλλά, ό, τι κι αν κάνετε, δημιουργείτε ή χτίζετε, πρέπει να φαίνεται καλό και να δίνει στον χρήστη μια εμπειρία που τους κάνει να θέλουν να το χρησιμοποιήσουν. Το υλικό είναι μια πιο πρόσφατη προσθήκη στο σταθερό της Google, αλλά είναι ένα σύστημα σχεδιασμού που έχει ωριμάσει σε ένα ζωτικό κομμάτι του κιτ σχεδίασης.
Όπως κάθε καλό σύστημα σχεδίασης, έχει το δικό του σύνολο οδηγιών, τις οποίες πρέπει να εξετάσετε πριν μπείτε στα πιο συναρπαστικά πράγματα. Λάβετε μια επισκόπηση του τρόπου χρήσης διαφορετικών στοιχείων, τι είναι το Υλικό θέμα, πώς να εφαρμόσετε ένα θέμα και οδηγούς χρηστικότητας, συμπεριλαμβανομένης της προσβασιμότητας. Αλλού, υπάρχει μια εικόνα για το Material Foundation, το οποίο περιλαμβάνει τους βασικούς τομείς του σχεδιασμού, όπως διάταξη, πλοήγηση, χρώμα, τυπογραφία, ήχος, εικονογραφία, κίνηση και αλληλεπίδραση. Κάθε κατηγορία αποκαλύπτει τις δοσολογίες και τις δυνατότητές της και πού πρέπει να προσέξετε. Για να δώσουμε μια ιδέα για το τι να περιμένουμε, η κατηγορία Διάταξη προσφέρει ενότητες σχετικά με την κατανόηση της διάταξης, της πυκνότητας των εικονοστοιχείων, του τρόπου εργασίας με μια αποκριτική διάταξη, συμπεριλαμβανομένων στηλών, υδρορροών και περιθωρίων, σημείων διακοπής, περιοχών διεπαφής χρήστη και μεθόδων διαστήματος για να αναφέρουμε μερικές.
Πέρα από το τμήμα σχεδίασης είναι τα στοιχεία, τα οποία παρέχουν τα φυσικά δομικά στοιχεία που απαιτούνται για τη δημιουργία ενός σχεδίου. Τι περιλαμβάνεται εδώ; Κουμπιά, πανό, κάρτες, διάλογοι, διαχωριστικά, λίστες, μενού, ενδείξεις προόδου, ρυθμιστικά, σνακ μπαρ (αυτά είναι σύντομα μηνύματα σχετικά με τις διαδικασίες εφαρμογών στο κάτω μέρος της οθόνης), καρτέλες, πεδία κειμένου και συμβουλές εργαλείων. Αναμφίβολα μια ολοκληρωμένη συλλογή στοιχείων.
Και οι προγραμματιστές δεν έχουν ξεχαστεί, με λεπτομέρειες και σεμινάρια σχετικά με τον τρόπο δημιουργίας διαφορετικών πλατφορμών - Android, iOS, Web και Flutter. Και, τέλος, υπάρχει μια σελίδα αφιερωμένη σε μια σειρά πόρων για να συμβάλει στην υλοποίηση του επιλεγμένου σχεδιασμού σας.
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο περιοδικό net. Αγορά τεύχος 326.
