27 Şubat 2017 Pazartesi

Java Script Dili

Java Script İçerik


Java Script dilinin temellerini.
Java Script'in Web sayfalarında nerede kullanılacağını
Temel bileşenler hakkında genel bilgiler
Konularından oluşmaktadır.


Js Giriş


Javascript, bir Web scripting dilidir. Crome, Firefox ve IE,vb browserlar tarafından desteklediği client (kullanıcı) taraflı (kullanıcının bilgisayarında işlem gören) bir dildir. Java programa diline benzer bir şekilde oluşturulmuş ve temelinde C ve C++ dilleri yatmaktadır.
İlk başta yalnızca Netscape tarayıcıları için tasarlanan JavaScript, daha sonra diğer tarayıcılar tarafından da desteklenen genel bir scripting dili haline gelmiştir. Şu anda Navigator 4.0 tarafından desteklenen JavaScript farklı versiyonlara sahiptir. Microsoft Internet Explorer 3.0 ile JavaScript 1.0'ı desteklemektedir.
HTML kodları arasına yerleştirilen küçük kodlardır. Tek başına .js uzantılı JavaScript kodları da yazılabilir. 

JavaScript, Java dilinin bir Light versiyonu değildir. JavaScript kendi başına bir script dilidir. Genellikle HTML sayfalarında kullanıcı kontrolleri eklemek, formları kontrol etmek, hesaplamalar yapmak gibi işler için kullanılır.


Js Nerelerde kullanılır?

JavaScript kullanımının iki ana alanı vardır:  istemci taraflı ve sunucu taraflı script yazmak. Şu anda HTML sayfalara gömülü yazılan scriptlerin çoğu JavaScript kullanılarak yazılmaktadır. Bunlar da genellikle kullanıcı bilgilerinin doğru girilip girilmediği ya da kullanıcıya veri girişinde ya da menü kullanımında seçenekler sağlamaktır.
zaman: 05:54

CSS Nedir?

CSS kullanım şekilleri

Style komutlarını üç yerde tutabiliriz:
Ayrı bir metin dosyası olarak: Bu durumda head bölümüne CSS dosyasına bağlantı kurulur. (<link type="text/css" rel="stylesheet" href="style_dosyasi.css"> gibi)
CSS kodlarını doğrudan head bölümüne yerleştirebiliriz. Örnek:<html><head><style>P {font-family:arial; font-size:12px;}</style></head>....
CSS kodlarını HTML etiketlerinin içine yerleştirebiliriz. Örnek:<p style="font-family:arial; font-size:12px;font-color:black;">...</p>

Style komutları sadece bir yerde kullanılacaksa doğrudan etiket içinde kullanılması uygun olur. Ancak pek çok yerde aynı style özellikleri kullanılacaksa, tekrardan kaçınmak için şu metodlar kullanılabilir.
Sınıf (class) tanımlanabilir: Style dosyasında etiket isminden ve . dan sonra sınıf adı yazılır ve {} işaretleri arasına style komutları yazılır. span.vurgulu {color:red; background-color:yellow;}Sayfa içinde kullanımı da aşağıdaki gibi olur:<p>Cümlede <span class="vurgulu">burası</span> çok önemli.</p>Görünüm aşağıdaki gibi olur.

id tanımlanabilir: Yukarıdaki gibidir. Ancak . yerine # kullanılır ve bir etiket ile ilişkilendirilmesi gerekmez.#vurgulu {color:red; background-color:yellow;}<p>Cümlede <span id="vurgulu">burası</span> çok önemli.</p>
Bir etikettin tümü aynı özelliklere sahip olsun istiyorsak id ve class kullanmadan doğrudan etiketi yazabiliriz.b {font-family: arial; font-size: 9pt; font-weight: bold; color: blue;} Bu durumda bütün <b></b> etiketi içerisindeki metinlerin yazıtipi mavi, boyutu 9 punto, kalın ve rengi mavi olacaktır.

AÇIKLAMA:
Burada:
Position: Katmanın yerinin neye göre belirleneceğini (absolute, pencere esas alınarak belirlensin),
Top: Pencereye göre kaç piksel aşağıda olacağını,
Left: Pencereye göre kaç piksel solda olacağını,
Width: Katmanın genişliğini,
Height: Katmanın yüksekliğini,
Background-color: Arkaplan rengini,
Overflow: Taşan metnin durumunun ne olacağını (hidden, gizli kalsın, gösterilmesin),
Z-index: Üstüste geldiğinde hangi sıra ile yerleştirileceğini (1. katmana 1 değeri verilmiştir, dolayısıyla en altta o gösterilecektir),
Padding: Katmanın kenar çizgileri ile içindeki nesneler arasında bırakılacak boşluğu,
Border: Kenar çizgilerinin kalınlık, kenarlık türü ve rengini belirtmektedir.


<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>This is a paragraph.</p>





<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
/*This is another comment*/
}
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>



<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>


<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
h3{color:red;text-align:left;font-size:8pt;}


<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>

</body>
</html>




<html>
<head>
<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>Background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>




<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>



<html>
<head>
<style type="text/css">
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
</head>

<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>



<html>
<head>
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>Example of unordered lists:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>





<html>
<head>
<style type="text/css">
table,th,td
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>



<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>

</html>





<html>
<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}   
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
 <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>



img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */}

<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">

</form>
</body>
</html>

GÖRSEL:
WYSIWYG (What you see is what you get / Ne görürseniz onu alırsınız) olarak nitelendirilen bu tür programlarda kullanıcı kendisi HTML kodu yazmaz, sayfa web browser’daki gibi görüntülenir
Kullanıcılar Word’de yazı yazar gibi sayfayı oluştururlar, HTML kodları program tarafından oluşturulur. Bu tür programlara Microsoft Frontpage, Macromedia Dreamweaver vs. örnek verilebilir. (Bu programlar çoğu zaman kod tabanlı programların yeteneklerine de sahip olabilir.)
zaman: 05:53

13 Şubat 2017 Pazartesi

HTML-5 Örnekler

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header, nav, section, article, footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>

<body>

<header>
<h1>HTML5 Skeleton</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>

<section>

<h2>Famous Cities</h2>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

</section>

<footer>
<p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

</body>
</html>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>

<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
div#header,div#footer,div#content,div#post {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul  {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
</style>
</head>
<body>

<div id="header">
<h1>Monday Times</h1>
</div>
<div id="menu">
<ul>
  <li>News</li>
  <li>Sports</li>
  <li>Weather</li>
</ul>
</div>

<div id="content">
<h2>News Section</h2>

<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>

<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>

</div>

<div id="footer">
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>



HTML Canvas

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>


HTML5 SVG

SVG açılımı Ölçeklenebilir Vektör Grafikleri
SVG Web için grafik tanımlamak için kullanılır
SVG W3C tarafından önerilmiştir.

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>




<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">
  <rect width="400" height="100"
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana"
  x="50" y="86">GS</text>
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>


HTML Video
<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<div style="text-align:center">
  <button onclick="playPause()">Play/Pause</button>
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br>
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

<script>
var myVideo = document.getElementById("video1");

function playPause() {
    if (myVideo.paused)
        myVideo.play();
    else
        myVideo.pause();
}

function makeBig() {
    myVideo.width = 560;
}

function makeSmall() {
    myVideo.width = 320;
}

function makeNormal() {
    myVideo.width = 420;
}
</script>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>


HTML Audio



<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>


HTML Flash


<!DOCTYPE html>
<html>
<body>

<object width="400" height="50" data="bookmark.swf"></object>

</body>
</html>


HTML içinde HTML

<!DOCTYPE html>
<html>
<body>

<object width="100%" height="500px" data="snippet.html"></object>

</body>
</html>


HTML Youtube

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<object width="420" height="315"
data="http://www.youtube.com/v/XGSy3_Czz8k">
</object>

</body>
</html>



HTML5 Konum Bilgisi


<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;   
}
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;   
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>


Google Maps HTML5


<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>



HTML Drag Drop


<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

HTML JS


<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>


<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
    }
}

function stopWorker() {
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>


Html Server

<!DOCTYPE html>
<html>
<body>

<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("demo_sse.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";
    };
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

</body>
</html>


zaman: 07:46

Html Temel Örnekler


İlk Kodlar…

Etiket, HTML dosyasında kullanılan komutlara verilen addır. HTML içinde kullanılan tüm etiketler “<” işareti ile başlar ve “>”ile biter. Ayrıca etiketin yorum aralığı da “</etiket ismi>” kalıbı ile bitirilir. Aşağıda etiket kullanımına kısa bir örnek verilmektedir.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
</body>
</html>



Link Verme. Sayfa-1

<html>
<body>
<h1>This is my Main Page</h1>
<p>This is some text.</p>
<p><a href="page1.htm">This is a link to Page 1</a> </p>
<p><a href="page2.htm">This is a link to Page 2</a> </p>
</body>
</html>

Paragraf Oluşturma

<p>This is a paragraph.</p><p>This is another paragraph.</p>
Başka bir sayfaya link verme
<html>
<body>
<a href=http://www.maltepe.edu.tr> This is a link</a>
</body>
</html>


Sayfa İçerisine Resim Ekleme

<img src=“deneme.jpg" width="104" height="142" />

Yeni satır oluşturma

<br>

<p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>


<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>


<p>This is<br />a para<br />graph with line breaks</p>


<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>



<html>
<body>

<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>

<p>The font element is deprecated in HTML 4. Use CSS instead!</p>

</body>
</html>


<html>
<body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>

<p style="font-family:times;color:green;">
This text is in Times and green</p>

<p style="font-size:30px;">This text is 30 pixels high</p>

</body>
</html>



<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">
A paragraph.</p>
</body>
</html>


<html>
<body>

<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


<html>
<body>
<a href="http://www.maltepe.edu.tr" target="_blank">Visit Maltepe University!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>

<html>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
</body>
</html>


<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>


<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>



<form>First name: <input type="text" name="firstname" />
<br />Last name: <input type="text" name="lastname" /></form>


<form>Password: <input type="password" name="pwd" /></form>

<form><input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /><input type="checkbox" name="vehicle" value="Car" /> I have a car </form>


<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>

<frameset cols="25%,75%">
   <frame src="frame_a.htm" />
   <frame src="frame_b.htm" />
</frameset>




<html>
<body>
<iframe src="demo_iframe.htm"
width="200" height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>




<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright  Maltepe Üni ?</td>
</tr>
</table>

</body>
</html>



zaman: 07:44

Html temel içerik


Html temel içerik

Basit bir web sayfasının görünümü şöyledir:
<html>
<head>
…. (Sayfayı tanımlayan kodlar.)
</head>
<body>
… (Sayfanın içeriği: metin, resim vb.)
</body>
</html>

HTML HyperText Markup Language kelimelerinin ilk harflerinden oluşur. Hipermetin İşaretleme Dili diye Türkçeleştirilebilir. HTML de web tarayıcısına tag (etiket) denilen komutlarla istekler bildirilir. Etiketlerle verilen komutlar web tarayıcısı tarafından yorumlanır ve görüntü oluşturulur. Etiketlerin yapısı şöyledir:
<etiket özellik1(Parametre1)= "değer" özellik2="değer" özellik3="değer">… </etiket>
Etiketler genelde <etiket …> şeklinde açılıp </etiket> şeklinde kapatılır. Ancak kapatılmayan etiketler de vardır. Etiketleri bir örnekle açıklayacak olursak:
<otomobil marka="tofaş" model="dogan" uretim_tarihi="2003" renk="beyaz">
Bunlarla “2003 yılında üretilmiş, doğan model beyaz renkli tofaş bir otomobil istiyorum” demiş oluruz. Gerçek bir örnek verecek olursak:
< font face="verdana" size="4" color="red" align="center">Paragrafın içerdiği metin</font>
Bu kodlarla da şunu demiş oluruz: “Yazacağım metnin yazıtipi verdana , boyutu 4, rengi kırmızı olsun ve ortaya hizalansın.”


Başlıca HTML etiketleri





zaman: 07:42

HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir.
HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır.
HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır.
Html kodları düz yazı dosyalarından oluşmaktadır.
Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.*
Dosyalar UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur.
Yukarıda saydıklarımın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.

Html’in Yapısı
HTML öğrenmesi oldukça basit ve yaratıcılığa fazla açık olmayan bir dildir.
Basittir çünkü, internette gezinirken görüntülediğiniz sayfaların hazırlanırken kullanılan teknikleri öğrenmemiz mümkündür (Sayfanın üzerinde farenizin sağ tuşuna bastıktan sonra Kaynağı Görüntüle seçeneği ile).
Beğendiğiniz tasarımları kendi sayfanızda kullanabilir, bu tasarımların hangi html kodları kullanılarak yapıldığını öğrenebilirsiniz. bilinmesi gereklidir!
Yaratıcılığa fazla açık değil dedim çünkü html ile yazdığınız sayfalar PHP, ASP, ColdFusion, CGI... gibi web programlama dilleri kullanılmadan statik html dışına çıkamaz.
HTML kodlarını yazmak için özel bir düzenleyiciye ihtiyacınız yoktur. Bu iş için Windows altında NotePad ya da DOS-Edit, Linux altında pico, joe ya da vi gibi metin düzenleyicileri yeterlidir.
HTML sayfalarınızı kod yazmaksızın FrontPage, Netscape Composer gibi programlarla da hazırlayabilirsiniz. Yalnız bu programlar kullanılarak hazırlanan sayfalar genellikle belli bir çerçeve içinde olduğu için zaten dar olan HTML’nin üreticilik alanını daha da daraltmaktadır.
Bunun yanı sıra HTML’yi kod düzeyinde bilmenin kullanıcıya her zaman fayda getireceği de unutulmamalıdır (İleriki bölümlerde değineceğim Dinamik Web Tasarımı için HTML’nin kod düzeyinde


Web sayfası <html> etiketi ile başlar ve </html>  ile biter. İki bölümden oluşur.
<head> …. </head>: Bu bölümde sayfa ve sayfayı hazırlayan kişi vb. konularda bilgi verilir. Burada yazdıklarımız sayfanın görünümünü etkiler, ancak sayfada görüntülenmez.

Örneğin; <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> koduyla sayfasının karakter kodlamasının hangi dil ile olacağını belirtmiş oluruz. (“iso-8859-9” ve “windows-1254” sayfanın Türkçe karakterlerle görüntüleneceğini belirtir.)

<title>…</title> etiketi de web tarayıcısının başlık çubuğunda görüntülenecek metni belirler.

<meta name="author" content="Hazırlayan"> Sayfayı hazırlayan veya sahibi olan kişi veya kuruluşu belirtir.
<body>…</body>: Sayfada görüntülenecek metin, resim, tablo vb. nesnelerin bulunduğu bölümdür.
zaman: 07:41

30 Ocak 2017 Pazartesi

Hangi popüler siteler hangi platformlarda çalışıyor?

Aşağıda bulunan tabloda Dünya'da en çok bilinen ve en çok kullanılan web sitelerinin temelde hangi teknolojileri kullandıkları listelenmiştir.

Kaynak: http://www.comentum.com/php-vs-asp.net-comparison.html
zaman: 09:16

26 Ocak 2017 Perşembe

Yazılımlarınızı satarak yada Yazılım İşi Alarak Para Kazanın

Freelancer çalışan insanlar; herhangi bir yere bağlı olmadan genellikle internetten aldıkları işleri belirlenen bir sürede ve fiyatta  yaparak gelir elde eden kişilerdir. İş bulma kanallarından en önemlisi ise bu için geliştirilmiş web siteleridir. Bu sitelerden en önemlileri hakkında bilgiler aşağıda verilmiştir.

 1-) Mevcut Yazılımınızı Kodları ile Beraber Satarak Gelir Elde Edin

Yazılımlarınızı yada tasarımlarınızı (ürünlerinizin çok kapsamlı olmasına gerek yok) CodeCanyon isimli sitede açacağınız bir markete ücretsiz olarak ekleyip istediğiniz fiyattan (isterseniz 2 $ istersenizde 50$) satabilirsiniz. Bunun için CodeCanyon sitesine kolayca kayıt olup, Become a Author dedikten sonra aşağıdaki videoyu izleyerek uygulamanızı merkete ekleyebilirsiniz. Sonrasında satılan ürünlerinize göre gelir elde edebilirsiniz. (En çok kazananların ayda 20.000$ kazandığını söylenmektedir.)

2-) Yazılım İşi Alara Gelir Eldeedin

FreeLancer
Dünya'daki en büyük (12 milyondan fazla kullanıcısı bulunan) iş alma ve iş verme sitesi olan FreeLancer üzerinden de yazılım işi verebilir yada yazılım işi alabilirsiniz. On Milyonlarca dolarlık yazılım projesinin bulunduğu siteye kayıt olduktan sonra bilgi birikimizi ve yazılım becerinizi sisteme girerek sahip olduğunuz beçerilerinize göre işler alabilir (yapamayacağınız işlere talip olmayın) ve yaptığınız işlere göre gelir elde edebilirsiniz. Sitenin ana ekranları Türkçe dil desteği barındırsa da, alacağınız işler ile ilgili olarak yazışmanız gerekeceği için İngilizce bilginizin olması gerekmektedir. Türkiye'den yazılım projesi verenlerinde yer aldığı site üzerinden oldukça büyük mikrarlarda gelir elde etmeniz mümkün.( Hintliler ve Pakistanlılar ciddi fiyat kırıyorlar). Dünya'daki yazılım tirentlerini ve yazılım projeleri hakkında bilgi sahibi olmak için bile kullanılabilecek bir alternatif olan FreeLancer sitesi, yazılım ile ilgilenenlerin bilmesi gereken bir web sitesi olarak görülmektedir.


Aynı fikir ile oluşturulmuş başka bir web sitesi:https://www.toptal.com/

Benzer bir içeriğe sahip bir başka iş alma sitesi https://www.upwork.com/i/how-it-works/client/

3-) Yazılımları Test Ederek Gelir Elde Edin

TestBirds

TestBirds sitesi; website testti yada mobil app testti yapabileceğiniz bir web uygulamasıdır. TestBirds sitesi kullanılarak gelen testleri (işleri) belirlenen zaman içerisinde yaparak ücret kazanmak mümkün (test ağırlığına ve zorluğuna göre ücret değişmektedir.) Yapılan testlerin kabulüne göre en az 5 Euro kazanılmakta. Uygulama içerisinde hata bulursanızda ek ücret olarak hesabınıza yansıtılmaktadır. (10 Euro mimimum para çekme limiti.) Çekme isteği verildikten sonra kazandığınız tutar direk olarak banka hesabınıza yansımakta.



Bu site kullanılarak aylık 100 Euro gibi bir ücret kazanılabilir. Ayrıca yazılım testleri yapılarak kazanç elde etmek için kullanılacak çok sayıda alternatif web uygulamasıda bulunmaktadır.

https://www.usertesting.com/ (Test başı kazanılacak tutar 10-15 Euro Testlerin tamamlanma süresi 45-60 dakika, sistem tarafından küçük bir sınava tabi tutulduktan sonra para kazanmaya başlıyorsunuz.)

https://www.userlytics.com/tester-signup (Test başı ücret; 10$ ile 100$ arası. Sistemde bulduğunuz her ilave hata için ek üçretler kazanabilirsiniz.)

https://www.userlytics.com/tester-signup (Aylık 200$ kadar ücret kazanabileceğiniz başka bir test plantformu)

(Mobil uygulamaları veya web sayfalarını test ederek use caseler tamamlayarak para kazanabileceğiniz bir başka sistem aylık 100$ kazanabilirsiniz.)

(Her bir test için 10$ kazanabileceğiniz bir sistem. Mobil uygulamaların testti için geliştirilmiş bir yapıya sahip. Her bir test için 10$ kazanabilirsiniz testlerin yapılış süresi 45-60 dakika  arasında değişmektedir.)


4-)Tasarımlarınızı Satarak Gelir Elde Edin

https://99designs.com/ sitesine ücretsiz kayıt olarak yaptığınız tasarımları burada satışa çıkarabilir yada gelen tasarım işlerini alarak gelir elde edebilirsiniz.


5-)Diğer Alternatifler


Yukarıdaki pekçok alternatifi hatta daha fazlasını bünyesinde bulunduran başka bir web sitesi alternatifi. Ödeme için paybal hesabı yurtdışından açılmalıdır. https://www.fiverr.com/


Evden herhangi bir iş yerine gitmeden para kazanabileceğiniz bu siteler ile ilgili eklemelerimiz devam edecektir.


 


zaman: 09:24

Uzaktaki Bir Bilgisayarı Kontrol Etme Yazılımı

TightVNC'nin server versiyon kurulumu yapıldıktan sonra, daha önceden TightVNC'nin client versiyonu kurulan uzaktaki bir bilgisayara bağlanabilirsiniz. O bilgisayarın masaüstünü görebilir, uzaktaki bilgisayarın mouse ve klavyesini kontrol edebilirsiniz. TightVNC; hem kişisel hem de ticari kullanım için uygundur. Ücretsiz bir yazılımdır. Yazılımın kaynak kodu mevcuttur. TightVNC'yi bilgisayar yönetimi, teknik destek, eğitim vb diğer pek çok amaç için kullanılabilir. Farklı işletim sistemleri barındıran bilgisayarlara da bağlanabilme özelliği bulunmaktadır. Yazılımın web adresi http://tightvnc.com/

Bu amaçla kullanılabilecek bir başka alternatifte TeamView programıdır. O programıda https://www.teamviewer.com/en/ sitesinden indirebilirsiniz.
zaman: 07:21
Kaydol: Kayıtlar (Atom)