Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από Joakim » 24 Φεβ 2010 05:50

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design βήμα βήμα με την βοήθεια του Freestuff community !



Έπειτα από ένα πρόσφατο μου πόστ στο οποίο είχα ανεβάσει ένα template , ο χρήστης ALR με παρότρυνε να διαβάσω ένα βοήθημα σε αυτή την σελίδα : http://sixrevisions.com/tutorials/photo ... photoshop/

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



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


Γύρω στις 11 το βράδυ λοιπόν ξεκίνησα να διαβάζω το βοήθημα , πριν λίγη ωρίτσα το τελείωσα και είδα το αποτέλεσμα , μιας και το έκοψα από το Photoshop και το έσωσα σαν WEBSITE αν και δεν αρέσει αυτό στον φίλο Basilakis , και πραγματικά ενθουσιάστηκα!


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



Πρέπει εκ των προτέρων να τους ευχαριστήσουμε .


Live project : http://www.jliassides.host22.com/upload/ex1/


Βήμα 1ον : http://sixrevisions.com/tutorials/photo ... photoshop/ διαβάστε αυτό το βοήθημα και κάνετε ότι λέει με τις δικές σας πινελιές φυσικά.



Επόμενα βήματα έρχονται…
Συνημμένα
joakimliassidesvol1.rar
download project
(475.1 KiB) Μεταφορτώθηκε 183 φορές

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από Joakim » 24 Φεβ 2010 08:17

kita tora porosi... se ligi ora exo panepistimio... kai omos eimai akoma edo kai kano deftero design me ton idio tropo :P

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

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από dimsis » 24 Φεβ 2010 08:31

Μπα... δεν.
Το να πάρεις μια εικόνα και να την τεμαχίσεις και έπειτα να εμφανίσεις τα κομμάτια της με img src δεν είναι ιστοσελίδα. Σκέψου σε αυτό το πράμα που έκοψες τώρα πως μπορεί να μπει περιεχόμενο; Πως μπορεί να λειτουργήσει δηλαδή στην πράξη; Όταν κόβεις από σχέδιο σε xhtml κοιτάς να κόψεις όπου θα γίνει replace του κάθε στοιχείου με html ή με dynamic code. π.χ. Στο quick quote που έκοψες θα έπρεπε να ήταν μια φόρμα πάνω από ντεγκραντέ κιτρινοπό background και το send να ήταν image button... όλα τα στοιχεία δηλαδή πρέπει να κόβονται ξεχωριστά και να έχεις πάντα στο νου σου ότι θα μετατραπούν σε δυναμικά ή έστω ότι θα μπουν στατικά δεδομένα πάνω τους. Το να μετατρέψεις μια μακέτα σε σωστό δομημένο κώδικα συνήθως δεν είναι δουλειά μιας ώρας.

PSD to XHTML markup tutorials πρέπει να διαβάσεις και μη το βλέπεις καθόλου στραβά αυτό που σου έγραψε ο ALR. Και μόνο που ασχολείται δείχνει ότι θέλει να βοηθήσει.
Δες και διάβασε
http://net.tutsplus.com/videos/screenca ... -to-xhtml/
http://creativenerds.co.uk/tutorials/30 ... l-and-css/
http://dzineblog.com/2009/04/tutorials-psd-to-html.html

Άλλοι το έχουν επάγγελμα αυτή τη δουλειά και βγάζουν μεροκάματο από αυτό:
http://vandelaydesign.com/blog/design/p ... -services/
Τελευταία επεξεργασία από το μέλος dimsis την 24 Φεβ 2010 08:34, έχει επεξεργασθεί 1 φορά συνολικά.

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από Joakim » 24 Φεβ 2010 08:33

ma antitheos me afto pou ipa leo ena efxaristo ston Alr :)
tora pao uni molis ertho tha to do :)

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από ALR » 24 Φεβ 2010 10:51

Joakim έγραψε:ma antitheos me afto pou ipa leo ena efxaristo ston Alr :)
tora pao uni molis ertho tha to do :)
Ρε,

ρε!

Δεν είπαμε ότι μόνο θα το σχεδιάσεις;! Άσε το κόψιμο για μια στιγμή και επικεντρώσου στη δημιουργία της μακέτας.

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

Παρακαλώ για τις ευχαριστίες σου, όντως ήθελα και θέλω να σε βοηθήσω ( δεν ξέρω γιατί :P ) και όπως βλέπεις αυτό που έκανες είναι 7 χρόνια μπροστά από την πρώτη σου προσπάθεια. Αν κάνεις ακόμη 3-4 tutorials, το πρώτο πράγμα που θα διαπιστώσεις είναι η στοίχιση.
Κάτσε, μελέτησε τις αποστάσεις των στοιχείων μεταξύ τους, το που βρίσκονται κάθετα και που οριζόντια και μετά δες την χρήση των χρωμάτων.

Κάτσε δες τι λάθη έκανες, ακόμη κι αν τα έκανες επίτηδες.

1. Άλλαξες το frame color της φωτογραφίας και της φόρμας επικοινωνίας, από άσπρο σε ντεγραντέ.
Το άσπρο έδινε έμφαση στα 2 κεντρικά/κύρια σημεία της ιστοσελίδας που μόλις σχεδίασες. Μπήκε εκεί για να κάνει stand out αυτά τα 2 στοιχεία από το εσωτερικό σκούρο χρώμα και κακώς το έβγαλες.

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

3. Τα κάτω κουτάκια, επειδή έκανες μικρότερη σε πλάτος την επιφάνεια, αναγκάστηκες να μικρύνεις και το δικό τους πλάτος και "στούμπωσες" το περιεχόμενο μέσα τους. Αν δεις την σελίδα που αντέγραψες, υπάρχει μια συγκεκριμένη απόσταση καθ' ύψος και πλάτος του κειμένου μέσα στο κουτί η οποία και πάλι ( κλασικά ) βοηθά το περιεχόμενο να είναι πιο ευανάγνωστο.

Αν το κάνεις για χόμπυ, πραγματικά δεν χρειάζεται να διαβάσεις τίποτα άλλο παρά μόνο τα links που σου έδωσε ο dimsis πιο πάνω για να προχωρήσεις στο xhtml & css.

Να θυμάσαι ότι το μεγαλύτερο μέρος του web design είναι οι σωστές αποστάσεις, τα σωστά χρώματα, η σωστή στοίχιση και η σωστή τυπογραφία ( χρήση Fonts ).
Γίνονται πραγματάκια

Άβαταρ μέλους
telas
Honorary Member
Δημοσιεύσεις: 1594
Εγγραφή: 12 Μαρ 2004 12:54
Τοποθεσία: Kastoria
Επικοινωνία:

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από telas » 24 Φεβ 2010 12:13

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

Είσαι σε καλό δρόμο.
Web Design - Δημιουργία Ιστοσελίδας - http://www.computerman.gr/
My Photography - http://www.tilaveridis.com/
Τεχνολογικά προιόντα - http://www.bigbox.gr/

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από manolism » 24 Φεβ 2010 14:29

Μια δική μου προσφορά προς τους νέους που θέλουν να μάθουν κάτι παραπάνω.

Πήρα το παραπάνω template και το έκανα slicing και στήσιμο με css.

ΕΔΩ μπορείτε να δείτε το αποτέλεσμα

Επισυνάπτω όλα τα απαραίτητα αρχεία προς μελέτη. Μόνο 67ΚΒ

Εννοείται ότι δεν μπορείτε να χρησιμοποιήσετε το έτοιμο template χωρίς την άδεια του δημιουργού Waheed Akhtar. Τον δικό μου κώδικα μπορείτε να τον τσακίσετε. :D
Συνημμένα
clean-professional-weblayout.rar
(67.06 KiB) Μεταφορτώθηκε 187 φορές

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

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από dimsis » 24 Φεβ 2010 14:33

Καθαρότατο και όπως πρέπει να είναι για να αρχίσει να μπαίνει περιεχόμενο. Μπράβο Μανώλη.

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από Joakim » 24 Φεβ 2010 15:02

ok ok katalava :) to perno apo tin arxi, entometa3i pedia to ekopsa, oxi gia na sas di3o pos 3ero na kovo oute giati einai afto sosto , apla gia na to valo san live link gia na mpori na to di o kathenas:) epanerxome se ligi ora... entometa3i giati den ime kalos stin antigrafi file ALR mporo na kano me tis idies parametrous kati diko mou se design? i na minoume se afto?

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από Joakim » 24 Φεβ 2010 17:50

ok etimo! akrivos to idio :)
Συνημμένα
joakimliassidesvol2.rar
(383.54 KiB) Μεταφορτώθηκε 174 φορές

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από ALR » 24 Φεβ 2010 21:04

Joakim έγραψε:ok ok katalava :) to perno apo tin arxi, entometa3i pedia to ekopsa, oxi gia na sas di3o pos 3ero na kovo oute giati einai afto sosto , apla gia na to valo san live link gia na mpori na to di o kathenas:) epanerxome se ligi ora... entometa3i giati den ime kalos stin antigrafi file ALR mporo na kano me tis idies parametrous kati diko mou se design? i na minoume se afto?

Για να μάθεις με αυτό τον τρόπο που πας να μάθεις, πρέπει να γίνεις εξπερτ στην αντιγραφή και πρέπει σιγά σιγά να κατανοήσεις γιατί κάνεις ότι κάνεις.

Πολύ καλύτερα ή μακέτα :)

Είσαι και τυχερός, ο Μανώλης πιο πάνω σου έχει δώσει έτοιμη τροφή στη συγκεκριμένη μακέτα. Το επόμενο βήμα σου είναι να μελετήσεις τον κώδικα που έχει γράψει και να τον αντιγράψεις σειρά προς σειρά σε δικό σου έγγραφο. Κάνοντας το σιγά σιγά θα καταλάβεις περισσότερα με το τι παίζει με τη στοίχιση, το box model και γιατί πάει το καθένα στοιχείο εκεί που πάει και τι γίνεται όταν προσθέτεις CSS.

Ξεκίνα πρώτα από το xhtml και σταμάτα που και που να δεις τι έχεις κάνει. Μόλις τελειώσεις το xhtml αρχείο, κάνε και το css και σταδιακά, πήγαινε στο browser να δει τι αλλάζει και τι κάνει το κάθε τι.

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

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από Joakim » 24 Φεβ 2010 21:21

ok as doume lipon :) tha 3ekiniso tora

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27626
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από cordis » 24 Φεβ 2010 22:43

καλά το πας.. όταν κάνεις κάτι πρωτότυπο που μπορούν να το χρησιμοποιήσουν και άλλοι τότε το βάζεις στο "Templates" :)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από Joakim » 24 Φεβ 2010 23:33

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
pedia afto ti einai? to vazoume panta stathero?

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

Για να δούμε τώρα..αυτό ενδιαφέρει τους νέους στο Web design

Δημοσίευση από dimsis » 24 Φεβ 2010 23:38

http://www.w3.org/QA/2002/04/valid-dtd-list.html

στην html 5 θα αλλάξει και αυτό... ένα σκέτο <!DOCTYPE html> θα είναι αρκετό.
Προς το παρών απέφυγε τα strict γιατί δύσκολα θα περνάς validation όσο είναι αρχή.

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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