Κατασκευή ιστοσελίδων Κατασκευή ιστοσελίδων
Κατασκευάζουμε ιστοσελίδες. Όχι από αυτές που κυκλοφορούν , αλλά από τις άλλες τις καλές ......
More detail
Διαφήμιση Google Adwords Διαφήμιση Google Adwords
Την φτιάξατε την ιστοσελίδα. Αρκεί να μπαίνετε μόνο εσείς ; Πως θα την δουν οι υπόλοιποι; ...
More detail
Φιλοξενία ιστοσελίδων Φιλοξενία ιστοσελίδων
Υπερσύχρονοι servers , σε Ευρωπαϊκά και Ελληνικά datacenters με 99.95% uptime και κα...
More detail

Οι Αρχές του Gestalt –Εφαρμογή στο web design

gestalt illustration-01

Το Gestalt είναι όρος της ψυχολογίας που σημαίνει “ενοποιημένο σύνολο”. Οι θεωρίες αναπτύχθηκαν στη δεκαετία του 1920 και περιγράφουν τον τρόπο με τον οποίο το ανθρώπινο μάτι αντιλαμβάνεται μια εικόνα. Αρχικά ο ανθρώπινος νους βλέπει την εικόνα στο σύνολό της και στην συνέχεια μπορεί και παρατηρεί τις μεμονωμένες λεπτομέρειες οι οποίες απεικονίζονται.

Τα βασικά φαινόμενα που έχουν παρατηρηθεί στα συστήματα Gestalt είναι

  • Emergence
  • Reification
  • Multistability
  • Invariance

Δυστυχώς ή όποια Ελληνική μετάφραση των παραπάνω όρων θα ήταν ατυχής.

Οι Αρχές Gestalt μπορούν να μας βοηθήσουν στο να κατασκευάσουμε μια ιστοσελίδα με τέτοιο τρόπο ώστε ο χρήστης να μπορεί να βρει την πληροφορία που χρειάζεται γρήγορα και άμεσα. Ακόμα μας βοηθούν να οργανώσουμε την δομή και την εμφάνιση της ιστοσελίδας ώστε ο υποψήφιος πελάτης-επισκέπτης να καταλάβει το περιεχόμενο της ιστοσελίδας και να αντιληφθεί το αντικείμενο των υπηρεσιών που προσφέρει η επιχείρηση με την πρώτη ματιά.

Δείτε για παράδειγμα την παρακάτω εικόνα

1

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

Στο παρακάτω παράδειγμα θα δούμε την αρχή της εγγύτητας. (Proximity )

2

3

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

Έτσι λοιπόν μέσα από τις Αρχές Gestalt μπορούμε να σχεδιάσουμε την ιστοσελίδα με τέτοιο τρόπο ώστε να είναι πιο φιλική στον χρήστη και να βρει την πληροφορία που ψάχνει εύκολα και γρήγορα. Ακoλουθώντας και βασικούς κανόνες Web design μπορούμε να οδηγήσουμε το μάτι του χρήστη στα σημεία που θέλουμε όπως πχ σε Call to Action κλπ

Υπάρχουν πολλές αναφορές για την σχέση Gestalt – Webdesign που θα βρείτε στο Ιντερνέτ και θεωρούνται βασικά στοιχεία για την βελτιστοποίηση της εμπειρίας χρήστη κατά την επίσκεψη.


Δουλέυοντας με το Bootstrap

bootstrap

Τι είναι το bootstrap;


Τo bottstrap είναι ένα web design framework το οποίο και δημιούργησαν οι τυπάδες από το twitter.

Tο framework αυτο  σας επιτρέπει να δημιουργήσετε γρήγορα την  web εφαρμογή σας χωρίς να χρειάζεται να ανησυχείτε για το σχεδιασμό του ( το Bootstrap είναι δωρεάν ) ειδικά στο στάδιο της ανάπτυξης του site σας . Το framework περιλαμβάνει εκατοντάδες στοιχεία που μπορείτε να χρησιμοποιήσετε στην σελίδα σας , τα οποία και ως επί το πλείστον είναι responsive , περιλαμβάνοντας  grid system, buttons, forms, panels, navigation bars και πολλά πολλά ακόμα.

Ποιος θα έπρεπε να χρησιμοποιεί το bootstrap;


Λόγω της ευκολίας του ο καθένας μπορεί αν χρησιμοποιήσει το bootstrap! Με μια απλή εισαγωγή στον κώδικα σας του css και js αρχείου , ,μπορείτε να χρησιμοποιήσετε όλα τα αρχεία του bootstrap εύκολα.

Γιατί να χρησιμοποιήσω bootstrap;


Εδώ έχουμε 3 βασικούς λόγους:

1/  είναι δωρεάν!

2/ Περιλαμβάνει πάρα πολλά αίτημα στοιχεία αίτημα να μπουν στην ιστοσελίδα σας

3/ Είναι πολύ εύκολο στην χρήση

Πως χρησιμοποιώ το bootstrap;


Εϊναι απλό. Στο <head>  της σελίδας σας θα πρέπει να εισάγετε τα εξής

boot1

boot2

 

 

 


Πως να χρησιμοποιείτε σωστά μεγάλες εικόνες (hero images)

hero image

Όλο και περισσότερες ιστοσελίδες χρησιμοποιούν μεγάλες φωτογραφίες ή όπως ονομάζονται στην ορολογία του webdesign Hero Images. Τις βλέπουμε συχνά να χρησιμοποιούνται ως header ή ως background ενός div δηλώνοντας σημαντικά χαρακτηριστικά που πρέπει ένας χρήστης να προσέξει σε μια ιστοσελίδα.

Τι πρέπει να προσέχουμε όμως ώστε να χρησιμοποιούμε σωστά τα Hero Images σε μια ιστοσελίδα;

1. Think responsive!

2. Να μην αποσπά την προσοχή του χρήστη σε βαθμό που να μην μπορεί να διακρίνει το μήνυμα ή το link που προβάλουμε.

3. Ανάλυση εικόνας κατάλληλη για μικρές και μεγάλες οθόνες.

4. Μέγεθος εικόνας. Σε καμία περίπτωση δεν πρέπει να καθυστερεί το loading της ιστοσελίδας.

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

6. Χρώμα γραμματοσειράς. Χρησιμοποιήστε το κατάλληλο χρώμα στο κείμενό σας ώστε να μην χάνεται στην εικόνα.

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


CSS 3 transition

header mp css3-e1320821129923

Xρησιμοποιώντας τεχνικές CSS3 μπορούμε να δημιουργήσουμε animations κάνοντας mouseover πάνω σε ένα στοιχείο χωρίς την χρήση javascript.


Έστω ότι θέλουμε να κάνουμε ένα div να αλλάζει χρώμα κάθε φορά που κάνουμε mouseover (hover) με animation ease-out.

O css κώδικας που θα χρησιμοποιήσουμε είναι ο εξής

div {

width: 150px;

height: 150px;

background-color: red;

-webkit-transition: background-color 2s ease-out;

-moz-transition: background-color 2s ease-out;

-o-transition: background-color 2s ease-out;

transition: background-color 2s ease-out;

}

div:hover {

   background-color: green;

}

Εδώ χρησιμοποιούμε τη ιδιότητα transition που μας επιτρέπει να αλλάξουμε την τιμή ενός στοιχείου σε ένα ορισμένο διάστημα. Στο παραπάνω παράδειγμα ζητάμε να αλλάζει το background-color του div από κόκκινο σε πράσινο χρώμα , σε 2 δευτερόλεπτα και με animation ease-out όταν ο χρήστης κάνει hover στο div.

Έτσι μπορούμε να δημιουργήσουμε ένα animation χρησιμοποιώντας την ιδιότητα transition και να αλλάξουμε στοιχεία όπως χρώμα, ύψος μήκος, πλάτος, margin, padding κτλ.

.example {

   transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

}

 

Εδώ θα βρείτε παραδείγματα και έτοιμο κώδικα για την σελίδα σας!

https://css-tricks.com/almanac/properties/t/transition/https://css-tricks.com/almanac/properties/t/transition/

 


 

Σημείωση: για να υποστηρίζεται από όλους τους browser πρέπει να χρησιμοποιούμε μπροστά από την ιδιότητα transition τα αντίστοιχα CSS3 prefixes όπου:

-moz- για Mozilla Firefox και όποιοι άλλοι browsers χρησιμοποιούν Mozilla μηχανή

-webkit- για Safari, Chrome και όποιοι άλλοι browsers χρησιμοποιούν Webkit μηχανή

-o- για Opera

-ms- για Internet Explorer (ΙΕ9)


Απευθείας κλήση τηλεφώνου σε ιστοσελίδα , όταν την βλέπεις από κινητό τηλέφωνο

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

Η λύση είναι απλή:


Βάζοντας απλά τo "tel:" σε ένα "a" tag
Συγκεκριμένα γράφουμε το εξής:

<a href="tel:+13174562564">317-

456-2564</a>

όπου στο tel: βάζουμε τον αριθμό που θέλουμε να καλεί ο χρήστης.

 

 

 

Μερικά παραδείγματα:


<a href="tel:+13174562564">317-456-2564</a>

<a href="tel:+13174562564">Κάλεσε τώρα</a>


Ιστοσελίδες για ΑΜΕΑ με πρότυπο WCAG 2.0

accesibilityΌλοι οι άνθρωποι έχουν ίδια δικαιώματα στην γνώση και στην πληροφορία. Βασισμένοι πάνω σε αυτήν την λογική δημιουργήσαμε ένα πρότυπο ιστοσελίδας , ιδιαίτερα συμβατή με το πρότυπο WCAG , που ορίζει το πόσο φιλική είναι μια ιστοσελίδα σε ανθρώπους με αναπηρίες . Η ιστοσελίδα αυτή είναι οικονομική , είναι παραπάνω από συμβατή με όλα τα πρότυπα Web accessibility ( A, AA , AAA ) και προσφέρει δικαίωμα στην πρόσβαση σε όλους τους ανθρώπους και συγχρόνως  κύρος στην εταιρείας σας.

Ενημερωθείτε

 



Διαβάζουμε. Ενημερωνόμαστε. Ψαχνόμαστε. Πινουμε πολλούς καφέδες και συζητάμε.

διαφήμιση google adwords