Παιδομάζωμα, Κώστας Ζουράρις

Διαβάστε περισσότερα »

Θες να με αντιγράψεις; Βάλε και την πηγή

Ένα ξυπνώ script που κάθε φορα που κάνουν αντιγραφή από το blog σας και όταν κάνουν επικόλληση θα εμφανίζεται η πηγή του blog σας!

Αντιγραφή επικόλληση τον παρακάτω κώδικα:

Επικολλήστε πριν από  </body>

<script type="text/javascript">
if(document.location.protocol==&#39;http:&#39;){
 var Tynt=Tynt||[];Tynt.push(&#39;a8Kw0GrZ8r4kpuadbi-bpO&#39;);Tynt.i={&quot;ap&quot;:&quot;Πηγή:&quot;};
 (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://foulsblog.xtgem.com/foulscode-stopcopy.txt.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})();
}
</script>

Διαβάστε περισσότερα »

Τρόποι Για Να Είναι Ο Σχεδιασμός Σας Πιο Αποδοτικός

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

Επενδύστε Στον Καλύτερο Δυνατό Εξοπλισμό

Το hardware που είχαμε μόλις πριν από λίγα χρόνια είναι πιο αργό και λιγότερο αποτελεσματικό από ό, τι υπάρχει σήμερα. Είναι δύσκολο να αναγκάσετε τον εαυτό σας να το αντικαταστήσετε, αλλά αυτό είναι που σας κοστίζει ώρες κατά τη διάρκεια της εβδομάδας από την χρονική του υστέρηση (lag time). Κάθε λεπτό που περιμένετε έναν αργό επεξεργαστή είναι ένα λεπτό που δεν είστε παραγωγικός, και τα λεπτά αυτά αθροίζονται. Δεδομένου ότι κάθε μία από αυτές τις ώρες είναι παραγωγικές , η επένδυση στον καλύτερο εξοπλισμό ανταποδίδει τις παραγωγικές ώρες που είστε σε θέση να διεκδικήσετε εκ νέου. Αντικαταστήστε λοιπόν το παλιό, αργό μηχάνημα με πιο γρήγορο, πιο αποτελεσματικό (και είστε πιθανό να δείτε χαμηλότερους λογαριασμούς ηλεκτρικού ρεύματος σε συνδυασμό με πιο πολλές πληρωτέες ώρες).

Επενδύστε Χρόνο Για Να Μάθετε Το Λογισμικό Σας

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

Μην Αποσπάται Η Προσοχή Σας Την Ώρα Που Εργάζεστε

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

Διαχειριστείτε Τις Ώρες Εργασίας Σας Για Να Βελτιώσετε Τη Δημιουργικότητα

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

Μάθετε Τρόπους Για Να Μείνετε Κινητοποιημένοι

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

Να Είστε Δυναμικός Και Όχι Αντιδραστικός

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

Διαμορφώστε Το Λογισμικό Σας Ανάλογα Με Τους Σκοπούς σας

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

Ξεκινήστε Να Χρησιμοποιείτε Snippets

Το να συνηθίσετε να χρησιμοποιείτε snippets μπορεί να σας φαίνεται ότι σας επιβραδύνει, αλλά μάθετε να τα χειρίζεστε,τα snippets μπορεί να επιταχύνουν τη διαδικασία σχεδιασμού πάρα πολύ. Δημιουργήστε τη δική σας βιβλιοθήκη από code snippets ή κάντε χρήση μιας από τις ήδη υπάρχουσες, όπως το Eric Myers CSS Reset . Όχι μόνο θα σας εξοικονομήσουν χρόνο, αλλά μπορούν να κάνουν και τον κωδικό σας πιο συνεπή.

Χρησιμοποιήστε Μια Javascript Βιβλιοθήκη

Μια βιβλιοθήκη Javascript λειτουργεί περίπου σαν τα snippets για να σας εξοικονομήσει χρόνο και προσπάθεια. Η βιβλιοθήκη σας βοηθά, επίσης, γύρω από θέματα όπως οι ασυνέπειες μεταξύ των browsers. Το jQuery είναι ένα παράδειγμα, αλλά υπάρχουν και άλλα για σας να εξετάσετε. Κάθε στοιχείο στον κώδικά σας που δεν χρειάζεται να αναδημιουργήσετε σας εξοικονομεί χρόνο, αυξάνει την αποδοτικότητα, και σπαταλάτε λιγότερο από την ενέργεια που έχετε για τη δημιουργικότητα.

Οργανώστε Το Σύστημα Εργασιών Σας

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

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

ΠΗΓΗ

Διαβάστε περισσότερα »

Πρόσφατες δημοσιεύσεις Widget Για Blogger

Αντιγραφή επικόλληση τον παρακάτω κώδικα:

<!-- foulscode.blogspot.gr -->
<script style='text/javascript' src='https://widcraft.googlecode.com/svn/recent-posts-with-titles-only.js'></script>
<script>
var numposts = 20;
var showpostdate = false;
var showpostsummary = false;
var standardstyling = true;
</script>
<div class="scrollableContainer">
  <div class="scrollingArea">
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
<hr />
<div style="text-align:center;">Powered By: <a href="http://foulscode.blogspot.gr/2013/04/widget-blogger.html" rel="nofollow" target="_blank" >foulscode</a></div>
</div></div>
<style>
div.scrollableContainer {
    width: 100%;
    border: 1px solid #999;
    overflow:hidden;
}
  div.scrollingArea {
    height: 240px;
    overflow: auto;
}
.bbrecpost2{
    padding:5px 0 5px 5px;
}
.bbrecpost2 a{
    text-decoration:none;
</style>
<!-- foulscode.blogspot.gr -->

Αλλάζοντας το 20 ρυθμίζεται τον αριθμό τον δημοσιεύσεων.

Διαβάστε περισσότερα »

Πλαίσιο αναζήτησης CSS3 Σκούρο

• Πλαίσιο αναζήτησης CSS3

Ένα πλαίσιο αναζήτησης που όταν κάνετε κλικ ανοίγει εμπνευσμένο από την apple.com

Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο HTML

<style type="text/css">/* foulscode.blogspot.gr */
 #search{padding:0}#search input[type="text"]{background:url(http://2.bp.blogspot.com/-Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/_p6u9Xpgs7c/s20/Search-icon.png) no-repeat 5px 5px #fcfcfc; border:1px solid #ddd; font:bold 12px Arial,Helvetica,Sans-serif; color:#888; width:210px; padding:6px 15px 6px 35px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-shadow:0 2px 3px rgba(0,0,0,0.1); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -webkit-transition:all .7s ease 0s; -moz-transition:all .7s ease 0s; -o-transition:all .7s ease 0s; transition:all .7s ease 0s}#search input[type="text"]:focus{ width:300px}/* foulscode.blogspot.gr */
</style><center><form method="get" action="/search" id="search"><input name="q" type="text" size="50" placeholder="Αναζήτηση..." /></form></center>

Αλλάζοντας τα width:210px;  width:300px  προσαρμόζεται όπως το θέλετε!

Αφήστε τα σχόλιά σας εδώ κάτω αν έχετε κάτι να ρωτήσετε!

Διαβάστε περισσότερα »

Customizing Facebook Like Box Widget

Ένα Widget για το facebook διαφορετικό από τα αλλα για το blog και το site σας!

Αντιγραφή επικόλληση τον παρακάτω καδίκα:

<style>
/* foulscode */
.facebookOuter {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
/* foulscode.blogspot.gr */
</style>
<div class="facebookOuter" style="float:left;">
<div class="facebookInner">
  <div class="fb-like-box"
      data-width="300" data-height="179"
      data-href="https://www.facebook.com/pages/Fouls-Code/548164921863886"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>
 </div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

DEMO

Και αφού αλλάξετε το URL από την σελίδα σας στο facebook είστε έτοιμη να κάνετε αποθήκευση!

Διαβάστε περισσότερα »

Σελιδοδείκτες χρηστών για το WordPress

Το plugin User Bookmarks για το wordpress είναι ενα ολοκληρωμένο σύστημα που δίνει την δυνατότητα στους χρήστες να αποθηκεύουν τα αγαπημένα τους posts σε μια προσωπική λίστα σελιδοδεικτών. To plugin είναι  φτιαγμένο σε  ajax και είναι όμορφο και απλό στη χρήση.

Είναι χρήσιμη προσθήκη τόσο για τους κατασκευαστές ιστοσελίδων που επιθυμούν να δώσουν extra λειτουργικότητα στο web site τους όσο και στους ειδικούς για την προώθηση ιστοσελίδων αφού τα bookmarks είναι χρήσιμα στις seo προσπάθειες σας.

Δυνατότητες

• Επιτρέπει σε συνδεδεμένους χρήστες να αποθηκεύσουν στα bookmarks τις αγαπημένες τους δημοσιεύσεις.
• Οι αγαπημένες δημοσιεύσεις υπάρχουν σε λίστα.
• Οι χρήστες μπορούν να επεξεργαστούν τη λίστα αυτή.
• 3 widgets περιλαμβάνονται
  • Bookmark Links για προσθήκη / αφαίρεση απο συνδεδεμένους χρήστες
  • User Bookmarks List οπου εμφανίζονται τα bookmarks των συνδεδεμένων χρηστών
  • Λίστα δημοφιλέστερoυ περιεχομένου της ιστοσελίδας σας
• 3 short codes περιλαμβάνονται
  • Bookmark Links για προσθήκη / αφαίρεση απο συνδεδεμένους χρήστες
  • User Bookmarks List οπου εμφανίζονται τα bookmarks των συνδεδεμένων χρηστών
  • Λίστα δημοφιλέστερoυ περιεχομένου της ιστοσελίδας σας
  
  

Αυτό το plugin είναι τέλειο για ολα τα wordpress sites με μεγάλο όγκο περιεχομένου που θέλουν να δώσουν την ευκαιρία στα μέλη τους να αποθηκεύουν τις αγαπημένες τους πληροφορίες πόσο δε μάλιστα αν αυτό χρησιμοποιηθεί ως καταλόγος προιόντων ή e-shop για να μπορούν να ανακαλούν εύκολα οι πιθανοί πελάτες – επισκέπτες τα προιόντα που τους τράβηξαν την προσοχή κατά την διάρκεια μιας επίσκεψης τους στον ιστοτόπο σας.

Μπορείτε να το βρείτε εδώ.

http://pippinsplugins.com/user-bookmarks-for-wordpress/

ΠΗΓΗ

Διαβάστε περισσότερα »

Προτεινόμενα Post από CSS, jQuery (Πορτοκαλί)

Το έκανα σε πορτοκαλι πειράζοντας το css για τα ταιριάζει το χρώμα με το blog μπορείτε να το κάνετε ότι χρώμα θέλετε!

• Προτεινόμενα Post από CSS, jQuery

Αντιγραφή επικόλληση τον κώδικα:

<style scoped="" type="text/css">/* foulscode.blogspot.gr */#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}#slides ul{height:250px}#slides li{width:49.9%;height:100%;position:absolute;display:none}#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}#slides li:nth-child(1){left:0;top:0}#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}#slides a{display:block;width:100%;height:100%;overflow:hidden}#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#D15801;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #D15801;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}#buttons{margin:5px 0 0}#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #D15801 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}#buttons a#nextx::before{border-color:transparent transparent transparent #D15801;margin-left:-3px}@media only screen and (max-width:600px){  #slides ul{height:600px}  #slides li:nth-child(1){width:100%;height:49.8%}  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}}/* foulscode.blogspot.gr */</style><div id="featuredpost"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"http://foulscode.blogspot.com",MaxPost:8,idcontaint:"#featuredpost",ImageSize:300,interval:5000,autoplay:true,tagName:false});});//]]></script>

Και αφού βάλετε το δικό σας link είστε έτοιμη να κάνετε αποθήκευση.

Διαβάστε περισσότερα »

Simple Css3 Drop Down Navigation Bar For blog

Αντιγραφή επικόλληση τον παρακάτω κώδικα: 

<style>
/* The CSS Code for the menu starts here foulscode.blogspot.gr */
.btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.btrix_menu {
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.btrix_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.btrix_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}
.btrix_menu li:first-child a { border-left: none; }
.btrix_menu li:last-child a{ border-right: none; }
.btrix_menu li:hover > a { color: #8fde62; }
.btrix_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}
.btrix_menu li:hover > ul { opacity: 1; }
.btrix_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.btrix_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.btrix_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.btrix_menu ul li:last-child a { border: none; }
.btrix_menu a.documents { background: url(http://1.bp.blogspot.com/-ufTASGYhnRY/UUqTF6utFaI/AAAAAAAAAbg/mjL4RGoqGp8/s1600/docs.png) no-repeat 6px center; }
.btrix_menu a.messages { background: url(http://1.bp.blogspot.com/-vPgkW1tY5Qg/UUqTF-S_CDI/AAAAAAAAAbs/oPXETufCfkc/s1600/bubble.png) no-repeat 6px center; }
.btrix_menu a.signout { background: url(http://4.bp.blogspot.com/-5yd9R4gXA48/UUqTF8Zdf9I/AAAAAAAAAbo/iEWPtSKqus4/s1600/arrow.png) no-repeat 6px center; }
/* foulscode.blogspot.gr */
</style>
<ul class="btrix_menu">
 <li><a href="URL">Home</a></li> <li><a href="URL">Likes</a></li> <li><a href="URL">Views</a>
  <ul>
   <li><a href="URL" class="documents">Documents</a></li>   <li><a href="URL" class="messages">Messages</a></li>   <li><a href="URL" class="signout">Sign Out</a></li>  </ul>
 </li>
 <li><a href="URL">Uploads</a></li> <li><a href="URL">Videos</a></li>    <li><a href="URL">About</a></li> <li><a href="http://www.foulscode.blogspot.gr/">Contact us</a></li>
</ul>

DEMO

Και αφού πρώτα αντικαταστήσετε τα μαρκαρισμένα γράμματα με τα δικά σας κάντε αποθήκευση!

Διαβάστε περισσότερα »

Η ψυχολογία της απόδοσης στο Web

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

Μια τεράστια έρευνα διαπίστωσε πως το 33% των χρηστών με ευρυζωνική σύνδεση στο Internet είναι απρόθυμοι να περιμένουν περισσότερο από τέσσερα δευτερόλεπτα για μια ιστοσελίδα, ενώ το 43% των χριστών με ποιο αργές γραμμές σύνδεσης στο Internet δεν περιμένουν για περισσότερο από 6 δευτερόλεπτα.

Σε μια μελέτη του 2004, η Fioan Nah διαπίστωσε πως ο μέσος χρόνος αναμονής για συνδέσμους που δεν λειτουργούσαν έφτασε τα 5 με 8 δευτερόλεπτα. Μια γραμμή προόδου σε αντίστοιχους υπέρ-συνδέσμους, ανέβασε τον ανεκτό χρόνο αναμονής στα 38 δευτερόλεπτα. Στη συνέχεια, με επόμενες προσπάθειες σε συνδέσμους που δεν λειτουργούσαν ο μέσος χρόνος αναμονής μειώθηκε στα 2 με 3 δευτερόλεπτα. Το συμπέρασμα της έρευνας είναι πως τελικά ο μέσος χρόνος αναμονής είναι περίπου 2 δευτερόλεπτα μέχρι την πρώτη ανάδραση από τη σελίδα.

Ακόμα και μικρές αλλαγές στους χρόνους απόκρισης μπορούν να έχουν σημαντικές επιπτώσεις.

Η Google διαπίστωσε πως αν άλλαζε το σύνολο των αποτελεσμάτων που εμφανίζει σε κάθε σελίδα, από τα 10 που θέλουν περίπου 400ms για να φορτωθούν στον web browser του χρήστη στα 30 που θέλει περίπου 900ms μειώνετε η κίνηση προς την ιστοσελίδα της και τα έσοδα της από τις διαφημίσεις κατά 20%

Επίσης στην Google παρατήρησαν, πως η μείωση του μεγέθους της κεντρικής ιστοσελίδας της για τα Google Maps από τα 100KB στα 70-80ΚΒ είχε ως αποτέλεσμα την αύξηση της κίνησης της κατά 10% την πρώτη εβδομάδα και κατά 25% στις ακόλουθες τρις εβδομάδες.

Δοκιμές στο Amazon έδειξαν παρόμοια αποτελέσματα, κάθε αύξηση 100ms για το χρόνο φόρτωσης της Amazon.com έχει ως αποτέλεσμα την κατά 1% μείωση των πωλήσεων της.

Πειράματα στην Microsoft σχετικά με το Live Search έδειξαν πως όταν η επιβράδυνση των αποτελεσμάτων αναζήτησης αυξήθηκε κατά 1 δευτερόλεπτο τα αποτελέσματα ήταν τα ακόλουθα

• Τα ερωτήματα ανά χρήστη μειώθηκαν κατά 1% και
• τα κλικ στις διαφημίσεις ανά χρήστη μειώθηκαν κατά 1,5%

Μετά την επιβράδυνση της σελίδας αποτελεσμάτων αναζήτησης κατά 2 δευτερόλεπτα:

• Τα ερωτήματα ανά χρήστη μειώθηκαν κατά 2,5% και
• τα κλικ στις διαφημίσεις ανά χρήστη μειώθηκαν κατά 4,4%

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

Η παλιά αντίληψη του χρόνου φόρτωσης μιας ιστοσελίδας έχει μεταφερθεί μακριά από τα 8 με 10 δευτερόλεπτα. Οι χρήστες με ευρυζωνικές συνδέσεις περιμένουν λιγότερο ενώ οι χρήστες με ποιο αργές συνδέσεις έχουν ακόμα κάποια ανοχή. Καθώς οι ευρυζωνικές συνδέσεις για το Internet αυξάνονται συνεχώς, και το μέγεθος μιας ιστοσελίδας έχει αυξηθεί κατά 300KB ενώ ο μέσος όρος των αντικειμένων που είναι συνδεδεμένα πάνω σε μια σελίδα ξεπερνά τα 50, η επιτάχυνση των ιστοσελίδων είναι σημαντική. Η αύξηση της ταχύτητας της ιστοσελίδας σας θα βελτιώσει τα ποσοστά μετατροπής χρηστών σε πελάτες, και θα κάνει την ιστοσελίδα σας ποιο ελκυστική για τους χρήστες.

Πηγή: Web Site Optimization

Διαβάστε περισσότερα »

HTML5 & HTML 4+ – Όλες οι ετικέτες

Σήμερα άρχισα να κάνω μια σύντομη σύγκριση των ετικετών της HTML 4+ με τις ετικέτες της HTML5 έτσι ώστε να μπορέσω να δω ποιες είναι οι διαφορές από ετικέτα σε ετικέτα, ποιες ετικέτες έχουν κληρονομηθεί από την HTML 4+ και ποιες νέες ετικέτες υπάρχουν που δεν υπήρχαν στις προηγούμενες εκδόσεις. Έτσι μετά από αρκετή ώρα συγκρίσεων, συγκέντρωσα μια λίστα με όλες τις ετικέτες που υπάρχουν στην HTML 4+ και στην HTML5

Ετικέτα	Περιγραφή	HTML 4+	HTML 5
<comment>	Ορίζει ένα σχόλιο	✓	✓
<DOCTYPE>	Ορίζει τον τύπου του εγγράφου	✓	✓
<a>	Ορίζει ένα υπέρ-σύνδεσμο	✓	✓
<abbr>	Ορίζει μια συντομογραφία	✓	✓
<acronym>	Ορίζει μια ακρώνυμο	✓
<address>	Ορίζει ένα στοιχείο διεύθυνσης	✓	✓
<applet>	Ορίζει ένα applet	✓
<area>	Ορίζει μια περιοχή μέσα σε ένα χάρτη εικόνας	✓	✓
<article>	Ορίζει ένα άρθρο		✓
<aside>	Ορίζει μια περιοχή δίπλα από το περιεχόμενο της σελίδας		✓
<audio>	Ορίζει μια περιοχή ήχου		✓
<b>	Ορίζει ένα έντονα γραμμένο κείμενο	✓	✓
<base>	Ορίζει το βασικό URL για όλα τα URL της σελίδας	✓	✓
<basefont>	Είναι απαγορευμένη. Στη θέση της χρησιμοποιήστε CSS	✓
<bdo>	Ορίζει την κατεύθυνση του κειμένου που εμφανίζει	✓	✓
<big>	Ορίζει μεγάλο κείμενο	✓
<blockquote>	Ορίζει μια μεγάλη περιοχή εισαγωγικών	✓	✓
<body>	Ορίζει το στοιχείο κορμού	✓	✓
<br>	Εισάγει μια αλλαγή γραμμής	✓	✓
<button>	Εισάγει ένα κουμπί	✓	✓
<canvas>	Ορίζει μια περιοχή για γραφικά		✓
<caption>	Ορίζει μια επικεφαλίδα σε πίνακες	✓	✓
<center>	Ορίζει ένα κείμενο στοιχισμένο στο κέντρο	✓
<cite>	Ορίζει μια παραπομπή	✓	✓
<code>	Ορίζει μια περιοχή που προβάλει κώδικα υπολογιστών	✓	✓
<col>	Ορίζει ιδιότητες για στήλες σε ένα πίνακα	✓	✓
<colgroup>	Ορίζει ομάδες από στήλες σε ένα πίνακα	✓	✓
<command>	Ορίζει ένα κουμπί εντολής		✓
<datagrid>	Ορίζει δεδομένα σε λίστα δέντρου		✓
<datalist>	Ορίζει μια αναδυόμενη λίστα δεδομένων		✓
<datatemplate>	Ορίζει πρότυπα δεδομένων		✓
<dd>	Ορίζει την περιγραφή ενός ορισμού	✓	✓
<del>	Ορίζει ένα διαγραμμένο κείμενο	✓	✓
<details>	Ορίζει της λεπτομέρειες ενός στοιχείου		✓
<dialog>	Ορίζει ένα διάλογο		✓
<dir>	Ορίζει μια λίστα καταλόγου	✓
<div>	Ορίζει ένα τμήμα σε ένα έγγραφο	✓	✓
<dfn>	Ορίζει ένα ορισμό για ένα όρο	✓	✓
<dl>	Ορίζει μια λίστα ορισμών	✓	✓
<dt>	Ορίζει ένα όρο ορισμού	✓	✓
<em>	Ορίζει ένα κείμενο με έμφαση	✓	✓
<embed>	Ορίζει ένα εξωτερικό διαδραστικό στοιχείο ή κάποιο plugin		✓
<eventsource>	Ορίζει μια περιοχή «στόχο» για γεγονότα που αποστέλνονται από το web server		✓
<fieldset>	Ορίζει μια περιοχή πεδίων φόρμας	✓	✓
<figure>	Ορίζει μια ομάδα πολυμέσων και τους τίτλους τους		✓
<font>	Ορίζει το όνομα το χρώμα και το μέγεθος της γραμματοσειράς	✓
<footer>	Ορίζει το υποσέλιδο ενός τμήματος ή μιας σελίδας		✓
<form>	Ορίζει μια φόρμα	✓	✓
<frame>	Ορίζει ένα υπό-παράθυρο	✓
<frameset>	Ορίζει ένα σύνολο από παράθυρα	✓
<h1> – <h6>	Ορίζει επικεφαλίδες τάξης από 1 μέχρι 6	✓	✓
<head>	Ορίζει πληροφορίες σχετικά με το έγγραφο	✓	✓
<header>	Ορίζει την επικεφαλίδα ενός τμήματος ή της σελίδας		✓
<hr>	Ορίζει μια οριζόντια γραμμή	✓	✓
<html>	Ορίζει ένα έγγραφο html	✓	✓
<i>	Ορίζει πλάγια γράμματα	✓	✓
<iframe>	Ορίζει ένα υπό-παράθυρο	✓	✓
<img>	Ορίζει μια εικόνα	✓	✓
<input>	Ορίζει ένα πεδίο εισαγωγής	✓	✓
<ins>	Ορίζει ένα κείμενο που προστέθηκε αργότερα	✓	✓
<isindex>	Ορίζει ένα πεδίο εισαγωγής μιας γραμμής	✓
<kbd>	Ορίζει κείμενο γραμμένο με το πληκτρολόγιο	✓	✓
<label>	Ορίζει μια ετικέτα για ένα στοιχείο εισαγωγής φόρμας	✓	✓
<legend>	Ορίζει τον τίτλο ενός συνόλου πεδίων	✓	✓
<li>	Ορίζει ένα στοιχείο λίστας	✓	✓
<link>	Ορίζει την αναφορά σε μια πηγή	✓	✓
<mark>	Ορίζει ένα κείμενο με επισήμανση		✓
<map>	Ορίζει ένα χάρτη εικόνας	✓	✓
<menu>	Ορίζει μια λίστα μενού	✓	✓
<meta>	Ορίζει μετά πληροφορίες για το έγγραφο	✓	✓
<meter>	Ορίζει τη μέτρηση σε ένα προκαθορισμένο εύρος τιμών		✓
<nav>	Ορίζει συνδέσμους πλοήγησης		✓
<nest>	Ορίζει το σημείο ενθυλάκωσης σε ένα πρότυπο δεδομένων		✓
<noframes>	Ορίζει ένα τμήμα που δεν έχει υπό-παράθυρα	✓
<noscript>	Ορίζει μια περιοχή χωρίς σενάρια εντολών	✓	✓
<object>	Ορίζει ένα ενσωματωμένο αντικείμενο	✓	✓
<ol>	Ορίζει μια ταξινομημένη λίστα	✓	✓
<optgroup>	Ορίζει ένα σύνολο επιλογών	✓	✓
<option>	Ορίζει μια επιλογή σε μια αναδυόμενη λίστα	✓	✓
<output>	Ορίζει ορισμένους τύπους εξόδου		✓
<p>	Ορίζει μια παράγραφο	✓	✓
<param>	Ορίζει μια παράμετρο ενός αντικειμένου	✓	✓
<pre>	Ορίζει ένα κείμενο που είναι μορφοποιημένο εξ αρχής	✓	✓
<progress>	Ορίζει την πρόοδο κάθε είδους εργασίας		✓
<q>	Ορίζει σύντομα εισαγωγικά	✓	✓
<rule>	Ορίζει τους κανόνες αναβάθμισης ενός προτύπου		✓
<s>	Ορίζει ένα κείμενο με μια γραμμή στη μέση	✓
<samp>	Ορίζει δείγμα κώδικα υπολογιστή	✓	✓
<script>	Ορίζει ένα σενάριο εντολών	✓	✓
<section>	Ορίζει ένα τμήμα		✓
<select>	Ορίζει μια λίστα επιλογών	✓	✓
<small>	Ορίζει ένα κείμενο με μικρότερη γραμματοσειρά	✓	✓
<source>	Ορίζει πηγές πολυμέσων		✓
<span>	Ορίζει ένα τμήμα του εγγράφου	✓	✓
<strike>	Ορίζει ένα κείμενο με μια γραμμή στη μέση	✓
<strong>	Ορίζει ένα έντονα γραμμένο κείμενο	✓	✓
<style>	Ορίζει ένα ορισμό μορφοποίησης	✓	✓
<sub>	Ορίζει ένα κείμενο βάσης	✓	✓
<sup>	Ορίζει ένα κείμενο εκθέτη	✓	✓
<table>	Ορίζει ένα πίνακα	✓	✓
<tbody>	Ορίζει τον κορμό ενός πίνακα	✓	✓
<td>	Ορίζει ένα κελί του πίνακα	✓	✓
<textarea>	Ορίζει μια περιοχή κειμένου	✓	✓
<tfoot>	Ορίζει το υποσέλιδο ενός πίνακα	✓	✓
<th>	Ορίζει την επικεφαλίδα μια στήλης του πίνακα	✓	✓
<thead>	Ορίζει την επικεφαλίδα ενός πίνακα	✓	✓
<time>	Ορίζει μια ώρα/ημερομηνία		✓
<title>	Ορίζει τον τίτλο του εγγράφου	✓	✓
<tr>	Ορίζει μια γραμμή σε ένα πίνακα	✓	✓
<tt>	Ορίζει κείμενο τηλετύπου	✓
<u>	Ορίζει ένα υπογραμμισμένο κείμενο	✓
<ul>	Ορίζει μια αταξινόμητη λίστα	✓	✓
<var>	Ορίζει μια μεταβλητή	✓	✓
<video>	Ορίζει ένα video		✓
<xmp>	Ορίζει ένα κείμενο μορφοποιημένο εξ ορισμού	✓

ΠΗΓΗ

Διαβάστε περισσότερα »