Εργασία Html [2010-2011]

Διδάσκοντες: Α. Καράκος, Αν. Καθηγητής

Εργασία Html [2010-2011]

Δημοσίευσηαπό pantevst » 13 Ιαν 2011, 23:15

Ηθελα αν ξέρει κάποιος να βοηθήσει με ενα ερώτημα απο την εργασία για το μάθημα....Ζητάει τη:
Δημιουργία ενός Image Gallery με δυνατότητα zoom πάνω στις εικόνες (πχ lightbox) και slide show με 5-10 εικόνες δικής σας επιλογής αλλά ενός συγκεκριμένου θέματος π.χ. λιμανιών ή ποταμών ή εκκλησιών ή οτιδήποτε άλλο επιλέξετε
9. Αποστολή των εικόνων με e-mail (e-card). Η αποστολή να γίνεται με τη βοήθεια μιας φόρμας που θα δημιουργήσετε και η οποία θα περιέχει τρία πεδία: Τον ορισμό του παραλήπτη, το θέμα του μηνύματος (subject) και το κείμενο του μηνύματος (body). Η αποστολή της φόρμας να γίνει με τη βοήθεια της "mailto:". Στο e-mail δεν θα περιέχεται η ίδια η εικόνα αλλά ένας σύνδεσμος που θα οδηγεί σε αυτήν.
Τελευταία επεξεργασία από megatron και 14 Ιαν 2011, 00:22, έχει επεξεργασθεί 1 φορά/ες συνολικά
Αιτία: Προσθήκη ακαδημαϊκού έτους στον τίτλο
pantevst
Newbie
 
Δημοσιεύσεις: 30
Εγγραφή: 30 Δεκ 2008, 18:52

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό Stokos » 14 Ιαν 2011, 01:07

1. Κατεβάζεις αυτό το scriptάκι: http://dolem.com/lytebox/lytebox_v3.22.zip και το ανεβάζεις στο server σου.

2. Στο <head> της σελίδας προσθέτεις:

Κώδικας: Επιλογή όλων
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

3. Ανεβάζεις τις εικόνες στη σελίδα σου (με το γνωστό τρόπο)

4. Πας στον html κώδικα εκεί που είναι τα href των εικόνων σου, π.χ.

Κώδικας: Επιλογή όλων
<a href="images/image-1.jpg"</a>

και προσθέτεις:
Κώδικας: Επιλογή όλων
rel="lyteshow[album_title]" title="Pic_Title">Pic_Title

δηλαδή τελικά:
Κώδικας: Επιλογή όλων
<a href="images/image-1.jpg" rel="lyteshow[album_title]" title="Pic_Title">Pic_Title</a>


Τώρα για το δεύτερο ερώτημα, νομίζω ότι είναι σχετικά απλό. Ψάξε στο internet, υπάρχει άπειρη βιβλιογραφία. (http://email.about.com/od/mailtoemailli ... ements.htm)
Stokos
 

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό antipasti » 14 Ιαν 2011, 18:31

Βασικά αν μπορεί να υπάρξει λίγη περαιτερω βοηθεια στο τελευταίο ερώτημα γιατί πρακτικά εκεί είναι το αγγούρι: θέλει να βγάζει φόρμα που να έχει wysiyg editor για το comment, και να στελνει link μιας εικόνας του gallery και το comment σε καποιο mail.

αντιγράφω από την εκφώνηση:
Αποστολή των εικόνων με e-mail (e-card). Η αποστολή να γίνεται με τη βοήθεια μιας φόρμας που θα δημιουργήσετε και η οποία θα περιέχει τρία πεδία: Τον ορισμό του παραλήπτη, το θέμα του μηνύματος (subject) και το κείμενο του μηνύματος (body). Η αποστολή της φόρμας να γίνει με τη βοήθεια της "mailto:". Στο e-mail δεν θα περιέχεται η ίδια η εικόνα αλλά ένας σύνδεσμος που θα οδηγεί σε αυτήν. Επίσης, να υπάρχει η δυνατότητα μορφοποίησης του κειμένου του του μηνύματος με τη χρήση ενός wysiwyg editor
I'm not a complete idiot. Several parts are missing.
Άβαταρ μέλους
antipasti
Jr. Member
 
Δημοσιεύσεις: 58
Εγγραφή: 15 Φεβ 2009, 10:18
Τοποθεσία: χαμενος στο διαστημα

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό James » 14 Ιαν 2011, 21:05

Από τη στιγμή που ζητείται η αποστολή να γίνεται με χρήση της mailto αυτό θα γίνει αναγκαστικά με javascript.

Κώδικας: Επιλογή όλων
<a href="mailto:[email protected]?subject=...&body=email-body" />

Javascript Editors υπάρχουν γενικά πάρα πολλοί, παράδειγμα ο TinyMCE.
Το πρόβλημα είναι πώς ακριβώς θα φτιαχτεί το "email-body".
Στο ιδανικό σενάριο θα προκύπτει από μια συνένωση των περιεχομένων του editor και του link της εικόνας.
Ένα πολύ χοντρικό παράδειγμα:

Κώδικας: Επιλογή όλων
function getBody() {
return document.getElementById("content").innerHTML + getImageUrl();
}

Υπέθεσα ότι στο DOM "content" βρίσκεται ο editor (βλέπε εδώ παράδειγμα).
Η getImageUrl() επιστρέφει το URL της εικόνας και ίσως είναι διαθέσιμη στο scriptάκι που θα χρησιμοποιηθεί για το album.
Με λίγα λόγια κάτι σαν την παραπάνω συνάρτηση δημιουργεί το body του email.

Κώδικας: Επιλογή όλων
function getMailLink() {
return "mailto:" + document.getElementById("email").innerHTML + "?subject=" + "String tou subject" + "&body=" + getBody();
}

Η παραπάνω συνάρτηση επιστρέφει (θεωρητικά πάντα, δεν έχω δοκιμάσει απολύτως τίποτα) το πλήρες link για αποστολή email.
Το button που θα στέλνει το email θα παράγει το URL με χρήση της getMailLink και έπειτα θα κάνει navigate(getEmailLink()).
(Μόνο) James
Άβαταρ μέλους
James
Διαχειριστής
 
Δημοσιεύσεις: 1740
Εγγραφή: 08 Ιαν 2008, 22:29
Φοιτητής ΗΜΜΥ: Όχι

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό kkalop » 14 Ιαν 2011, 22:33

James έγραψε:Από τη στιγμή που ζητείται η αποστολή να γίνεται με χρήση της mailto αυτό θα γίνει αναγκαστικά με javascript.


Ήμουν σίγουρος πως θα απαντούσες αλλά με ξάφνιασε το "javascript" .... :P πίστευα ότι θα την πήγαινες σε "jquery" τη λύση ;D
Άβαταρ μέλους
kkalop
Sr. Member
 
Δημοσιεύσεις: 475
Εγγραφή: 10 Ιαν 2008, 17:48
Τοποθεσία: Λαμία
Φοιτητής ΗΜΜΥ: Όχι

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό antipasti » 16 Ιαν 2011, 21:44

Ισως να είναι αφελης ερώτηση, αλλά με ποιό τρόπο μπορώ στο παραπάνω παράδειγμα αντι για default διευθυνση [[email protected]] και θέμα να έχω input από το χρήστη με κάποιο field για το ποια θα είναι αυτά?
I'm not a complete idiot. Several parts are missing.
Άβαταρ μέλους
antipasti
Jr. Member
 
Δημοσιεύσεις: 58
Εγγραφή: 15 Φεβ 2009, 10:18
Τοποθεσία: χαμενος στο διαστημα

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό James » 17 Ιαν 2011, 02:12

antipasti έγραψε:Ισως να είναι αφελης ερώτηση, αλλά με ποιό τρόπο μπορώ στο παραπάνω παράδειγμα αντι για default διευθυνση [[email protected]] και θέμα να έχω input από το χρήστη με κάποιο field για το ποια θα είναι αυτά?

Με document.getElementById("email").innerHTML (διατηρώ κάποιες επιφυλάξεις, ίσως είναι και document.getElementById("email").value) αν υποθέσουμε ότι το DOM αντικείμενο που περιέχει (ή που θα περιέχει) τη διεύθυνση έχει id="email" (με λίγα λόγια το textfield στο οποίο θα γράψει ο χρήστης τη διεύθυνση να έχει id="email"). Υπάρχουν πολλά παραδείγματα στο internet σχετικά με την document.getElementById.

Επίσης να διευκρινίσω ότι συνήθως η παραπάνω διαδικασία γίνεται με POST request με action="mailto:..." όπως περιγράφεται εδώ. Καλούμαστε όμως να αντιμετωπίσουμε δύο προβλήματα. Το ένα είναι η στατικότητα του πεδίου της διεύθυνσης για την οποία προορίζεται το email (όπως θα παρατηρήσεις δεν εμπεριέχεται στο POST request, καθιστώντας έτσι την αλλαγή του αδύνατη με συμβατικές μεθόδους απλής html) και το άλλο είναι το πεδίο του body/περιεχομένου. Για το τελευταίο η εργασία δηλώνει ρητά ότι μέσα στο body θα πρέπει να περιέχεται και σύνδεσμος προς την εικόνα, πράγμα που πάλι είναι αδύνατο με συμβατική html εκτός κι αν 1) "αναγκάσεις" το χρήστη να γράψει το URL στα comments 2) μόλις ανοίγει η σελίδα το URL της εικόνας να βρίσκεται ήδη γραμμένο στα comments ευελπιστώντας ότι ο χρήστης δεν θα το σβήσει. Για τους παραπάνω λόγους πρότεινα εξ' αρχής καθαρή javascript και όχι ένα απλό POST request.
(Μόνο) James
Άβαταρ μέλους
James
Διαχειριστής
 
Δημοσιεύσεις: 1740
Εγγραφή: 08 Ιαν 2008, 22:29
Φοιτητής ΗΜΜΥ: Όχι

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό antipasti » 19 Ιαν 2011, 21:07

Χμμμ ή κάνω κάτι λάθος ή ζητάμε κάτι σχετικά ανέφικτο με html/javascript. Ακολούθησα τις παραπάνω οδηγίες αλλά το πρόβλημα είναι ότι σε κάθε περίπτωση με το που κάνω κλικ στο πεδίο που βάζω address ενεργοποιείται κατευθείαν το email client [με επιλεγμένο το πεδίο του παραλήπτη] τη στιγμή που αυτό που θέλω είναι να συμπληρώνω πρώτα τα πεδία και στη συνέχεια ΑΦΟΥ πατήσω το κουμπί με το navigate() να ανοίγει το client (με συμπληρωμένα προφανώς διεύθυνση θέμα και body).

Any ideas? ???
I'm not a complete idiot. Several parts are missing.
Άβαταρ μέλους
antipasti
Jr. Member
 
Δημοσιεύσεις: 58
Εγγραφή: 15 Φεβ 2009, 10:18
Τοποθεσία: χαμενος στο διαστημα

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό pantevst » 19 Ιαν 2011, 21:23

email<input type="text" id="mTo" /><br />

Subject: <input type="text" id="mSubject" /><br />


<script type="text/javascript" src="Untitled-1.js"></script>
<script type="text/javascript">

//<![CDATA[

bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });

//]]>

</script>
main body<textarea id="mBody" cols="45" rows="10"></textarea><br />

<input type="button" value="Send" onclick="document.location.href='mailto:'+document.getElementById('mTo').value+'?subject='+document.getElementById('mSubject').value+'&amp;body='+document.getElementById('mBody').value" />



Αυτο μπορει να κανει σχεδόν αυτο που ζηταει η άσκηση.....Το πρόβλημα μου είναι ότι δεν μπορω να στείλω το περιεχόμενο του κειμένου....και αυτο οφείλεται στο wysiwyg.....αν το σβήσω απο των κώδικα μου δουλευει η φόρμα μια χαρα......Αν καποιοσ βρει το λάθος ας το πει......
pantevst
Newbie
 
Δημοσιεύσεις: 30
Εγγραφή: 30 Δεκ 2008, 18:52

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό pantevst » 20 Ιαν 2011, 21:52

Γνωρίζει κανείς πως θα ανεβάσουμε την εργασία στον server??? To filezilla δεν δουλευει....
pantevst
Newbie
 
Δημοσιεύσεις: 30
Εγγραφή: 30 Δεκ 2008, 18:52

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό paripapa » 20 Ιαν 2011, 21:56

με το puTTY.
paripapa
Newbie
 
Δημοσιεύσεις: 6
Εγγραφή: 28 Νοέμ 2009, 01:41

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό pantevst » 20 Ιαν 2011, 22:02

Πως είναι η διαδικασία με αυτο.......Να κανω login ξέρω.....Πως ανεβάζεις με αυτο???
pantevst
Newbie
 
Δημοσιεύσεις: 30
Εγγραφή: 30 Δεκ 2008, 18:52

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό megatron » 20 Ιαν 2011, 23:22

Για το Putty αν θες, κοίτα εδώ-->Home page και το άρθρο της Wikipedia (που πιστεύω ότι λογικά θα έχεις ήδη κοιτάξει...)

Επίσης, όποιος χρησιμοποιεί τον firefox, προτείνω ένα πολύ καλό addon, το FireFTP που πιστεύω ότι είναι πολύ βολικό και εύχρηστο...

Ελπίζω να βοήθησα κάπως.... :)
Άβαταρ μέλους
megatron
Hero Member
 
Δημοσιεύσεις: 979
Εγγραφή: 08 Απρ 2008, 17:46
Φοιτητής ΗΜΜΥ: Όχι

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό stelmitr » 21 Ιαν 2011, 13:24

Όταν δημιούργησα τη φόρμα και πάτησα το κουμπί για να σταλθεί το μήνυμα άνοιξε απευθείας το outlook....γιατί συμβαίνει αυτο???τι κάνω λάθος???
stelmitr
Newbie
 
Δημοσιεύσεις: 11
Εγγραφή: 30 Οκτ 2009, 16:12

Re: Εργασία Html [2010-2011]

Δημοσίευσηαπό Serendipity » 21 Ιαν 2011, 14:07

pantevst έγραψε:Γνωρίζει κανείς πως θα ανεβάσουμε την εργασία στον server??? To filezilla δεν δουλευει....


Με το FlashFXP. Το έχουν ανεβάσει και στον server.
Serendipity
Newbie
 
Δημοσιεύσεις: 14
Εγγραφή: 18 Ιουν 2009, 16:45

Επόμενο

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

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