Πώς να κάνετε παρουσιάσεις HTML με διαφάνειες ιστού

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

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

Τι είναι οι διαδικτυακές διαφάνειες;

Είναι να το ονομάσουμε κάπως ένα "πλαίσιο" ανοιχτού κώδικα, που δημιουργήθηκε από Jose Luis Antunez, αυτό μας επιτρέπει δημιουργήστε παρουσιάσεις HTML γρήγορα και εύκολα. Το εργαλείο έχει τα απαραίτητα για να κάνετε τις δικές σας παρουσιάσεις, επίσης, μπορείτε να πάρετε μία από τις παρουσιάσεις επίδειξης και να την προσαρμόσετε στις προτιμήσεις σας μέσα σε λίγα λεπτά.

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

Πώς να κατεβάσετε τις διαφάνειες ιστού;

Για να κατεβάσετε ιστοσελίδες, απλώς εκτελέστε την ακόλουθη εντολή από τον αγαπημένο σας κατάλογο:

wget https://github.com/jlantunez/webslides/archive/master.zip

Μπορείτε επίσης να κλωνοποιήσετε το επίσημο αποθετήριο με

git clone https://github.com/jlantunez/webslides.git

Μέσα στο φάκελο του έργου θα λάβετε τα απαραίτητα js, css και demos για να ξεκινήσετε να δημιουργείτε εύκολα τις δικές σας παρουσιάσεις HTML.

Πώς να χρησιμοποιήσετε τις διαφάνειες ιστού;

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

Τι παίρνουμε όταν κατεβάζουμε ιστοσελίδες;

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

• Ο φάκελος css θα αποθηκεύσει τα στυλ των παρουσιάσεών μας
• Τα απαραίτητα javascripts θα αποθηκευτούν στο φάκελο js, συμπεριλαμβανομένου του θεμελιώδους webslide.js, όπου γίνεται το μεγαλύτερο μέρος της μαγείας.
• Οι εικόνες και τα αρχεία html των επιδείξεων θα αποθηκευτούν στους φακέλους εικόνων και επιδείξεων αντίστοιχα.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Δημιουργία παρουσιάσεων HTML με διαφάνειες ιστού

Υπάρχουν 2 θεμελιώδη πλεονεκτήματα κατά τη χρήση διαφανειών ιστού, τα οποία αναφέρουμε παρακάτω:

• Ο κωδικός είναι καθαρός και επεκτάσιμος. Περιλαμβάνει επίσης διαισθητική σήμανση με τη χρήση των πιο δημοφιλών ονοματολογιών. Δεν υπάρχει ανάγκη χρήσης τάξεων ή υπερβολικής ένθεσης.
• Κάθε <section> στο #webslides αντιπροσωπεύει μια διαφάνεια. Έτσι, η σελιδοποίηση είναι εξαιρετικά απλή.

Διαφάνεια 1  Διαφάνεια 1

Με τον ίδιο τρόπο μπορούμε να κάνουμε κάθετες διαφάνειες, προσθέτοντας κάθετο στυλ

Μαθήματα που απαρτίζουν το CSS στις ιστοσελίδες

• Τυπογραφία: .text-landing, .text-data, .text-intro ...
• Χρώματα φόντου: .bg-primer, .bg-apple, .bg-blue ...
• Εικόνες φόντου: .background, .background-center-bottom ...
• Κάρτες: .card-50, .card-40 ...
• Ευέλικτα μπλοκ: .flexblock.clients, .flexblock.metrics ...

Επέκταση σε διαφάνειες ιστού

Οι διαδικτυακές διαφάνειες μας επιτρέπουν να προσθέτουμε νέα στυλ και λειτουργίες, για παράδειγμα μπορούμε να προσθέσουμε μερικούς από τους ακόλουθους πόρους:

• Unsplash
• animate.css
• icles.js
• pt

Επίδειξη παρουσίασης HTML με διαφάνειες ιστού

Μπορείτε να δείτε μια σειρά από επιδείξεις παρουσιάσεων HTML που γίνονται με διαφάνειες ιστού Aquí. Ομοίως, όταν κάνετε λήψη του πλαισίου, μπορείτε να αποκτήσετε πρόσβαση στην κωδικοποίηση καθεμιάς από αυτές τις επιδείξεις.

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