Πώς να χρησιμοποιήσετε τα εργαλεία προγραμματιστή ιστού του Firefox για να προβάλετε τις δομές ιστοτόπων σε 3D

Ο Firefox 11 πρόσθεσε δύο νέα εργαλεία ανάπτυξης ιστού στο ήδη εντυπωσιακό οπλοστάσιο του Firefox. Το χαρακτηριστικό Tilt απεικονίζει τις δομές ιστοτόπων σε 3D, ενώ ο επεξεργαστής στυλ μπορεί να επεξεργάζεται τα φύλλα στυλ CSS εν πτήσει.

Το τρισδιάστατο χαρακτηριστικό, γνωστό ως Tilt, είναι ένας τρόπος προβολής του DOM του ιστότοπου. Ενσωματώνεται με τον υπάρχοντα Έλεγχο εγγράφων και χρησιμοποιεί το WebGL για την προβολή πλούσιων γραφικών 3D στο πρόγραμμα περιήγησης.

Tilt - Οπτικοποίηση ιστοσελίδας 3D

Μπορείτε να αποκτήσετε πρόσβαση στο Tilt από τον Επιθεωρητή σελίδων του Firefox. Για να ξεκινήσετε, ανοίξτε τον Επιθεωρητή σελίδας επιλέγοντας "Επιθεώρηση" από το μενού Web Developer. Μπορείτε επίσης να κάνετε δεξί κλικ στην τρέχουσα σελίδα και να επιλέξετε "Inspect Element" για να ξεκινήσετε τον επιθεωρητή σε ένα συγκεκριμένο στοιχείο.

Κάντε κλικ στο κουμπί "3D" στη γραμμή εργαλείων επιθεωρητών.

Θα δείτε τη δομή της σελίδας μετά την ενεργοποίηση της λειτουργίας 3D, αλλά θα φαίνεται επίπεδη μέχρι να την περιστρέψετε.

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

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

Περισσότερες λειτουργίες 3D

Η λειτουργία απεικόνισης 3D βασίστηκε στην επέκταση Tilt, αλλά δεν διαθέτει όλα τα χαρακτηριστικά της επέκτασης Tilt. εάν θέλετε να προσαρμόσετε τα χρώματα ή ακόμα και να εξάγετε την οπτικοποίηση ως αρχείο μοντέλου 3D για χρήση με ένα πρόγραμμα επεξεργασίας 3D, θα χρειαστεί να εγκαταστήσετε το πρόσθετο Tilt 3D. Μόλις έχετε, θα έχετε μια νέα επιλογή "Tilt" στο μενού Web Developer.

Κάντε κλικ στο κουμπί Ακύρωση για να χρησιμοποιήσετε την παλιά έκδοση του Tilt όταν σας ζητηθεί.

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

CSS Style Editor

Για να προβάλετε και να επεξεργαστείτε φύλλα στυλ CSS μιας σελίδας, ανοίξτε το Editor στυλ από το μενού Web Developer.

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

Οι αλλαγές αντικατοπτρίζονται αμέσως στη σελίδα. Εάν αλλάξετε ένα φύλλο στυλ, η σελίδα θα χάσει τις πληροφορίες στυλ. Εάν επεξεργαστείτε ένα φύλλο στυλ, θα δείτε τις αλλαγές να εμφανίζονται στη σελίδα ενώ πληκτρολογείτε.

Μπορείτε να αποθηκεύσετε ένα αντίγραφο ενός από τα φύλλα στυλ στον υπολογιστή σας, να εισαγάγετε ένα υπάρχον φύλλο στυλ από τον υπολογιστή σας ή να προσθέσετε ένα νέο κενό φύλλο στυλ με τις συνδέσεις "Αποθήκευση", "Εισαγωγή" ή "Νέες συνδέσεις" στο παράθυρο Editor στυλ.

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