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

Αναρτήσεις

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

Τι είναι το Responsive Web Design και γιατί το χρειάζεστε!

Το responsive web design είναι ένας σχετικά καινούριος όρος. Για πρώτη φορά αναφέρθηκε από τον Ethan Marcotte στο άρθρο του με τίτλο “Responsive Web Design”. Στα ελληνικά, η λέξη responsive σημαίνει ανταπόκριση, απάντηση, οπότε μπορούμε να πούμε ότι η τεχνική αυτή βασίζεται στην ανίχνευση κάποιων μεταβλητών και με βάση τις τιμές τους υπάρχει και ανάλογη ανταπόκριση. Στο web, θα ορίζαμε το responsive web design ως τη διαδικασία σχεδιασμού και κατασκευής ιστοσελίδων οι οποίες ανιχνεύουν διάφορες μεταβλητές από το εξωτερικό και εσωτερικό περιβάλλον και ανταποκρίνονται ανάλογα προς τον επισκέπτη. Στόχος είναι η δημιουργία μίας «έξυπνης» ιστοσελίδας η όποια θα προσαρμόζει το μέγεθος και τα βασικά χαρακτηριστικά της (μενού, εικόνες, κείμενο) ανάλογα με τις διαστάσεις της οθόνης της συσκευής του χρήστη! Το πρόβλημα Τα τελευταία χρόνια αυξάνεται με γοργούς ρυθμούς η χρήση των tablets και των κινητών συσκευών για την πλοήγηση στο διαδίκτυο από ότι παλαιότερα που χρησιμοποιούσαμε …

HTML Basics: Τα μοντέλα περιεχομένου

Στις προηγούμενες εκδόσεις HTML, υπήρχαν 2 κατηγορίες περιεχομένου. Υπήρχαν τα επίπεδα Block και το επίπεδο Inline. Τα block σε ένα έγγραφο HTML κατείχαν την δικιά τους γραμμή μέσα στο έγγραφο ενώ αντίθετα τα στοιχεία inline βρίσκονταν μέσα στα στοιχεία Block. Στην HTML5 επεκτάθηκε αυτή η νοοτροπία και διασπάστηκαν τα στοιχεία σε 7 κατηγορίες περιεχομένου. Με αυτό τον τρόπο μπορούμε να γράψουμε κώδικα σήμανσης HTML ο οποίος έχει νόημα και δομή.





Πηγή

Very simple CSS accordion

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


 <style>
/* foulscode.blogspor.gr */
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700|Montserrat:400,700|Droid+Serif:400,400italic,700,700italic);

*{
  margin: 0; border: 0;
}

html{
  -font-smoothing: antialiased;
  height: 100%;
    background: white;
    background: radial-gradient(circle, #fff 20%, #ccc);
    background-size: cover;
}

h1{
  font-weight: lighter;
  margin: 0 auto;
  text-align: center;
  margin-top: 20%
}
p{

  font-family: 'Droid Serif';
  font-style: italic;
  color: #666;
  text-align: center;
  margin-top: 1%
}

Body{
  font-family: 'Montserrat';
}

#container{
  width: 400px;
  height: auto;
  margin: 0 auto;
  margin-top: 3%;
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid #bdbdbd;
}

.accordion label{
  display:block;
  background-color: #eeeeee;
  padding: 10px;
  color: #424242;
  text-shadow: 0 0 2px rgba(255,255,255,0.6);
  cursor: pointer;
  border-bottom: 1px solid #bdbdbd…

5 Big Social Icons

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

<style>
/* foulscode.blogspot.gr */
#social{
  width: 300px;
  padding:20px;
  margin:0 auto;
}

#social .fa{
color:rgb(0,153,255); /*change colour of icons*/

}

#social .fa:hover{
color:rgb(153,204,255);

}
/* foulscode.blogspot.gr */
</style>
<html>
<head>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
   <body>
     <div id="social">
        <i class="fa fa-facebook-square fa-4x"></i> <!-- range from fa-1x for small icon to 5x for larger icon -->
        <i class="fa fa-twitter-square fa-4x"></i>  <!-- range from fa-1x for small icon to 5x for larger icon -->
        <i class="fa fa-linkedin-square fa-4x"></i> <!-- range from fa-1x for small icon to 5x for larger icon -->
        <i class="fa fa-pinterest-square fa-4x"></i&…

NeatNait social share buttons

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

<style>
/* foulscode.blogspot.gr */
@import url(http://fonts.googleapis.com/css?family=Dosis);

body{
  background:#ddd;
  margin:20px;
  text-align:center;
}

ul{
  list-style:none;
  margin:auto;
  display:inline-block;
}

ul li{
  width:110px;
  height:130px;
  float:left;
  background:#FDFCFA;
  position:relative;
  transition: all .5s ease;
  overflow:hidden;
}

li h1{
  font-family: 'Dosis', sans-serif;
  font-weight:normal;
  text-align:center;
  line-height:60px;
  font-size:30px;
  transition: all .5s ease;
}

li:hover{
  box-shadow:inset 0 0 10px #2D2D2D; 
}

li:hover h1{
  transform: scale(.8) translateY(-5px);
}

li:hover .button{
  transform: translateY(0px);
}

li .button{ 
  height:50px;
  transform: translateY(25px);
  text-align:center;
  padding:5px 10px;
  padding-bottom:50px;
  color:white;
  width:100%;
  position:absolute;
  bottom:0;
  background:#2D2D2D;
  box-sizing:border-box;
  transition: all .5s .5s ease;

Pure CSS3 Tabs

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


<style>
/* foulscode.blogspot.gr */

body {
    font-family: Cambria, Arial;
    background: #333;
}
.tabs {
    width: 100%;
    max-width: 600px;
    margin: 100px auto;
}
input {
    opacity: 0;
}
label {
    cursor: pointer;
    background: -webkit-linear-gradient(#666, #555);
    color: #eee;
    border-radius: 5px 5px 0 0;
    padding: 1.5% 3%;
    float: left;
    margin-right: 2px;
    font: italic 1em cambria;
}
label:hover {
    background: -webkit-linear-gradient(#777, #666);
}
input:checked + label {
    background: #fff;
    color: #333;
}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child, .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
    opacity: 1;
    -webkit-transition: .3s;
}
.panels {
    float: left;
    clear: both;
    position: relative;
    width: 100%;
    background: #fff;
    border-radius…

Online τα γραπτά και οι σημειώσεις του Νεύτωνα

Την ψηφιοποίηση μεγάλου μέρους των γραπτών του Ισαάκ Νεύτωνα ολοκλήρωσε η ψηφιακή βιβλιοθήκη του πανεπιστημίου του Κέμπριτζ, δίνοντας ελεύθερη online πρόσβαση στο έργο ενός από τους μεγαλύτερους επιστήμονες της ιστορίας. Μεταξύ των διαθέσιμων έργων βρίσκεται το περίφημο Principia Mathematica, αλλά και πολλά ακόμη βιβλία και σημειώσεις που ο συνολικός τους όγκος φτάνει τις μερικές χιλιάδες σελίδες.

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

cudl.lib.cam.ac.uk/collecti…

Transparent Menu Bar

Άλλο ένα εξαιρετικά όμορφο μενού για το blog και site σας!


<style>
/* http://foulscode.blogspot.gr */
@import url(www.foulscode.blogspot.gr);
html, body {
  height: 100%;
}
body {
  background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
}
nav {
  max-width: 960px;
  /* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  /* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
  padding: 75px 0;
}
nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px …

Menu Tabs

<style>
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul { overflow:hidden; float:left; padding-left:48px;}
#tabbed {
width:80%;
min-width:400px;
margin:0 auto;
padding-top:68px;
border-bottom:4px solid #8fa11d;
overflow:hidden;
}
li {
display: block;
float: right;
padding: 10px 24px 8px;
background-color: #6a7a0f;
border-radius:8px 8px 0 0;
margin-right:46px;
z-index:2;
position:relative;
cursor:pointer;
color:#cfd08b;
text-transform:uppercase;
font:bold 12px/20px Arial, Helvetica, sans-serif;
text-shadow:rgba(0,0,0,.16) -1px -1px;
}
li:before, li:after {
display:block; content:" "; position:absolute;  top:0; height:100%; width:44px; background-color: #6a7a0f;
}
li:before {
right:-24px;
transform: skew(30deg, 0deg) ;
-webkit-transform: skew(30deg, 0deg) ;
-moz-transform: skew(30deg, 0deg) ;
-o-transform: skew(30deg, 0deg) ;
-ms-transform: skew(30deg, 0deg) ;
border-radius:0 8px 0 0;
box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
}
li:after {
left:-24px;
transform: skew(-30deg…

Another Simple CSS3 Dropdown Menu

Ένα πολύ όμορφο μενού δείτε το Demo


<style>
/* www.foulscode.blogspot.gr */
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #ECF0F1;
}
ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #2C3E50;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
}
ul li:hover {
  background: #1abc9c;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-tr…

Πρωτοσέλιδα Αθλητικών Εφημερίδων

Κάτι πολύ απλό αλλα για κάποιους πολύ χρήσιμο.
                                 αντιγραφή επικόλληση τον παρακάτω κώδικα! 

<iframe scrolling="no" width="320" frameborder="0" style="border:0; width: 320px; height: 550px; margin:0 auto; padding:0;" src="http://services.wedia.gr/gazzettafpwidget/" height="550"></iframe>

DEMO

Recent Post Widgets for Blogger

Γεια στους αναγνώστες αν και λίγο περασμένη η ώρα για εμενα πρώτα ήθελα να σας δείξω αυτό να ομορφύνει το blog σας. Το μονο που πρέπει είναι να ανοίξετε ένα καινούριο   1

2



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

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://foulscode.blogspot.com">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?f…

Μουσικοί και DeepWeb

Σκεφτείτε το Διαδίκτυο σαν την επιφάνεια της Γης. Υπάρχουν λοιπόν τα κομμάτια του ιστού τα οποία ο καθένας γνωρίζει. Ναι, αλλά, γύρω από αυτά -μην ξεχνάμε πως- υπάρχουν και οι αχανείς εκτάσεις του ωκεανού που αντιπροσωπεύουν το πολύ δημοφιλές “Deep Web”. Ο λόγος για τις ιστοσελίδες που δεν εμφανίζονται στις τυποποιημένες εμπορικές μηχανές αναζήτησης. Ωστόσο, μέσα σε αυτήν την άβυσσο των αχαρτογράφητων νερών, υπάρχει ένα μέρος που αναλαμβάνει επαναστατικές τεχνολογικές εξελίξεις. Πρόκειται για το γνωστό πλέον σε όλους μας “darknet” στο οποίο μπορεί κάποιος να περιηγηθεί μόνον με την χρήση υπηρεσιών όπως το Tor (The Onion Router) ή το Freenet, οι οποίες βασίζονται στην ανωνυμία και έχουν  σχεδιαστεί με τέτοιον τρόπο, ώστε οι επισκέπτες και οι ιστοσελίδες (των οποίων οι καταλήξεις είναι συνήθως .onion) να μην εντοπίζονται εύκολα. Η αναζήτηση στο διαδίκτυο σήμερα, μπορεί να συγκριθεί με το να προσπαθήσουμε να απλώσουμε ένα δίχτυ σε όλη την επιφάνεια ενός ωκεανού. Ενώ ένα μεγάλο μέρος μπο…

7 μύθοι του SEO που πρέπει να ξεχάσετε το 2014!

Μύθοι στο χώρο του SEO πάντα υπήρχαν και μάλιστα αρκετοί. Κανείς δεν μπορεί να το αρνηθεί. Με τις τελευταίες και περισσότερο συζητημένες ενημερώσεις του αλγόριθμου της Google (Panda, Penguin και Hummingbird) ο αριθμός τους έχει αυξηθεί σημαντικά και εύκολα μπορούν να εύκολα παραπλανήσουν κάποιον που δεν είναι καλά διαβασμένος. Ας δούμε, λοιπόν, μερικούς από τους μύθους του SEO που σίγουρα δεν πρέπει να πιστεύετε εν έτει 2014. Μύθος #1: Το link building έχει πεθάνει Πρακτικά η καλή κατάταξη μιας σελίδας χωρίς κανένα link είναι (σχεδόν) αδύνατη, ειδικά σε brands και λέξεις-κλειδιά με μεγάλο ανταγωνισμό. Το link building μπορεί να προκαλέσει προβλήματα στο μέλλον αν μοναδικός στόχος σας είναι μερικά links χωρίς πραγματική ουσία. Το σωστό link building δεν είναι εύκολο. Χρειάζεστε links, όλες οι ιστοσελίδες τα χρειάζονται (και όχι μόνο για την κατάταξη στα αποτελέσματα της Google). Επομένως πρέπει να συνεχίστε την προσπάθεια απόκτησης τους, χωρίς όμως ποτέ να ξεχνάτε μερικούς κανόνες του…

Menu Hover Effect

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


<style>
//@import url(http://foulscode.blogspot.gr);
@mixin va ($pos: relative, $top: 50%) {
position: $pos;
top: $top;
transform: translateY(-50%);
}
html {
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  background-color: #dc143c;
  font: normal 125%/1.5 "Avenir Next", "Source Sans Pro";
  color: rgba(#fff,1);
  text-shadow: 0 1px 1px rgba(#000,.2);
}
.nav {
  text-align: center;
  /* background-color: gold; */
  @include va;

}
.nav ul {
  display: inline-block;
  transform: translate3d(0, 0, 0);
}
.nav li {
  /* float: left; */
  display: inline-block;
}
.nav a {
  position: relative;
  display: block;
  padding: 0 40px;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  color: #fff;
}
.nav a:after {
  position: absolute;

  // This makes the 'border-width' 0, by moving its left and right side
  // to the middle. This way the animation
  // starts from the center (anchor-point) and expands ou…

Tip of the day! Πώς να κάνετε τα google maps responsive!

Καλησπέρα! Μπορείτε να ενσωματώσετε τα google map στην σελίδα σας.

Long story short: Το κλειδί εδώ είναι να συμπεριλάβετε το google map που θέλετε να κάνετε embed σε μία div μέσα πχ:

<!--GOOGLE MAPS IFRAME---> </div>

και τα css που θα γράψετε γι αυτή την div είναι τα ακόλουθα:

s_div {
position:relative; padding-bottom:75%; height:0; overflow:hidden; } .gmaps_div iframe { position:absolute; top:0; left:0; width:100%!important; height:100%!important; }  Αν κάνετε τα παραπάνω τότε τα gmaps σας θα είναι responsive!


 ΠΗΓΗ

Ο Ζαν-Λυκ Γκοντάρ μιλά για το e-book (πριν αυτό εμφανιστεί)

Ο Γάλλος σκηνοθέτης Ζαν-Λυκ Γκοντάρ είναι αγαπητός σε διαφορετικές κατηγορίες κοινού, για διαφορετικούς λόγους: Στους σινεφίλ και τους ανθρώπους του κινηματογράφου, για τις ταινίες-σταθμούς που άφησε. Στους Έλληνες, για την άρνησή του να παραστεί στο τελευταίο φεστιβάλ των Καννών ως ένδειξη στήριξης στην πληγείσα από την οικονομική κρίση Ελλάδα. Και σε ένα μεγάλο μέρος της online κοινότητας, για την υλική και ηθική συμπαράστασή του σε χρήστη που πρόσφατα κατηγορήθηκε για παράνομο κατέβασμα αρχείων προστατευμένων από το νόμο περί πνευματικής ιδιοκτησίας.
Αυτοί που μάλλον θα διαφωνήσουν μαζί του όμως, είναι οι φίλοι της ηλεκτρονικής ανάγνωσης. Κι αυτό γιατί, στα παρασκήνια συνέντευξης που είχε δώσει το 2000 στον Ρίτσαρντ Μπρόντι, ο σκηνοθέτης είχε εκφράσει τη δυσαρέσκειά του για κάτι που ακόμη δεν υπήρχε (τουλάχιστον όχι με τη μορφή που το ξέρουμε σήμερα): το e-book.

Το θέμα είχε ανακύψει σε μια προσπάθεια του Γάλλου να αναλύσει τους λόγους για τους οποίους προτιμά να επε…