Ξεκινώντας το web design…

VN:F [1.9.22_1171]
Rating: 4.5/5 (2 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
12/02/2013 από
infogeek

Σίγουρα το web design είναι κάτι πολύ ελκυστικό στο σημερινό νέο! Είναι ένας τομέας που έχει προοπτικές εξέλιξης και πάρα πολλούς τομείς. Άρα είναι δεδομένο ότι προς το παρόν δεν μπορεί να θεωρηθεί κορεσμένος.

Το πως ξεκινάς όμως να μαθαίνεις, όμως είναι πρόβλημα! Αυτή τη περίοδο, υπάρχουν πάρα πολλές ωραίες πηγές, άλλες δωρεάν άλλες όχι. Κι όλες αξίζουν αναφοράς! Με ένα γρήγορο search στο google ή ακόμα και στο wdf.gr θα βρει κανείς περισσότερες πηγές από όσες χρειάζεται.

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

Πολλοί ρωτάνε για βιβλία και πως θα ξεκινήσουν να μαθαίνουν τα απαραίτητα για web design. Άλλοι πάλι πιστεύουν, ότι το να ξέρουν html, css και javascript, ακόμη και τα βασικά τους κάνει “web developers”…

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

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

Πρέπει να ξέρουμε ότι η html είναι markup language

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

H CSS δεν θέλει μόνο εκμάθηση αλλά και οργάνωση! 

Η css (Cascading Style Sheets), είναι μία γλώσσα διακόσμησης/μορφοποίησης,  που δομείται από συγκεκριμένα αντικείμενα ή αλλιώς κατηγορίες λέξεων. Δείτε το παρακάτω παράδειγμα:

.myClass a {
position: relative;
width: 960px;
}

το myClass a λέγεται επιλογέας ή selector, ότι είναι μέσα στις αγκύλες {} λέγεται περιοχή δηλώσεων ή declaration block. Κάθε γραμμή είναι μία δήλωση ή declaration. Η πρώτη λέξη (λέξη θεωρώ ότι είναι μία συμβολοσειρά που δεν περιέχει !@#$%^&*(),.?/\|{}~*+_) κάθε γραμμής λέγεται ιδιότητα ή property, και η τιμή μετά το : αν είναι λέξη ονομάζεται keyword/λέξη κλειδί, αν είναι κάποιος αριθμός ονομάζεται τιμή ή value.

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

Αυτό που πρέπει να ξέρουμε επίσης είναι να αξιολογούμε την οργάνωση του κώδικα μας! Στην οργάνωση υπάρχει ένας απλός, παιχνιδιάρικος τρόπος να την μετρήσεις. Θεωρείς την id ότι πιάνει 100 πόντους, την κλάση 10 πόντους και το tag 1 πόντο, ενώ υπάρχει και το !important που πιάνει 1000 πόντους.

Όσους περισσότερους πόντους μαζέψεις μετρώντας τους επιλογείς σου, τόσο πιο ανοργάνωτο κώδικα έχεις. Οπότε προσπαθείς να μειώσεις τους πόντους ακριβείας με μερικές απλές τεχνικές, όπως η μετατροπή κάποιων id’s σε κλάσεις! Και μερικές πιο πολύπλοκες όπως η λογική της αντικειμενοστραφούς css!

 

Αν μάθω javascript, λύνω το πρόβλημα του δυναμικού περιεχομένου;

Αν μιλάμε για το παρόν όσο αφορά πρακτικές λύσεις, όχι! Αυτό δεν ισχύει. Σε μερικά χρόνια, θα είναι μία πραγματικότητα. Η javascript προσφέρεται σαν ελαφριά λύση. Ωστόσο, το node.js έχει πάρα πολύ μέλλον και θα είναι έγκλημα αν κάποιος το αγνοήσει!

Επιπλέον πρέπει να ξέρουμε ότι η javascript, εξελίσσεται κι αυτή μαζί με τους browsers, οπότε δεν υπάρχει βιβλίο που να το διαβάσεις και να γίνεις γκουρού. Οπότε πάλι η λύση είναι η online πηγές, και η σελίδες τεκμηρίωσης των browsers όπως η mdn της mozilla. Ωστόσο πρώτα απ’ όλα πρέπει να ξέρουμε τι χρειαζόμαστε! Κι αν είναι κάποιος καινούργιος στον προγραμματισμό. Θα ήταν έξυπνο να δουλέψει παράλληλα με κάποια γλώσσα όπως η C++ ή τη Java, γιατί έτσι θα πάρει μία ιδέα πως τρέχει από κάτω ο κώδικας  javascript.

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

 

Θέλω κάτι άλλο για να ξεκινήσω το web development;

-Σίγουρα, πάρα πολλά! Αυτή τη στιγμή πρέπει να μάθεις σίγουρα μερικά CMS, php frameworks και βιβλιοθήκες, javacript frameworks και βιβλιοθήκες,  css frameworks, photoshop, όπως και βασικές γνώσεις φυσικής και μαθηματικών, επιπέδου πρώτης (ενιαίου) λυκείου!

 








Hide ↑

Το αντικείμενο των σπουδών μου είναι η Μηχανολογία! Ασχολούμαι με τον προγραμματισμός σχεδόν από τα 14. Η πρώτες μου γλώσσες ήταν η QBasic και η Turbo Pascal. Από τα 16 και έπειτα έμαθα να δουλεύω με Visual Basic. Και με την έναρξη της φοιτητικής ζωής, ξεκίνησε η δουλειά πάνω σε C#, Java, php και javascript scripting και όλο το πακέτο του web development. Εκτός από το κερδοσκοπικό κομμάτι της δουλειάς μου ως developer . Δουλεύω πάνω σε opensource εφαρμογές και παραδείγματα κώδικα για την ενίσχυση της κοινότητας του ελληνικού development. Για περισσότερα, επισκεφτείτε το infogeek.gr!

Follow Κωνσταντίνος Τσατσαρούνος on Twitter ,

Προσθέτοντας θέματα στο MP6

21 September 2013

Όσοι δεν ξέρετε το MP6, είναι ένα plugin που αλλάζει την εμφάνιση του wordpress backend, ή αλλιώς τις σελίδες διαχείρισης περιεχομένου του! Δίνει μία πολύ[…]

Read more...

Git ή SVN, επιλογή version control

09 September 2013

Είμαι πολύ καιρό χρήστης του SVN και δεν το μετανιώνω! Ωστόσο το subversion control, είναι καλό στον έλεγχο τον αλλαγών ενός project που ξέρεις από που ξεκινάει[…]

Read more...

Κεντράροντας δυναμικά html elements μόνο με CSS!

08 June 2013

Ένα πράγμα που πρέπει να αναλογιστεί κανείς, είναι πόσες ώρες σπαταλάμε την ημέρα για να πετύχουμε ομαλή και responsive συμπεριφορά σε ότι σχεδιάζουμε.[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.