Kατεβάσετε την εφαρμογή android του blog! DownLoad

FoulsCode: 2011-17

Translate

Πρόσφατα Σχόλια

Σύνολο αναρτήσεων

Δείτε τη δραστηριότητα των χρηστών του Twitter σε πραγματικό χρόνο, με το Tweetping

Written By Greek Port on Σάββατο, 21 Δεκεμβρίου 2013 | Δεκεμβρίου 21, 2013



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


Όπως πολύ εύστοχα περιγράφει ο συντάκτης του The Atlantic, «μόλις παρακολούθησα την Δυτική Ακτή [σ.σ. των ΗΠΑ] να ξυπνάει. Στο Twitter».

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


Δεκεμβρίου 21, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Χιονια στο blog σας v2


Τώρα που έρχονται η γιορτές μπορεί να θέλετε να στολίσετε και το site, blog, forum σας!

θα σας δώσω ένα κώδικα για χιονια στο blog σας, πέρσι σας είχα δώσει άλλον έναν όπου μπορείτε να τον βρείτε παρακάτω!



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

<script src="http://scriptsrb.googlecode.com/files/snoweffect1.js" type="text/javascript"></script>



Και αποθήκευση και αυτό ήταν!
Δεκεμβρίου 21, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Δομές Δεδομένων book

Written By Greek Port on Παρασκευή, 20 Δεκεμβρίου 2013 | Δεκεμβρίου 20, 2013

Δεκεμβρίου 20, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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




Για να προσθέσετε αυτό το blog σας, Blogger.com >> Διάταξη >> Προσθήκη Gadget >> Προσθέστε HTML / JavaScript. Τώρα επικολλήστε τον παρακάτω κώδικα στο HTML Text Area. Μόλις κάνει τα πάντα, μετά την προσαρμογή αποθηκεύσετε το gadget.


<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
 <script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>
  <script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.foulscode.blogspot.gr/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>


LIVE DEMO


Αντικαταστήστε τα μαρκαρισμένα γράμματα με το blog σας. Το 5 είναι ο αριθμός τον δημοσιεύσεων σας που θέλετε να εμφανίζεται!
Δεκεμβρίου 20, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Greeklish-το-Greek στο blog/site σας!

Written By Greek Port on Τετάρτη, 18 Δεκεμβρίου 2013 | Δεκεμβρίου 18, 2013




Γιατί να τα ενσωματώσει κανείς;
Για έναν και βασικό λόγο: Για να διατηρήσετε τον ιστότοπό σας "καθαρό" από Greeklish! Έτσι, όχι μόνο ο ιστότοπός σας είναι πιο ελκυστικός, αλλά και πολύ πιο λειτουργικός, αφού καμία μηχανή αναζήτησης δεν μπορεί να δεικτιοδοτήσει αποτελεσματικά σελίδες που περιέχουν Greeklish.


Χαρακτηριστικά
Τα Gadgets που διατίθενται ενσωματώνουν την τεχνολογία αυτόματης μετατροπής από Greeklish σε Ελληνικά με μοναδικό περιορισμό το μήκος του κειμένου να μην ξεπερνάει τους 1000 και τους 3000 χαρακτήρες για το μικρό και το μεγάλο μέγεθος αντίστοιχα.

Ποιος μπορεί να τα χρησιμοποιήσει;
Η απάντηση είναι: Οποιοσδήποτε! Μπορείτε να το ενσωματώσετε είτε σε αρχική προσωπική σελίδα όπως είναι το iGoogle ή το NetVibes, σε ιστοσελίδα που διατηρείτε, σε blog, σε forum ή ακόμα και σε εταιρικό ιστότοπο.


Μεγάλο μέγεθος 485x335


<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100191708549727820875/Greeklish2GreekLarge.xml&up_Greeklish_to_Greek=0&synd=open&w=485&h=335&title=Greeklish+to+Greek+by+innoetics&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>


Μικρό μέγεθος 250x335


<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100191708549727820875/Greeklish2GreekSmall.xml&up_Greeklish_to_Greek=0&synd=open&w=250&h=335&title=Greeklish+to+Greek+by+innoetics&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>


Μικρότερο μέγεθος 150x455


<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100191708549727820875/Greeklish2GreekSmaller.xml&up_Greeklish_to_Greek=0&synd=open&w=150&h=455&title=Greeklish+to+Greek+by+innoetics&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>



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


Δεκεμβρίου 18, 2013 | 0 σχόλια | Διαβάστε περισσότερα

CSS Spotlight Menu

Written By Greek Port on Δευτέρα, 16 Δεκεμβρίου 2013 | Δεκεμβρίου 16, 2013



Tο εφέ μετάβασης λειτουργεί σε browsers που υποστηρίζουν CSS3 μεταβάσεις, δηλαδή, FF3.5 +, Safari 3.1 +, Google Chrome, Opera και 11.6 +.


Αντιγραφή τον παρακάτω κώδικα:


<style type="text/css">
/* foulscode.blogspot.gr */
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}

.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
/* foulscode.blogspot.gr */
</style>
<div class="spotlightmenu">
<ul>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>Home</span></a></li>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>DHTML</span></a></li>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>CSS</span></a></li>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>Forums</span></a></li>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>JavaScript</span></a></li>
</ul>
</div>




LIVE DEMO


Αντικαταστήστε τα urls και τους τίτλους με τα δικά σας και είσατε έτοιμοι!
Δεκεμβρίου 16, 2013 | 0 σχόλια | Διαβάστε περισσότερα

15 χρόνια μετά, η HTML5 κάνει δυο σημαντικά βήματα προς την ολοκλήρωσή της

Written By Greek Port on Παρασκευή, 13 Δεκεμβρίου 2013 | Δεκεμβρίου 13, 2013


Στα μέσα Δεκέμβρη, το World Wide Web Consortium (W3C) πραγματοποίησε δύο σημαντικά βήματα προς την κατεύθυνση της ολοκλήρωσης της HTML5. Το ένα αφορά την δημοσίευση της «Υποψήφιας Σύστασης» (Candidate Recomendation) της HTML5 και το δεύτερο την κυκλοφορία της πρώτης δοκιμαστικής έκδοσης της HTML 5.1. Ας δούμε, όμως, τί σημαίνουν όλα αυτά….


Η «υποψήφια σύσταση» αποτελεί μια πρώτη έκδοση της γλώσσας που περιλαμβάνει μόνο τα χαρακτηριστικά εκείνα που είναι δοκιμασμένα, σταθερά και ήδη ενσωματωμένα στις τρέχουσες εκδόσεις των browser. Αυτό σημαίνει πως ο,τιδήποτε μη σταθερό ή αμφιλεγόμενο έχει εξαιρεθεί, ενώ έχει αφαιρεθεί επίσης και κάθε τί που είναι γνωστό ότι προκαλεί προβλήματα μεταξύ των υλοποιήσεων του κάθε browser. Η σύσταση αυτή είναι που θα αποτελέσει την βάση για την τελική προδιαγραφή της HTML 5.0, που αναμένεται να παραδοθεί, στην οριστική της μορφή, στο τέλος του 2014.

Παράλληλα, ξεκίνησε να δημιουργείται η πρώτη «πρόχειρη» (draft) έκδοση της HTML 5.1, που θα περιλαμβάνει νέα χαρακτηριστικά και λειτουργικότητες που δεν πρόλαβαν να βρουν τον δρόμο τους στην HTML 5.0 αλλά για τα οποία υπάρχει κοινή συναίνεση για την υλοποίησή τους. Τέτοιες λειτουργίες περιλαμβάνουν βελτιώσεις στην διαχείριση βίντεο, νέες επιλογές στην συμπλήρωση φορμών, ορθογραφικό έλεγχο, καλύτερη προσβασιμότητα στις φωτογραφίες και περισσότερες δυνατότητες στα iframe.

Κι αν σας φαίνεται πως οι εργασίες του W3C προχωρούν κάπως αργά, μάλλον θα εκπλαγείτε αν μάθετε πως η προηγούμενη τελική έκδοση της HTML, η HTML4, χρονολογείται από το 1997, ενώ σύμφωνα με τον αρχικό προγραμματισμό η ολοκλήρωση της HTML5 ήταν προγραμματισμένη για το 2022.



Πηγή
Δεκεμβρίου 13, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Εμπλουτίστε το site σας με τις κατάλληλες εικόνες


Ένα website δεν μπορεί να είναι αποτελεσματικό και ελκυστικό αν δεν περιλαμβάνει τις κατάλληλες εικόνες. Φυσικά τα κείμενα είναι πολύ σημαντικά αλλά όσο καλογραμμένα και να είναι, δεν μπορούν να αντικαταστήσουν την αμεσότητα των εικόνων.

Ένα προϊόν που δε συνοδεύεται από εικόνα, είναι σχεδόν απίθανο να αγοραστεί από ένα επισκέπτη ενός e-shop. Αλλά και ένα προϊόν που συνοδεύεται από μια κακής ποιότητας φωτογραφία, προδιαθέτει αρνητικά τον υποψήφιο αγοραστή.
Ένα άρθρο χωρίς φωτογραφίες γίνεται ελάχιστα ελκυστικό προς ανάγνωση. Αλλά και μια κακής ποιότητας φωτογραφία προκαλεί κακές εντυπώσεις, αίσθηση «προχειρότητας» και αναξιοπιστίας.
Οι εικόνες είναι αναπόσπαστο κομμάτι μιας ιστοσελίδας και η διακασία επιλογής των  κατάλληλων εικόνων είναι μια πολυ σημαντική διαδικασία:

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

Η κάθε εικόνα πρέπει να συμβαδίζει με την αισθητική του site μας αλλά και με το προφίλ της εταιρίας μας. πχ. Μια εταιρία τεχνολογίας δε μπορεί να χρησιμοποιεί «παλιομοδίτικες» εικόνες ούτε εικόνες που ανατρέχουν σε προηγούμενες δεκαετίες ή ξεπερασμένες τεχνολογίες.
H εικόνα που επιλέγουμε κάθε φορά θα πρέπει να «λέει» στον επισκέπτη αυτό που θέλει να πει και το κέιμενό μας, πχ. τι αντιπροσωπεύει η εταιρία μας ή με τι ασχολείται
Δεν χρησιμοποιούμε εικόνες που χρησιμοποιούν ανταγωνιστικά sites ή που είναι ευρέως διαδεδομένες στο διαδίκτυο. Χρησιμοποιώντας μοναδικές εικόνες δίνετε μια ξεχωριστή αίσθηση στην παρουσίαση της εταιρίας σας αλλά και ξεχωρίζετε από τους ανταγωνιστές σας. Επίσης κάνετε τις σελίδες σας πολύ πιο ενδιαφέρουσες και ελκυστικές στους χρήστες.
Ποιότητα εικόνας
Η ποιότητας των εικόνων που χρησιμοποιούμε είναι θεμελιώδους σημασίας. Η χρήση εικόνων κακής ποιότητας:

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


Διαστάσεις εικόνας
Η κάθε εικόνα που ανεβάζουμε στο site μας δε θα πρέπει να έχει διαστάσεις μεγαλύτερες από 1000px * 800px.
Εικόνες με μεγαλύτερο μέγεθος επιβαρύνουν το χρόνο φόρτωσης των σελίδων και δεν προσφέρουν κάτι παραπάνω στον επισκέπτη.
Μπορούμε να μειώσουμε το μέγεθος μιας εικόνας αλλα όχι να το αυξήσουμε.
Μια εικόνα με διαστάσεις μεγαλύτερες απ” όσο χρειαζόμαστε μπορεί να σμικρυνθεί χωρίς να χάσει την ποιότητά της. Για να μικρύνουμε μια εικόνα με σωστό τρόπο θα πρέπει να εφαρμόσουμε σ’αυτή μια διαδικασία που ονομάζεται Crop.


ΠΗΓΗ
Δεκεμβρίου 13, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Ένα apple μενού για το blog και το site σας

Written By Greek Port on Τετάρτη, 11 Δεκεμβρίου 2013 | Δεκεμβρίου 11, 2013



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

<style>
/* foulscode.blogspot.gr */
.old {
       width: 960px;
       height: auto;
}
.old ul {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
}
.old ul li {
    float: left;
    list-style: none;
}
.old ul li a {
    font: bold 12px/100% "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    padding: 11px 35px;
    text-decoration: none;
    color: rgba(0,0,0,.8);
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    background: -webkit-linear-gradient(top, #cacaca, #848484);
    background: -moz-linear-gradient(top, #cacaca, #848484);
    background: -ms-linear-gradient(top, #cacaca, #848484);
    background: -o-linear-gradient(top, #cacaca, #848484);
    background: linear-gradient(to bottom, #cacaca, #848484);
}
.old ul li a:before {
    border-left: 1px solid rgba(255,255,255,.1);  
    content: "";
    padding: 10px 35px;
    margin: 0 -35px;
    position: relative;
}
.old ul li a:after {
    border-right: 1px solid rgba(255,255,255,.1);
        box-shadow: 1px 0px 0px rgba(0,0,0,.5);
    content: "";
    padding: 10px 35px;
    margin: 0 -35px;
    position: relative;
}
.old ul li:last-child a:after {border: none; box-shadow: none;}
.old ul li:first-child a {-moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;}
.old ul li:last-child a {-moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;}
.old ul li a:hover {
    background: -webkit-linear-gradient(top,  #929292,  #535353);
    background: -moz-linear-gradient(top,  #929292,  #535353);
    background: -ms-linear-gradient(top,  #929292,  #535353);
    background: -o-linear-gradient(top,  #929292,  #535353);
    background: linear-gradient(to bottom,  #929292,  #535353);
}
.old ul li a:active {
    -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
    box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
}
/* foulscode.blogspot.gr */
</style>
    <div class="old">
        <ul>
            <li><a href="URL">Home</a></li>
            <li><a href="URL">Store</a></li>
            <li><a href="URL">Mac</a></li>
            <li><a href="URL">iPod</a></li>
            <li><a href="URL">iPhone</a></li>
            <li><a href="URL">iPad</a></li>
            <li><a href="URL">iTunes</a></li>
            <li><a href="URL">Support</a></li>
        </ul>
    </div>


DEMO LIVE

Στην συνεχεια προσθέστε με τα μαρκαρισμένα url και τους τίλους και αυτό ήταν!
Δεκεμβρίου 11, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Δωρεάν e-book για εκμάθηση της γραμμής εντολών του Linux!ux


To e-book "The Linux Command Line" αναβαθμίστηκε, έβγαλε δεύτερη έκδοση και είναι διαθέσιμο για δωρεάν λήψη από όποιον έχει περιέργεια να μάθει τα μυστικά του κελύφους του Linux (linux shell).


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

>>> Το e-book είναι διαθέσιμο δωρεάν (άδεια Creative Commons) σε μορφή PDF από εδώ


ΠΗΓΗ
Δεκεμβρίου 11, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Σύγκριση Αδειών Ανοικτού Κώδικα – Επιλέξετε Αδεια




Μόλις δημιουργήσατε μια open source εφαρμογή και αποφασίσατε να την μοιραστείτε με την κοινότητα.  Η “άδεια” είναι πολύ σημαντική για το μέλλον της.

Το Choose A License είναι ένας πολύ εύχρηστος δικτυακός τόπος, ο οποίος δημιουργήθηκε από την ομάδα GitHub, και σας βοηθά να αποφασίσετε ποια άδεια είναι καλύτερη για το έργο σας”.

Ενώ στην αρχική σελίδα της εστιάζει στις 3 δημοφιλείς άδειες χρήσης (MIT, GPL, Apache) , μια υπο-σελίδα απαριθμεί πολλές άλλες.





Η σελίδα παρουσιάζει με επιτυχία “τι επιτρέπεται και τι όχι για κάθε άδεια και εμφανίζει το πλήρες νομικό κείμενο, κατόπιν αιτήματος.

Υ.Γ. Ο κωδικός για το site είναι ανοικτού κώδικα, καθώς επίσης μπορείτε να κάνετε fork ή να συμβάλετε στη βελτίωση της.

Website: http://choosealicense.com/


ΠΗΓΗ
Δεκεμβρίου 11, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Εικόνα στο υπόβαθρο


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



<style>
/* foulscode.blogspot.gr */
h1 {
    font-family: "Lobster", sans-serif;
    font-size: 96px;
    font-weight: bold;
    text-align: center;
}
.mask-galaxy {
    background: url(http://www.jpl.nasa.gov/spaceimages/v2/getMediumImage.php?id=PIA03519) center center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-animation: travelGalaxy 10s linear infinite;
    -moz-animation: travelGalaxy 10s linear infinite;
    -moz-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-animation: travelGalaxy 10s linear infinite;
    -o-text-fill-color: transparent;
    -o-background-clip: text;
    -o-animation: travelGalaxy 10s linear infinite;
}
@-webkit-keyframes travelGalaxy {
    0% {background-position: right bottom;}
    100% {background-position: left top;}
}
@-moz-keyframes travelGalaxy {
    0% {background-position: right bottom;}
    100% {background-position: left top;}
}
/* foulscode.blogspot.gr */
</style><link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin" rel="stylesheet" type="text/css">
<article class="mask-galaxy">
    <h1>Fouls Code</h1>
</article>


DEMO LIVE

Μπορείτε να αντικαταστήσετε τα μαρκαρισμένα γράμματα .
Δεκεμβρίου 11, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Ένας Loaders για το site και blog σας!

Written By Greek Port on Παρασκευή, 6 Δεκεμβρίου 2013 | Δεκεμβρίου 06, 2013



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


<style>
/* foulscode */
body {
  font-size: 50px;
  text-align: center;
  padding: 50px;
}
div {
  position: absolute;
  left: 50%;
  width: 50px;
  height: 200px;
  opacity: 0.25;
  -webkit-animation: whoosh 0.6s infinite;
}
.one {background-color: #000;-webkit-transform:rotate(30deg);animation-delay: 0.1s;}
.two {background-color: #000;-webkit-transform:rotate(60deg);animation-delay: 0.2s;}
.three {background-color: #000;-webkit-transform:rotate(90deg);animation-delay: 0.3s;}
.four {background-color: #000;-webkit-transform:rotate(120deg);animation-delay: 0.4s;}
.five {background-color: #000;-webkit-transform:rotate(150deg);animation-delay: 0.5s;}
.six {background-color: #000;-webkit-transform:rotate(180deg);animation-delay: 0.6s;}
@-webkit-keyframes whoosh {
  0%, 100%  {}
  50% {-webkit-border-radius: 50px;
      border-radius: 50px;
      opacity:0.3;
  }
}
/* foulscode */
</style>
<p>The Thing</p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>


Και μετά αποθήκευση!

Δεκεμβρίου 06, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Αναγνώρισης Ομιλίας Με JavaScript – annyang

Written By Greek Port on Τετάρτη, 4 Δεκεμβρίου 2013 | Δεκεμβρίου 04, 2013



Η αναγνώριση ομιλίας υπάρχει πολύ καιρό, αλλά μέχρι να ενσωματωθεί σε κινητά (όπως το Siri) την συναντούσαμε σπάνια …

Η annyang είναι μια αυτόνομη βιβλιοθήκη JavaScript που φέρνει αυτή τη λειτουργικότητα σε ιστοσελίδες.

Η βιβλιοθήκη είναι 1kb και χρησιμοποιεί το Web Speech API (υποστηρίζεται από τον Chrome) στο backend.




Δεν είναι περίπλοκη και λειτουργεί με απλές, φιλικές προς το χρήστη λειτουργίες.

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

Απαιτήσεις: No Requirements
Συμβατότητα: Chrome



Δεκεμβρίου 04, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Book/ ∆ίκτυα Yπολογιστών I



ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ
Σχολή Θετικών Επιστημών και Τεχνολογίας
Πρόγραμμα Σπουδών
ΠΛΗΡΟΦΟΡΙΚΗ
Θεματική Eνότητα
BΑΣΙΚΑ ΖΗΤΗΜΑΤΑ ∆ΙΚΤΥΩΝ Η/Υ
Tόμος Γ'
∆ίκτυα Yπολογιστών I
ΓΙΩΡΓΟΣ ΦΟΥΣΚΑΣ
Eιδικός Λειτουργικός Eπιστήμονας ITE – EIXHMYΘ
ΠATPA 2002
ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ
Σχολή Θετικών Επιστημών και Τεχνολογίας
Πρόγραμμα Σπουδών
ΠΛHPOΦOPIKH
Θεματική Ενότητα
BAΣIKA ZHTHMATA ∆IKTYΩN H/Y
Τόμος Γ'
∆ίκτυα Yπολογιστών I
Συγγραφή
ΓIΩPΓOΣ ΦOYΣKAΣ
Eιδικός Λειτουργικός Eπιστήμονας ITE – EIXHMYΘ
Κριτική Ανάγνωση
KΩNΣTANTINOΣ ΠAΠAN∆PEOY
∆ιδάκτωρ Tηλεπληροφορικής
∆ρ ΦΩTHΣ ΛIOTOΠOYΛOΣ
Mηχανικός H/Y &amp; Πληροφορικής
∆ρ MIXAHΛ ΠAPAΣKEYAΣ
Hλεκτρολόγος Mηχανικός &amp; Tεχνολογίας Yπολογιστών
Ακαδημαϊκός Υπεύθυνος για την επιστημονική επιμέλεια του τόμου
ΠAYΛOΣ ΣΠYPAKHΣ
Kαθηγητής Tμήματος Mηχανικών H/Y &amp; Πληροφορικής
Πανεπιστημίου Πατρών
Επιμέλεια στη μέθοδο της εκπαίδευσης από απόσταση
IΩANNHΣ KOYTΣONIKOΣ
Γλωσσική Επιμέλεια
PΩΞANH KATΣH
Τεχνική Επιμέλεια, Καλλιτεχνική Επιμέλεια, Σελιδοποίηση
TYPORAMA
Συντονισμός ανάπτυξης εκπαιδευτικού υλικού και γενική επιμέλεια των εκδόσεων
ΟΜΑ∆Α ΕΚΤΕΛΕΣΗΣ ΕΡΓΟΥ ΕΑΠ / 2002
ISBN: 960–538–468–X
Kωδικός Έκδοσης: ΠΛH 22/3
Copyright 2000 για την Ελλάδα και όλο τον κόσμο
ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ
Οδός Παπαφλέσσα &amp; Υψηλάντη, 26222 Πάτρα – Τηλ: (2610) 314094, 314206 Φαξ: (2610) 317244
Σύμφωνα με το Ν. 2121/1993, απαγορεύεται η συνολική ή αποσπασματική αναδημοσίευση του βιβλίου αυτού
ή η αναπαραγωγή του με οποιοδήποτε μέσο χωρίς την άδεια του εκδότη.

Δεκεμβρίου 04, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Φόρτιση για περισσότερα θέματα!

Written By Greek Port on Τρίτη, 3 Δεκεμβρίου 2013 | Δεκεμβρίου 03, 2013




Νομίζω ότι είναι κάτι που θα σας που τώρα τελευταία το έχετε δει σε διαφορα blog, αντικαταστεί την επομενη σελίδα με τα θέματα πολύ απλά με το πάτημα του Load more post μια σειρά από θέματα εμφανίζεται κάτω από τα προηγούμενα πολύ πιο γρήγορα έτσι ώστε να σας ευκολύνει περισσότερο.


Το μονο που πρέπει να κάνετε είναι να κάνετε αντιγραφή επικόλληση τον παρακάτω κώδικα:


<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/4153098131/infinite-scroll-for-blogger-blogs.js' type='text/javascript'/></script>
<small><a href="http://www.foulscode/" target-"_blank">foulscode</a> | <a href="http://www.foulscode/" target="_blank">Spice Up Your Blog</a></small>


Και μετά μπορείτε να κάνετε αποθήκευση!


Δεκεμβρίου 03, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Iconset: Hand Stitched Social Icons by DesignBolts (20 icons)

Δεκεμβρίου 03, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Pure CSS Elegant Share buttons for Blogger




Πηγαίνουμε : Πρότυπο > Επεξεργασία HTML και κάνουμε αναζήτηση πατώντας Ctrl + F  τον κώδικα  ]]></b:skin>  και ακριβώς πάνω από το ]]></b:skin> προσθέστε τον παρακάτω κώδικα:


/* foulscode.blogspot.gr */
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font: 2.5em/2em 'zocial', sans-serif;
  color: white;
  line-height: 2.2;
}
.post-social .facebook {
  background: #3B5998;
}
.post-social .twitter {
  background: #4099FF;
}
.post-social .googleplus {
  background: #db5a3c;
}
.post-social .social {
  float: left;
}
.post-social .zocial-facebook {
  margin: 0 15px;
}
.post-social .zocial-twitter {
  margin: 0 25px;
}
.post-social .zocial-googleplus {
  margin: 0 25px;
}
.post-social li {
  min-width: 180px;
  width: 210px;
  height: 80px;
  cursor: pointer;
  list-style: none;
  text-align: left;
  float: left;
}
.post-social li:hover [class*="zocial-"]:before {
  opacity: 0.5;
  text-align: right;
}
.post-social li:hover iframe {
  opacity: 1;
}
.post-social li iframe {
  margin-top: 30px !important;
  opacity: 0;
  transition: all .3s ease-in-out;
}
.post-social li .fb_ltr {
  margin: 30px 20px !important;
}
/* foulscode.blogspot.gr */


Μετά την εύρεση του κώδικα <data:post.body/> επικολλήστε τον παρακάτω κώδικα ακριβώς κάτω από αυτό:


<ul class="post-social">
  <li class="facebook">
      <span class="social zocial-facebook"></span>
    <div class="fb-like" data-send="false" data-layout="button_count" data-width="250" data-show-faces="true"></div>
  </li>
  <li class="twitter">
      <span class="social zocial-twitter"></span>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="Rushtips">Tweet</a>
  </li>
  <li class="googleplus">
        <span class="social zocial-googleplus"></span>
    <g:plusone size="medium"></g:plusone>
  </li>
</ul>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<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>


LIVE DEMO

Είστε έτοιμη να κάνετε αποθήκευση!
Δεκεμβρίου 03, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Social Share Widget For Blogger




Πηγαίνουμε : Πρότυπο > Επεξεργασία HTML και κάνουμε αναζήτηση πατώντας Ctrl + F  τον κώδικα  ]]></b:skin>  και ακριβώς πάνω από το ]]></b:skin> προσθέστε τον παρακάτω κώδικα:

/* foulscode.blogspot.gr */
.entry-social{
 overflow: hidden;
 margin-bottom: 20px;
}
.entry-social a{
 display: block;
 padding-left: 20px;
 color: #FFFFFF !important;
 font-weight: 300;
font-size:12px;
}
.entry-social div{
 float: left;
 margin-right: 5px;
 width: 95px;
}
.entry-social div a{
 background-color: #FF7F1A;
}
.entry-social .delicious{
 width: 98px;
 margin-right: 0;
}
.entry-social .fb a{
 padding: 7px 10px 7px 26px;
 background-image: url('http://picoolio.net/images/2013/11/29/fb14.png');
 background-repeat: no-repeat;
 background-position: 10px center;
}
.entry-social .fb a:hover{
 background-color: #324b81;
}
.entry-social .twitter a{
 padding: 7px 10px 7px 32px;
 background-image: url('http://picoolio.net/images/2013/11/29/twitter14.png');
 background-repeat: no-repeat;
 background-position: 8px center;
}
.entry-social .twitter a:hover{
 background-color: #01A7dE;
}
.entry-social .gplus a{
 padding: 7px 10px 7px 32px;
 background-image: url('http://picoolio.net/images/2013/11/29/gplus14.png');
 background-repeat: no-repeat;
 background-position: 10px center;
}
.entry-social .gplus a:hover{
 background-color: #BA3227;
}
.entry-social .linkedin a{
 padding: 7px 10px 7px 35px;
 background-image: url('http://picoolio.net/images/2013/11/29/linkedin14.png');
 background-repeat: no-repeat;
 background-position: 10px center;
}
.entry-social .linkedin a:hover{
 background-color: #136F9B;
}
.entry-social .pinterest a{
 padding: 7px 10px 7px 30px;
 background-image: url('http://picoolio.net/images/2013/11/29/pinterest14.png');
 background-repeat: no-repeat;
 background-position: 10px center;
}
.entry-social .pinterest a:hover{
 background-color: #B01C23;
}
.entry-social .delicious a{
 padding: 7px 10px 7px 32px;
 background-image: url('http://picoolio.net/images/2013/11/29/delicious14.png');
 background-repeat: no-repeat;
 background-position: 10px center;
}
.entry-social .delicious a:hover{
 background-color: #2963B8;
}
/* foulscode.blogspot.gr */


Μετά την εύρεση του κώδικα <data:post.body/> επικολλήστε τον παρακάτω κώδικα ακριβώς κάτω από αυτό:


</style>
<div class="entry-social">
<div class="fb">
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'>Facebook</a>
  </div>
<div class="twitter">
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'>Twitter</a>
  </div>
<div class="gplus">
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' target='_blank'>Google+</a>
  </div>
<div class="linkedin">
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'>Linkedin</a>
  </div>
</div>
<!-- /foulscode -->

LIVE DEMO


Μην ξεχνάτε πως μπορείτε να αλλάξετε χρώμα αν δεν ταιριάζει το πορτοκαλι στο blog σας με την επεξεργασία του κώδικα css!

Είστε έτοιμη να κάνετε αποθήκευση!
Δεκεμβρίου 03, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Αριθμημένες Δημοφιλή Αναρτήσεις για το Blogger

Written By Greek Port on Δευτέρα, 2 Δεκεμβρίου 2013 | Δεκεμβρίου 02, 2013



Όπως βλέπετε στην εικόνα παραπάνω είναι ένα όμορφο widget για της δημοφιλές αναρτήσεις αριθμημένες.

Πάμε να δούμε πως θα το βάλουμε στο μπλόγκερ μας!

Πηγαίνουμε : Πρότυπο > Επεξεργασία HTML και κάνουμε αναζήτηση πατώντας Ctrl + F  τον κώδικα  ]]></b:skin>  και ακριβώς πάνω από το ]]></b:skin> προσθέστε τον παρακάτω κώδικα:


.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
/* foulscode.blogspot.gr */
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;


Τώρα μπορείτε να κάνετε αποθήκευση!


Δεκεμβρίου 02, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Social Subscribe widget




Ένα όμορφο Social Subscribe widget για το site και το blog σας που τον τελευταίο καιρό μπορεί να το είδατε σε άλλες σελίδες, τώρα μπορείτε να το βάλετε και εσείς στην δικη σας σελίδα η blog.

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


<style>
/* foulscode.blogspot.gr */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
html, body {
    min-height: 100%;
}
body {
    background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
   margin: 0;
  }
#buttons {
    padding: 2px 2px;
    width: 330px;
    overflow: hidden;
 
}

.button {
    background: #DCE0E0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    margin: 4px;
    overflow: hidden;
    width: 156px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.icon {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    text-align: center;
}
.icon i {
    color: #fff;
    line-height: 42px;
}
.slide {
    z-index: 2;
    display: block;
    margin: 0;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 118px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}
.slide p {
    font-family: Open Sans;
    font-weight: 400;
    border-left: 1px solid #fff;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 16px;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
}
.button .slide {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.facebook iframe {
    display: block;
    position: absolute;
    right: 23px;
    top: 10px;
    z-index: 1;
}
.twitter iframe {
    width: 90px !important;
    right: 5px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}
.google #___follow_0 {
    width: 70px !important;
    top: 10px;
    right: 45px;
    position: absolute;
    display: block;
    z-index: 1;
}
.youtube #___ytsubscribe_0 {
    top: 10px;
    right: 1px;
    position: absolute;
    display: block;
    z-index: 1;
}
.facebook:hover .slide {
    left: 180px;
}
.twitter:hover .slide {
    top: -40px;
}
.google:hover .slide {
    bottom: -40px;
}
.youtube:hover .slide {
    left: -150px;
}
.facebook .icon, .facebook .slide {
    background: #305c99;
}
.twitter .icon, .twitter .slide {
    background: #00cdff;
}
.google .icon, .google .slide {
    background: #d24228;
}
.youtube .icon, .youtube .slide {
    background: #b31217;
}
/* foulscode.blogspot.gr */
</style>
<div id="buttons">
  <div class="facebook button">
    <i class="icon">
      <i class="fa fa-facebook"></i>
  </i>
  <div class="slide">
    <p>
      Facebook
    </p>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FFoulscode&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true">
  </iframe>
  </div>


  <div class="google button">
    <i class="icon">
      <i class="fa fa-google-plus"></i>
  </i>
  <div class="slide">
    <p>
      Google+
    </p>
  </div>
  <!-- Place this tag where you want the +1 button to render. -->
  <div class="g-follow" data-annotation="bubble" data-href="https://plus.google.com/u/0/109721759993422268214/" data-rel="publisher"></div>

  <!-- Place this tag after the last +1 button tag. -->
  <script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
  </div>
  <div class="youtube button">
    <i class="icon">
      <i class="fa fa-youtube"></i>
  </i>
  <div class="slide">
    <p>
      YouTube
    </p>
  </div>
  <div class="g-ytsubscribe" data-channel="techpingo" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
    <script src="https://apis.google.com/js/platform.js"></script>
<script>
  function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
      // Add code to handle subscribe event.
    } else if (payload.eventType == 'unsubscribe') {
      // Add code to handle unsubscribe event.
    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>
</div>
<div class="twitter button">
    <i class="icon">
      <i class="fa fa-twitter"></i>
  </i>
  <div class="slide">
    <p>
      Twitter
    </p>
  </div>
  <a href="https://twitter.com/foulscode" class="twitter-follow-button" data-show-count="false" data-via="mariuCSS">
    Tweet
  </a>
  <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  </script>
  </div>

DEMO LIVE


Και αφού πρώτα αντικαταστήσετε τα μαρκαρισμένα γράμματα με τα δικάσας link μπορείτε να κάνετε αποθήκευση.
Δεκεμβρίου 02, 2013 | 0 σχόλια | Διαβάστε περισσότερα
 
berita unik