Οι web developers πρέπει συνεχώς να ενημερώνονται για τις νέες τεχνολογίες στον προγραμματισμό και να εξελίσουν τις τεχνικές τους. Θα σου παρουσιάσουμε 7 τεχνικές που πρέπει να γνωρίζεις ώστε να μένεις ενημερωμένος για τη βέλτιστη δημιουργία ιστοσελίδων που πιθανόν δε γνωρίζεις ή δεν έχεις βελτιώσεις αρκετά.
1.CSS3 media queries
Η εμφάνιση των φορητών συσκευών (smart phones, pad) από τη μία και η ποικιλία μεγεθών σε οθόνες από την άλλη, έκαναν την σωστή παρουσίαση μιας ιστοσελίδας δύσκολη υπόθεση για τους web developers. Ευτυχώς με τα CSS3 media queries οι προγραμματιστές μπορούν πλέον να προσαρμόζουν ένα website ώστε να εμφανίζεται σωστά σε ένα smart phone ή σε μια οθόνη μεγαλύτερης ανάλυσης. Στον παρακάτω κώδικα φαίνεται πως μπορούμε να διαμορφώσουμε το στυλ ενός site σε ανάλυση οθόνης μικρότερης των 767 pixels.
@media screen and (max-width:767px){
#container{
width:320px;
}
header h1#logo a{
width:320px;
height:44px;
background:url(image-small.jpg) no-repeat 0 0;
2. Διαμόρφωση γραμματοσειρών με REMs
Μία νέα μονάδα μέτρησης παρουσιάστηκε με το CSS3 και είναι η παράμετρος REM(=Root em). Μέχρι τώρα υπήρχε η παράμετρος em η οποία σχετιζόταν με το μέγεθος γραμματοσειράς που ιυοθετούσε από κάποιο γονικό στοιχείο. Η παράμετρος rem πλέον συνδέεται με τον html tag επιτρέποντας να ορίσουμε ένα συγκεκριμένο μέγεθος γραμματοσειράς για το html tag και κατόπιν να καθορίσουμε όλες τις rem παραμέτρους ως ποσοστά του αρχικού μεγέθους και όχι του γονικού στοιχείου.
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
3. Χρήση της μνήμης Cache για χρήση εκτός Internet
Στην HTML5 υπάρχει το offline caching, που επιτρέπει στο πρόγραμμα περιήγησης να «αποθηκεύει» κάποιες σελίδες και να επιτρέπει αργότερα στον επισκέπτη ενός site να τις δει, ακόμη κι αν δεν είναι συνδεδεμένος στο internet.
Η διαδικασία που ακολουθούμε είναι πολύ εύκολη. Αρχικά πρέπει να προσθέσουμε στο αρχείο .htaccess τα παρακάτω:
AddType text/cache-manifest .manifest
Στη συνέχεια δημιουργούμε ένα αρχείο με το όνομα offline.manifest με τα ακόλουθα:
CACHE MANIFEST
CACHE
index.html
style.css
image.jpg
Τέλος, συνδέουμε το αρχείο .manifest με το html αρχείο.
html manifest="/offline.manifest
Η σελίδα πλέον είναι ικανή να αποθηκευτεί στη μνήμη cache και να τη βλέπει ο επισκέπτης του site offline.
4. JavaScript server
Από τα μέσα της δεκαετίας του ’90 η Javascript υπήρξε πολύ δημοφιλής client side γλώσσα στους προγραμματιστές. Σήμερα όμως γίνεται όλο και πιο δημοφιλής η server side javascript λόγω του ότι αναπτύσσονται πολύ ισχυρές βιβλιοθήκες Javascript για server side εφαρμογή πχ Jaxer, Node.js και Narwal (Javascript environments).
Ο παρακάτω κώδικας δείχνει πως μπορούμε να δημιουργήσουμε ένα απλό μήνυμα “Hello World” χρησιμοποιώντας Node.js.
var sys = require("sys");
sys.puts("Hello World!"); <
5. HTML5 drag & drop
Με την HTML5 το internet απόκτησε άλλη διάσταση στο προγραμματισμό και δόθηκε η δυνατότητα για δημιουργία σελίδων πιο φιλικών στο χρήστη. Νέες τεχνολογίες είναι πλέον στη διάθεση του web developer, όπως η επιλογή “drag & drop” που είναι αρκετά εύχρηστη και λειτουργική, ειδικά σε περιπτώσεις ενός e-shop όπου δίνεται η δυνατότητα προσθήκης προϊόντων στο καλάθι αγορών απλά «σύροντας» τα προϊόντα στο καλάθι.
Για να μπορέσουμε να «σύρουμε» ένα στοιχείο πρέπει να προσθέσουμε την παράμετρο draggable="true" όπως φαίνεται παρακάτω:
<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
</div>
Φυσικά αφού κάνουμε το στοιχείο draggable, πρέπει να χρησιμοποιήσουμε λίγη javascript για να ελέγξουμε τι θα κάνει αυτό το στοιχείο, που ξεφεύγει από το σκοπό αυτού του άρθρου.
Συμβουλή : Για να αποτρέψουμε τα περιεχόμενα των «draggable» στοιχείων να επιλεγούν χρησιμοποιούμε τους ακόλουθους CSS κανόνες:
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
6. Φόρμες επικοινωνίας HTML5
Στην HTML5 εισάγονται πολλά νέα στοιχεία και ένα από αυτά είναι στις φόρμες (form element) που επιτρέπουν να προσθέτουμε επιλογές ημερομηνίας ή αριθμών καθώς και να κάνουμε πιο εύκολη την επιβεβαίωση διευθύνσεων ηλεκτρονικού ταχυδρομείου χρησιμοποιόντας regular expressions.
Στον ακόλουθο κώδικα, που είναι αρκετά εμφανής, εμφανίζονται πολλά νέα χαρακτηριστικά για τις φόρμες με χρήση τη HTML5.
<form>
<label for="range-slider"> Slider </label>
<input class="slider" id="range-slider" max="20" min="0" name="range-slider" step="1" type="range" value="0" />
<label for="numeric-spinner"> Numeric spinner /<label>
<input id="numeric-spinner" name="numeric-spinner" type="number" value="2" />
<label for="date-picker">Date picker</label> <input id="date-picker" name="date-picker" type="date" value="2010-10-06" /> <label for="color-picker">Color picker</label>
<input id="color-picker" name="color-picker" type="color" value="ff0000" />
<label for="text-field"> Text field with placeholder</label>
<input id="text-field" name="text-field" placeholder="Insert your text here" type="text" />
<label for="url-field">Url field</label>
<input id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required="" type="url" />
<label for="email-field">Email field</label
<input id="email-field" name="email-field" placeholder="contact@ghinda.net" required="" type="email" />
<button aria-disabled="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" type="submit">
</form>
7. CSS animations
Οι περισσότεροι σύγχρονοι φυλλομετρητές (browsers) υποστηρίζουν CSS animations (εφέ). Πρακτικά πλέον, μπορούμε να δημιουργούμε διάφορα εφέ χωρίς τη χρήση της γλώσσας Javascript.
Στο ακόλουθο παράδειγμα φαίνεται πως μπορούμε να τροποποιήσουμε το χρώμα του φόντου στο οποίο έχουν χρησιμοποιηθεί -moz-keyframes
#logo {
margin: 15px 15px 0 15px;
background: red;
float: left;
/* Firefox 4+ */
-moz-animation-name: colour-change;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;
/* Webkit */
-webkit-animation-name: colour-change;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
}
@-moz-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
Όλα τα παραπάνω είναι ενδεικτικά εργαλεία και κυρίως τομείς που πρέπει κάθε σοβαρός web developer ή freelancer να γνωρίζει να και συμπεριλαμβάνει στη «δημιουργία του». Συνδυάζοντας τα παραπάνω χωρίς υπερβολικές τάσεις το απότέλεσμα εμφανίζεται τουλάχιστον επαγγελματικό στο πελάτη και μία ευχάριστη εμπειρία στον επισκέπτη της σελίδας σας!
