Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Προβολή αναρτήσεων από Δεκέμβριος, 2013

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

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


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

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


Πηγή

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

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

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


Χιονια στο blog σας.
Αντιγραφή επικόλληση τον παρακάτω κώδικα:
<script src="http://scriptsrb.googlecode.com/files/snoweffect1.js" type="text/javascript"></script>

LIVE DEMO
Και αποθήκευση και αυτό ήταν!

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

Πρόσφατες δημοσιεύσεις στο 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


Αντικαταστήστε τα μαρκαρισμένα γράμματα…

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

Γιατί να τα ενσωματώσει κανείς;
Για έναν και βασικό λόγο: Για να διατηρήσετε τον ιστότοπό σας "καθαρό" από 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&u…

CSS Spotlight Menu

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.3…

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

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


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

Παράλληλα, ξεκίνησε να δημιουργείται η πρώτη «πρόχειρη» (draft) έκδοση της HTML 5.1, που θα περιλαμβάνει νέ…

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

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

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

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

Η κάθε εικόνα πρέπει να συμβαδίζει με την αισθητική …

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

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

<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-ri…

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

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


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

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

ΠΗΓΗ

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

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

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

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





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

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

Website: http://choosealicense.com/


ΠΗΓΗ

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

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



<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.…

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

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

<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>
&l…

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

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

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

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




Δεν είναι περίπλοκη και λειτουργεί με απλές, φιλικές προς το χρήστη λειτουργίες.
Μια σελίδα τροφοδοτείται από τη βιβλιοθήκη ζητά την άδεια να χρησιμοποιήσει το μικρόφωνο και, όταν επιτρέπεται, ο κώδικας ξεκινά για να ακούτε για τις εισροές φωνής (και να προκαλέσει τα γεγονότα όταν χρειάζεται).
Απαιτήσεις: No Requirements Συμβατότητα: Chrome Website: https://www.talater.com/annyang/ Download: https://github.com/TalAter/annyang/

ΠΗΓΗ

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 Τεχνική Επιμέλεια, Καλλιτεχνική Ε…

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

Νομίζω ότι είναι κάτι που θα σας που τώρα τελευταία το έχετε δει σε διαφορα 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>

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


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

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 ifra…

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: 8…

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

Όπως βλέπετε στην εικόνα παραπάνω είναι ένα όμορφο 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 {
 …

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;
    -…