Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από g_p » 25 Ιουν 2010 20:57

Γεια σας,

θα ήθελα να φτιάξω ένα site στο οποίο θα υπάρχει κίνηση με fade in/fade out images/other sites.Δεν θέλω να γίνει με Flash αλλά με php kai Javascript.
Θα ήμουν ευγνώμων αν μπορούσε κάποιος να με συμβούλευε τι ακριβώς να διαβάσω για να υπάρχει κίνηση στο site (δηλαδή η μία καρτέλα από δεξιά ή αριστερά να σκεπάζει την προηγούμενη και στα πλάγια μετά να φαίνεται μια μικρή λωρίδα η επόμενη και η προηγούμενη επιλογή). έχω κάνει attach ένα ppt παράδειγμα.

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

Υ.Γ. To site με html είναι έτοιμο και χωρισμένο σε θεματικές ενότητες και templates (χρησιμοποιώ php kai mysql).Απλά θέλω να χωρίσω τις θεματικές ενότητες σε αυτά τα images
και κάνοντας κλικ στα images να πηγαίνω στα templates του site που αντιστοιχούν, αυτό άραγε μπορεί να γίνει? είναι εφικτό?ή από πλευρά ταχύτητας θα υπάρχει καθυστέρηση???


Ευχαριστώ
Συνημμένα
ppt_site_example.rar
PPT για παράδειγμα site
(3.85 KiB) Μεταφορτώθηκε 107 φορές

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από dimsis » 25 Ιουν 2010 22:14

Με Jquery μπορείς να κάνεις αυτό που θέλεις χωρίς τρελές επιβαρύνσεις και καθυστερήσεις.
π.χ.
http://designreviver.com/tutorials/jque ... accordion/
http://www.marghoobsuleman.com/jQuery-common-accordion
http://www.adobe.com/cfusion/exchange/i ... id=1695024
http://www.gethifi.com/blog/tutorial-a- ... nt-binding
http://css-tricks.com/snippets/jquery/s ... accordion/
http://www.practicalecommerce.com/artic ... ion-Widget
κλπ http://www.catswhocode.com/blog/8-amazi ... accordions


(ελληνικό tutorial αλλά για vertical accordion οπότε θα χρειαστείς ψιλοαλλαγές: http://greektuts.net/jquery-accordion/ )

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από g_p » 25 Ιουν 2010 23:58

Ευχαριστώ

1. άλλος τρόπος χωρίς τις βιβλιοθήκες υπάρχει για αυτές τις κινήσεις? πρέπει να εγκαταστήσω κάτι στο pc μου για να παίξουν αυτά?

2. Ωστόσο αυτό στο ελληνικό tutorial το ακορντεόν καθυστερεί λιγάκι αλλά γιατί?

3. Πιστεύεις ότι στο δικό μου site που έχω php + mysql θα έχει καθυστερήσεις??
γιατί θέλω κάνοντας κλικ στην επιλογή 1 να εμφανίζεται το html template 1 στο 2 το html template 2 στο 3 το e-shop κ.ο.κ.

4. Α επίσης στα περισσότερα παραδείγματα πατώντας σε κάποια επιλογή σε πάει σε μία διαφορετική σελίδα, εγώ θα ήθελα το ακορντεόν να πιάνει όλη τη σελίδα και να εμφανίζει μέσα σε αυτό ένα ολόκληρο site, γίνεται αυτό???

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από dimsis » 26 Ιουν 2010 00:04

1) http://www.leigeber.com/2008/05/horizon ... dion-menu/
http://www.google.gr/search?q=javascrip ... =firefox-a

2) $(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");

Εσύ δίνεις την ταχύτητα των effect στο jquery. αργεί γιατί έτσι το ήθελε ο συντάκτης :)

3) Εσύ θέλεις να βάλεις ολόκληρες λειτουργικές HTML σελίδες σε κάθε "slide" του accordion; Όσο περισσότερο περιεχόμενο έχεις εκεί μέσα, τόσο μεγαλυτερη καθυστέρηση θα υπάρχει.

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από g_p » 26 Ιουν 2010 01:08

dimsis έγραψε: 3) Εσύ θέλεις να βάλεις ολόκληρες λειτουργικές HTML σελίδες σε κάθε "slide" του accordion; Όσο περισσότερο περιεχόμενο έχεις εκεί μέσα, τόσο μεγαλυτερη καθυστέρηση θα υπάρχει.
Ναι, θέλω κάνοντας κλικ σε μία επιλογή του accordion να μην εμφανίζεται μία εικόνα αλλά ένα ολόκληρο site με τις βασικές επιλογές, αυτό σημαίνει ότι θέλω το accordion να πιάνει όλη τη σελίδα.είμαι αρκετά προβληματισμένος με αυτό, πως θα γίνει να πιάνει όλη τη σελίδα, να μην είναι βαρύ και να διαβάζει και από την βάση, σκέψου ότι σε μία από τις επιλογές του accordion θα βάλω και e-shop να εμφανίζεται...δηλαδή έχω τo site μου, που χωρίζεται σε 5 θεματικές ενότητες, αρχική σελίδα, e-shop, ανακοινώσεις κλπ, και για κάθε ένα από αυτά θα πρέπει κάνοντας κλικ να εμφανίζεται το ανάλογο template

1. με το ακορντεόν θυμάται την προηγούμενη κατάσταση κάποιας επιλογής? δηλαδή αν κάποιος έχει επιλέξει το e-shop και έχει κάνει add ένα προϊόν και μετά ο χρήστης πάει σε άλλη επιλογή του ακορντεόν π.χ. στις ανακοινώσεις , γίνεται όταν πάει πίσω στο κατάστημα να θυμάται που ακριβώς βρισκόταν ο χρήστης, να θυμάται καταστάσεις???

2. παρατηρώ ότι σε όλα τα παραδείγματα στο ακορντεόν εμφανίζονται όλες οι πιθανές επιλογές, γίνεται κάποιος να μην βλέπει όλες τις πιθανές επιλογές αλλά κάθε φορά να βλέπει την αμέσως προηγούμενη και την αμέσως επόμενη??

π.χ. έχω 6 επιλογές στο ακορντεόν θέλω όταν ο χρήστης βρίσκεται στην επιλογή 2 να μπορεί να βλέπει δεξιά μόνο το 3 και αριστερά μόνο το 1, και απλά όταν κάνει κλικ στο 4να βλέπει πάλι δεξιά μόνο το 5 και αριστερά μόνο το 3, δηλαδή σαν να έχουμε μία "σφαίρα" και να γυρίζει και να υπάρχει πάντα δεξιά και αριστερά μία μόνο επιλογή για να αλλάζει και όχι όλες οι πιθανές όπως συμβαίνει στα περισσότερα παραδειγματα

3. μα οι βιβλιοθήκες που λέμε υποστηρίζονται από όλους τους browsers ή θα έχω πρόβλημα??

ευχαριστώ και πάλι

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από dimsis » 26 Ιουν 2010 01:20

Δύσκολο.... καλύτερα κάνε 3 εικονίτσες που δείχουν σαν accordion (μούφα accordion δηλαδή) και όταν κάνει κλικ ο άλλος να πηγαίνει σε full screen μόνο το δικό του κομμάτι. Διαφορετικά να πετάξεις 3 iframe π.χ. μέσα στο κάθε "slide" του accordion το κόβω ως memory / browser killer...
Άσε που δεν μου φαίνεται καθόλου φιλική προς τον χρήστη η όλη φάση. Να έχω δηλαδή στην ουσία 5 διαφορετικά sites μέσα σε 5 slides του accordion...

1. εφόσον προ-φορτώνει τα πάντα ναι, αν όμως φορτώνεις με ajax δυναμικά το περιεχόμενο του κάθε slide όποτε κάνει κλικ σε κάποιο τότε όχι εκτός και αν το κάνεις εσύ (από κώδικα π.χ. με cookies, session, forms κλπ) να τα θυμάται.

2) θέλει ψάξιμο διάφορα τέτοια scripts να δεις αν κάποιο υποστηρίζει αυτό που ζητάς

3) http://docs.jquery.com/Browser_Compatibility

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από g_p » 26 Ιουν 2010 16:58

dimsis έγραψε:Δύσκολο.... καλύτερα κάνε 3 εικονίτσες που δείχουν σαν accordion (μούφα accordion δηλαδή) και όταν κάνει κλικ ο άλλος να πηγαίνει σε full screen μόνο το δικό του κομμάτι. Διαφορετικά να πετάξεις 3 iframe π.χ. μέσα στο κάθε "slide" του accordion το κόβω ως memory / browser killer...
Άσε που δεν μου φαίνεται καθόλου φιλική προς τον χρήστη η όλη φάση. Να έχω δηλαδή στην ουσία 5 διαφορετικά sites μέσα σε 5 slides του accordion...
Χμ...δεν ειναι ακριβώς 5 διαφορετικά site, πρόκειται για το ίδιο site το οποίο το χωρίζω σε 5 θεματικές ενότητες π.χ. η 1η επιλογή στο ακορντεόν τον παει στo template για τις ανακοινώσεις , η 2η επιλογή στο template για το ηλεκτρονικό καταστημα , πρόκειται για το ίδιο site απλά χωρίζω τα templates ανάλογα με τις επιλογες του ακορντεόν. π.χ. στο template ανακοινώσεις θα υπάρχει ένα μενού αριστερά το οποίο θα έχει Νέα, Παλιές ανακοινώσεις, Θέσεις εργασίας κλπ και κάνοντας κλικ θα αλλάζει μόνο το περιεχόμενο του βασικού template στο οποίο βρίσκεται. Τι λες κάτι τέτοιο θα παιζει??
1. εφόσον προ-φορτώνει τα πάντα ναι, αν όμως φορτώνεις με ajax δυναμικά το περιεχόμενο του κάθε slide όποτε κάνει κλικ σε κάποιο τότε όχι εκτός και αν το κάνεις εσύ (από κώδικα π.χ. με cookies, session, forms κλπ) να τα θυμάται.
βασικά χρησιμοποιώ sessions με php, δεν χρησιμοποιώ καθόλου ajax, οποτε τι λες θα είμαι καλυμενός όταν το έχω κάνει με php???

Ευχαριστώ

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από dimsis » 26 Ιουν 2010 18:58

Σου ξαναλέω μου ακούγεται δύσχρηστο όπως το σκέφτεσαι. Αντί να έχω ας πούμε το κλασικό μενού που θα με πηγαίνει στις αντίστοιχες σελίδες, θα φορτώνει το σύμπαν με τη μια (μια και δεν χρησιμοποιείς ajax) και θα το εμφανίζει μέσα σε X accordion slides (divs / iframes whatever).
Όπως και να'χει σίγουρα θα είναι πολύ πιο "βαρύ" (μετάφραση: σκίζουμε τη μνήμη του server) από το να ήταν κλασικές ξεχωριστές σελιδούλες που λογικά θα ήταν και πιο SEO friendly, ενώ τώρα με τις κρυφές περιοχές παίζει.

Χώρια που θέλει καλό κώδικα ώστε να αποφύγεις τα conflicts που μπορεί να έχεις από μεταβλητές, styles με κοινά ονόματα.

Εφόσον έχεις έτοιμο τον κώδικα κατέβασε κάποιο content accordion από αυτά που σου έγραψα και κάνε τις δοκιμές σου, κρίνε και δες πως ανταποκρίνεται.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από fafos » 26 Ιουν 2010 19:15

Theoritika ginetai alla xreiazontai POLLES gnoseis gyro apo ajax.. oi "sygkrouseis" pou tha ginoun ekei mesa tha einai "thanatifores" gia thn kathe enothta.. vasika xreiazetai ena script apo to 0 giati ta etoima dinoun genika formarismata kai me aplo periexomeno se ena div gia paradeigma.. otan arxiseis na vazeis tous dikous sou kodikes t poio pithnon einai na mhn douleuei tipota.. gia paradeigma des auto: http://www.cruisenews.gr/cruise/40
otan to prototreksame trelathike o debugger kai xreiasthke na feiaksoume dikh mas ekdosh tou ajax script gia na doulepsoun ta butoons aristera kai akoma exoun kapoia mikroprovlhmata..

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πως σχεδιάζω ιστοσελίδα με Javascript, php με fade in/out

Δημοσίευση από g_p » 26 Ιουν 2010 21:17

ευχαριστώ για τις απαντήσεις σας, απ'οτι βλέπω στα περισσότερα παραδείγματα τα accordions απλά εμφανίζουν μία εικόνα ή ένα κείμενο.
Στην δική μου περίπτωση θέλω να υπάρχει κείμενο με links και επιλογές από αριστερά που σου εμφανίζουν ένα νέο κείμενο στο ίδιο template χωρίς να αλλάζει το υπάρχον template.
Μήπως το accordion όταν πρόκειται για static περιεχόμενο δουλεύει,ενώ όταν πρόκειται για δυναμικό περιεχόμενο έχει ένα θεμα??

π.χ. το ppt που έχω κάνει attach

Εσείς δηλαδή υποστηρίζετε ότι κάτι τέτοιο θα επιβαρύνει το σύστημα σωστά?
θέλω να ξέρω γιατί δεν είμαι έμπειρος σε αυτά τα θέματα

ευχαριστώ
Συνημμένα
ppt_site_example1.rar
δεύτερο παράδειγμα site
(6.07 KiB) Μεταφορτώθηκε 76 φορές

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες