photo_2016-01-18_02-03-32

آموزش جاوا اسکریپت 4

آموزش جاوا اسکریپت 4

برای تعریف آرایه ابتدا کلمه var را نوشته سپس نام آرایه را می نویسیم سپس علامت = را قرار می دهیم و درون [] مقدار دهی می کنیم. و برای نمایش کافیست ابتدا نام آرایه را نوشت و سپس شماره خانه ای که قرار است نمایش داده شود را می نویسیم.

نکته:شماره خانه ها از 0 شروع می شود.

 

در جاواسکریپت هم برای بررسی شرط ها باید از if استفاده کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = “Good day”;
} else {
greeting = “Good evening”;
}
document.getElementById(“demo”).innerHTML = greeting;
}
</script>

</body>
</html>

در خروجی دکمه ای نمایش داده می شود که با کلیک بر روی آن زمان را بررسی می کند اگر کوچک تر از 18 باشد Good day را نمایش می دهد و در غیر این صورت Good evening را نمایش می دهد.
برای بررسی با تعداد شرط بالا باید از switch استفاده کرد که به این صورت استفاده می شود:

<!DOCTYPE html>
<html>
<body>

<p id=”demo”></p>

<script>
var day;
switch (new Date().getDay()) {
case 0:
day = “Sunday”;
break;
case 1:
day = “Monday”;
break;
case 2:
day = “Tuesday”;
break;
case 3:
day = “Wednesday”;
break;
case 4:
day = “Thursday”;
break;
case 5:
day = “Friday”;
break;
case 6:
day = “Saturday”;
break;
}
document.getElementById(“demo”).innerHTML = “Today is ” + day;
</script>

</body>
</html>

خروجی مثال بالا نام روز را در صفحه نمایش می دهد.یعنی ابتدا شماره روز را به switch می دهد و سپس با بررسی ها نام روز را نمایش می دهد.

نحوه تعریف switch به این صورت است:

switch (چیزی که قرار است بررسی شود ) {
case 0:
بررسی می کند آیا برابر 0 است یا خیر
break;
case 1:
بررسی می کند آیا برابر 1 است یا خیر
break;
case 2:
بررسی می کند آیا برابر 2 است یا خیر
break;
}

در جاوا اسکریپت هم مانند زبان های دیگر حلقه وجود دارد تا هر چیزی را که خواستیم به تعداد زیادی نمایش دهیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<p id=”demo”></p>

<script>
var cars = [“BMW”, “Volvo”, “Saab”, “Ford”];
var text = “”;
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + “<br>”;
}

document.getElementById(“demo”).innerHTML = text;
</script>

</body>
</html>

خروجی: BMW
Volvo
Saab
Ford

نحوه استفاده از حلقه for:

for (i = 0; i < cars.length; i++) {
text += cars[i] + “<br>”;
}

ابتدا کلمه for را می نویسیم و سپس مقدار اولیه می دهیم و ; را درج می کنیم.سپس شرط حلقه را می نویسیم که در مثال بالا شرط حلقه این است که به تعداد اطلاعات متغیر cars کار می کند.و دوباره علامت ; را درج می کنیم.حال به حلقه باید بگوییم که چند واحد چند واحد به مقدار اولیه اضافه کند.که در مثال بالا i++ به معنی این است که یک واحد یک واحد به i اضافه کند.

حال درون حلقه هرچیزی را که می خواهیم به نمایش در آید می نویسی که در مثال بالا گفته شده مقدار خانه ی i ام آرایه cars را نمایش دهد.
نحوه تعریف حلقه while:
مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
var text = “”;
var i = 0;
while (i < 10) {
text += “<br>The number is ” + i;
i++;
}
document.getElementById(“demo”).innerHTML = text;
}
</script>

</body>
</html>

خروجی مثال بالا دکمه را نمایش می دهد که با کلک بر روی آن متن های زیر را نمایش می دهد.

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

 

search-engine-optimization-www.seoworld.ir_

اشتباهات رایج در سئو

اشتباهات رایج در سئو

  استفاده نکردن کلمات کلیدی گوگل

کلمات کلیدی یکی از قواعد مهم در سئو سایت است بطوری که آنقدر از این قاعده استفاده شده که به یک رویه تبدیل شده است! و یه همین دلیل بعضی از وبمستر ها اکراه دارند که از این کلمات استفاده کنند! اما این اشتباه است شما نباید هیچ وقت کلمات کلیدی را فراموش کنید! اشتباه رایج دیگر این است که وبمستر ها می روندد و روی کلمات عمومی که فکر می کنند با آن کلمات کلیدی ترافیک بیشتری بدست می آورند! اما می توانند کار کردن روی تعدادی از کلمات  با رقابت پایین رنکینگ خوبی کسب کنند!

نداشتن عنوان و توضیحات

یکی از اشتباهاتی که مدیران سایت ها مرتکب می شوند این است که  برای هر صفحه خود عنوان منحصر به فرد ندارند.توضیحات  هم باید منحصر به فرد ، بدون پر شدن از کلمه کلیدی و جذاب برای بازدیدگننده سایتباشد. یک توضیح خوب میتواندکلیک خوری سایت  شما را افزایش دهدو اگر محتوای شما با آنچه در توضیحات وعده آن را داده اید مطابق باشد احتمال اینکه مطلبتان بحث و گفتگوی بالای در بر داشته باشد هم زیاد است.

seo

فعالیت در شبکه های اجتماعی

شبکه های اجتماعی از نو آوری های وب3 است که با ورود خود تحول بزرگی در وب ایجادکرد و کسب کارهای کوچک توانستند با ایجاد صقحه در این شبکه ها گاربر های زیادی را جذب کنند اشتباه بزرگی است اگر شما در حداقل یک شبکه اجتماعی فعال نباشید. سیگنالهای خارج شده از این شبکه ها یکی از عوامل افزایش رنک در سئو می باشد. این شبکه ها در بالا رفتن ترافیک سایت نیز موثر می باشد.

 

ثبت نکردن سایت در ابزار وب مستر گوگل و بینگ

ثبت نکردن سایت در گوگلوو بینگ شبیه رانندگی با چشمان بسته است! این کار نفع زیادی  دارد و فرآیند انجام آن به قدری ساده است که حتی تازه کارها هم می توانند آن را انجام دهند. به جای اینکه حدس بزنید چه چیزی درباره سایت شما اشتباه است که ترافیک بالایی از موتورهای جستجوگر دریافت نمیکنید،

 

photo_2016-01-18_02-03-32

آموزش جاوا اسکریپت 3

آموزش جاوا اسکریپت 3

در جاوا اسکریپت برای مشخص کردن نمایش اعداد با اعشار مورد نظر از تابع toFixed استفاده می شود.

مثال:

<!DOCTYPE html>
<html>
<body>
<p id=”demo”></p>
<script>
var x = 9.656;
document.getElementById(“demo”).innerHTML =
x.toFixed(0) + “<br>” +
x.toFixed(2) + “<br>” +
x.toFixed(4) + “<br>” +
x.toFixed(6);
</script>

</body>
</html>

خروجی مثال بالا:

10
9.66
9.6560
9.656000

نکته:این تابع هم عدد را رند می کند هم تعداد رقم اعشار را مشخص می کند.

 

تفاوت تابع toPrecision با toFixed:

تفاوت این دو تابع در این است که در تابع tofixed تعداد رقم اعشار را مشخص می کرد ولی تابع toprecision تعداد کل ارقام را مشخص می کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<p id=”demo”></p>

<script>
var x = 9.656;
document.getElementById(“demo”).innerHTML =
x.toPrecision() + “<br>” +
x.toPrecision(2) + “<br>” +
x.toPrecision(4) + “<br>” +
x.toPrecision(6);
</script>

</body>
</html>

خروجی:

9.656
9.7
9.656
9.65600

برای تبدیل اعداد اعشاری به اعداد صحیح بدون آن که اعداد را رند کنیم باید از تابع parseInt استفاده کنیم:

مثال:

<!DOCTYPE html>
<html>
<body>

<p id=”demo”></p>

<script>
document.getElementById(“demo”).innerHTML =
parseInt(“10”) + “<br>” +
parseInt(“10.33”) + “<br>” +
parseInt(“10 6”) + “<br>” +
parseInt(“10 years”) + “<br>” +
parseInt(“years 10”);
</script>

</body>
</html>

خروجی:

10
10
10
10
NaN

نکته: خروجی آخرین عدد به خاطر این که به جای عدد رشته وارد شده است NaN است.

 

برای ایجاد یک عدد تصادفی از تابع random در کلاس Math استفاده می کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.random();
}
</script>

</body>
</html>

در خوجی دکمه ای نمایش داده می شود که با کلیک بر روی آن یک عدد تصادفی بین 0 تا 1 ایجاد می کند.
برای نمایش کوچک ترین عدد بین اعداد از تابع min از کلاس Math استفاده می کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML =
Math.min(0, 150, 30, 20, -8, -200);
}
</script>

</body>
</html>

خروجی: -200

برای نمایش بزرگ ترین عدد بین اعداد از تابع max از کلاس Math استفاده می کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML =
Math.max(0, 150, 30, 20, -8, -200);
}
</script>

</body>
</html>

خروجی: 150

برای رند کردن عدد از تابع round در کلاس Math استفاده می کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.round(4.4);
}
</script>

</body>
</html>

خروجی: 4

نکته:این تابع قسمت اعشار عدد را حذف نمی کند بلکه عدد را رند می کند.
تفاوت تابع ceil با تابع round:

تابع round عدد را فقط رند می کند ولی ceil عدد را رو به بالا رند می کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.ceil(4.4);
}
</script>

</body>
</html>

خروجی: 5

تفاوت تابع floor با تابع ceil:

تابع ceil عدد را رو به بالا رند می کند ولی floor عدد را رو به پایین رند می کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.floor(4.7);
}
</script>

</body>
</html>

خروجی: 4

برای ایجاد یک عدد تصادفی بین 0 تا 10 باید هم از تابع floor استفاده کرد و هم از تابع random.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML =
Math.floor(Math.random() * 11);
}
</script>

</body>
</html>

خروجی این کد هر بار که بر روی دکمه کلیک کنید تفاوت خواهد کرد.

نکته: برای تعیین محدوده عدد تصادفی باید یک رقم بیشتر از بزرگ ترین عدد وارد شود.(در کد زیر عددی بین 0 تا 10 ایجاد می شود نه 0 تا 11)

 

photo_2016-01-18_02-03-32

آموزش جاوا اسکریپت 2

آموزش جاوا اسکریپت 2 :
نمایش متن در پنجره هشدار مرورگر:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

در مثال بالا وقتی صفحه وب شما اجرا می شود حاصل جمع(5+6) را در پنجره هشدار نمایش می دهد.

نکته: می توانید به جای(5+6) هر متنی که دوست دارید نمایش دهید.

حتما متن را بین” ” قرار دهید.
نمایش متن در صفحه با جاوا اسکریپت:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

در مثال بالا حاصل جمع (5+6) را در صفحه نمایش می دهد.

نکته: می توانید به جای(5+6) هر متنی که دوست دارید نمایش دهید.

حتما متن را بین” ” قرار دهید.

در جاوا اسکریپت برای ایجاد متغیر از کلمه var استفاده می شود.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Statements</h1>

<p>Statements are separated by semicolons.</p>

<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>

<p id=”demo”></p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById(“demo”).innerHTML = z;
</script>

</body>
</html>

در مثال بالا سه متغیر ایجاد شده که مقدار یکی 6 و دیگری 5 است و در متغیر سوم حاصل جمع آن ها حساب می شود و در صفحه نمایش داده می شود.

نکته: در جاوا اسکریپ یک نوع متغیر وجود دارد که مقدار موجود در آن ها نشان می دهد که چه نوعی است.(رشته ای یا عددی)

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Statements</h1>

<p>Statements are separated by semicolons.</p>

<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>

<p id=”demo”></p>

<script>
var x = “s”;
var y = “s”;
var z = x + y;
document.getElementById(“demo”).innerHTML = z;
</script>

</body>
</html>

در مثال بالا به متغیر ها مقدار رشته داده شده است.

 

در آخر دستورات جاوا اسکریپت استفاده از سمی کالن ; اجباری است.
در جاوا اسکریپت برای دادن اولویت برای حساب کردن می توانید از () استفاده کنید.

یعنی جواب مقادیر زیر متفاوت است:
(5 + 6 )* 10
مساوی 110

5 + 6 * 10
مساوی 65

جاوا اسکریپت به حروف بزرگ و کوچک حساس است.
مثلا:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is Case Sensitive</h1>

<p>Try change lastName to lastname.</p>

<p id=”demo”></p>

<script>
var lastName = “Doe”;
var lastname = “Peterson”;
document.getElementById(“demo”).innerHTML = lastName;
</script>

</body>
</html>

خروجی مثال بالا Doe است چون ما گفته ایم محتوای lastName را نمایش دهد نه lastname

در جاوا اسکریپت برای نوشتن comment به دو روش می توان پیش می رویم:

روش اول برای نوشتن comment یک خطی است که از دو عدد/ استفاده می شود.

روش دوم برای نوشتن comment چند خطی است که از /* استفاده می شود.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 id=”myH”></h1>
<p id=”myP”></p>

<script>
/*
The code below will change
the heading with id = “myH”
and the paragraph with id = “myp”*/
//in my web page:

document.getElementById(“myH”).innerHTML = “My First Page”;
document.getElementById(“myP”).innerHTML = “My first paragraph.”;
</script>

<p><strong>Note:</strong> The comment block is not executed.</p>

</body>
</html>

 

photo_2016-01-18_02-03-32

آموزش جاوا اسکریپت 1

آموزش جاوا اسکریپت 1

با جاوا اسکریپت می توانید متنی که با html نمایش داده می شود را تغییر دهید.

که در این روش باید به اشیا  شناسه یا id بدهیم تا مشخص کنیم متن کدام شی تغییر کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id=”demo”>JavaScript can change HTML content.</p>

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button>

</body>
</html>

در مثال بالا متنی نمایش داده می شود که به تگ <p> آی دی به نام demo داده شده و زمانی که روی دکمه کلیک می شود متتن را تغیید می دهد.

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button>

در خط بالا یک دکمه ایجاد می شود و در onclick دکمه با کد document.getElementById گفته می شود سندی با آی دی (‘demo’) را زمانی که دکمه فشار داده شد با کد innerHTML محتوای آی دی demo را تغییر بده.

Click Me! متن روی دکمه است.و ‘Hello JavaScript!'” متنی است که به جای محتوای قبلی آی دی demo قرار می گیرد.

جاوا اسکریپت یکی از 3 زبانی است که همه توسعه دهندگان وب باید یاد بگیرند:

1. HTML برای تعریف محتوای صفحات وب

2. CSS برای مشخص کردن طرح صفحات وب

3. JavaScript برنامه نویسی رفتار صفحات وب

خب با نوشتن تگ scriptشروع می کنیم!

نوشتن جاوا اسکریپت در تگ <script>:

می توانید برای منظم نوشتن کد ها جاوا اسکریپت را در تگ <script> بنویسید و هر جا که می خواهید استفاده کنید.

مزایای نوشتن جاوا اسکریپت در تگ <script>:

وقتی شما اشیا زیادی در صفحه دارید و عملکرد همه آن ها مثل یک دیگر است می توانید از این روش استفاده کنید تا کد زیادی ننویسید.

مثال:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>Try it</button>

</body>
</html>

برای نوشتن جاوا اسکریت در تگ <script> باید از دستور function استفاده کنید و یک نام به آن بدهید.و هرجا خواستید این عملکرد اجرا شود کافیست نام function را بنویید.

یعنی در <button type=”button” onclick=”myFunction()”>Try it</button> گفته شده که وقتی روی دکمه کلیک شد function به نام myFunction اجرا شود تا متن موجود در آی دی demo تغییر کند.
شما می توانید تگ <script> را حتی در <body> بنویسید.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript in Body</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>Try it</button>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>

</body>
</html>

نوشتن جاوا اسکریپت به صورت یک فایل جداگانه:

از این روش زمانی استفاده می شود که تعداد صفحات سایت شما زیاد باشد و شما بخواهید در تمام صفحات به کد جاوا اسکریپت دسترسی داشته باشید.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>External JavaScript</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>Try it</button>

<p><strong>Note:</strong> myFunction is stored in an external file called “myScript.js”.</p>

<script src=”myScript.js”></script>

</body>
</html>

در مثال بالا از فایل myScript.js کد های جاوا اسکریپت را می خواند.
کد های مربوط به فایل myScript.js:

function myFunction() {
document.getElementById(“demo”).innerHTML=”Paragraph changed.”;
}

 

host_free

آیا استفاده از هاست رایگان درست است؟

آیا استفاده از هاست رایگان درست است؟
داشتن یک وب سایت برای شرکت شما برتری محسوب نمی شود بلکه امری ضروری است. بدین منظور، یکی از مسائلی که شما باید به آن توجه کنید گرفتن یک سرویس هاست برای وب سایتتان می باشد. با پیشرفت تکنولوژی و رقابت بازار، خدمات هاست مقرون به صرفه تر و بهتر شده است، امروزه بسیاری از ارائه دهندگان، سرویس هاست رایگان را عرضه می کنند.

مزایای هاست رایگان

به غیر از این حقیقت آشکار که این سیستم رایگان است، در این جا چند دلیل دیگر که چرا شما باید استفاده از هاست رایگان را برای تجارت خود در نظر بگیرید آورده شده است:

بهبود مهارت های شما در زمینه وب:

اگر شما به فکر این هستید که وبمستر خود باشید، احتمالاً هنوز آماده سرمایه گذاری بیشتر برای هاست نیستید. خدمات هاست رایگان به شما این آزادی را می دهد که مهارت های خود و اینکه در سایتتان چه چیز جواب می دهد را آزمایش کنید و باعث می شود بتوانید هزینه و تلاش مورد نیاز در ایجاد و نگهداری وبسایت شرکتتان را بهتر تجسم کنید. هاست رایگان این اجازه را نیز به شما می دهد که سرویس ارائه دهنده هاست را برای یک دوره اولیه امتحان کنید؛ زمانی که مطمئن هستید ارائه دهنده سرویس به اندازه کافی برای شما قابل اعتماد است، می توانید وب سایت شرکت خود را از هاست رایگان به بسته های پولی ارتقاء دهید.

Slide2

کاربری و مدیریت آسان برای هاست رایگان :

اکثر شرکت های ارائه دهنده هاست رایگان ، ابزارهایی مانند guestbook ، hit counter، فرم های ایمیل و غیره را فراهم کرده اند. ویژگی های اضافی، شما را از استخدام برنامه نویسان بی نیاز می کند، و با استفاده از هاست رایگان می توانید برنامه های کاربردی آنلاین را برای گرفتن بازخورد ، راه اندازی نظرسنجی و خبرنامه آنلاین، داشته باشید.

نتیجه مناسب با سرمایه کم:

شما هاست رایگان دریافت می کنید، وب سایت خودتان را طراحی می کنید و ابزارهای فانتزی اضافه شده در سایتتان را دارید که به آن قابلیت های فوق العاده می دهد و تمام اینها بدون خرج یک ریال می باشد. هم اکنون شما می توانید تجارت آنلاین خود را آعاز کنید و امیدواریم استراتژی شما بتواند به طور مؤثر درآمدتان را افزایش دهد.

اما باید بدانید هاست های رایگان فقط برای مدتی پاسخگوی نیاز شما هستند شما نمی توانید برای همیشه از این هاست ها استفاده کنید برای همین زیاد قابل اعتماد نیستند!

font-face

چگونه فونت دلخواه خود را داشته باشیم؟

 

 

همیشه انتخاب فونت از مواردی بوده که مدیرهای سایت ها و طراحان اون رو بزحمت انداخته!  فونت عامل تعیین کننده ای در زیبایی سایت هست و همچنین نشون دهنده شخصیت اون سایته!  حالا با سرچ ساده ای در گوگل و گشت و گذاری در سیات های فارسی می فهمیم که فونت های زیبا و متنوعی در صفحات وب بوجود اومده که هر کدوم از اونها نشان دهنده سطح و شخصیت سایت هست!

اما این فونت های متنوع از کجا اومده؟ بهتون می گم با ورود css3 قابلیتی بنام @font-face بوجود اومد که بوسیله اون می شه هر فونتی رو توی صفحه وبتون نمایش بدید! اما چطور ؟ با هم می بینیم!

ساختار اصلی @font-faceبصورت زیر هست!

  1. @font-face {
  2. font-family‘B yekan’;
  3.  url(‘http://ifont.ir/eot/BYekan.eot?#’format(‘eot’),
  4.  url(data:application/octet-stream;base64,) format(‘woff’),
  5.  url(‘http://ifont.ir/svg/byekan.svg’format(‘svg’);
  6. font-weight:normal;
  7. }

font-family در @font-face اسم فونت مورد نظر شما هست که می تونید بطور دلخواه هر اسمی که می خواهید بگذارید روش!

در خطوط پایین تر شما فرمت می بینید و آدرس خود فونت که محل لود شدن اون قرار دادشده! اما منظور از فرمت چیه؟

فرمت استاندارد فرمت ttf هست و به زودی تمامی مرورگر ها از این فرمت پشتیبانی می کنن اما فرمت های اصلی عبارتند از گوگل کروم : ttf و SVG و  فایرفاکس : otf و ttf  و اپرا و سافاری : ttf , otf و SVG و اینترنت اکسپلورر : eot

خب! اما حالا ما یه فونت داریم چطوری اینها رو به این فرمت ها در بیام و لود کنیم؟ کافیه که به سایت  @font-face Kit Generator برید و فونت خودتون رو آپلود کنید و فایلی با این فرمت ها رو دریافت کتید! به همین سادگی!

خوب حالا چطور از این @font-face استفاده کنیم؟ کافیه که هرجا می خواهید این فونت اعمال بشه خصوصیت

 font-family: ‘B yekan’;

رو بنویسید!

امیدوارم این آموزش براتون مفید باشه و نحوه استفاده از این خصوصیت خوب  css رو فراگرفته باشید!

چگونه فونت دلخواه خود را داشته باشیم؟

 

mobile-friendly

طراحی موبایل فرندلی چیست؟

طراحی ریسپانسیو یکی از آخرین تغیرات در دنیای وب است! این تغیر آنقدر بزرگ بوده که شکل سایت ها و حتی الگوریتم های سرچ و جستجو را تغیر داده است! بطوری که اگر سایت شما ریسپانسیو یا موبایل فرندلی باشد رتبه بالاتری نسبت به سایت های دیگر پیدا می کند! دلیل اهمیت ریسپانسیو بودن این است که کاربران وب بیشتر به سمت استفاده از موبایل هاو تبلتها رفته اند! و این خود نشانه ای از تحولاتی است که در آینده باید منتظر به وقوع پیوستنش باشیم!

موبایل فرندلی mobile friendly 

طراحی موبایل فرندلی چیست؟

نحوه نمایش سایت باید به طوری باشد که وقتی کاربر با گوشی موبایل خود به صفحه سایت می آید شکل و ابعاد سایت متناسب با ابعاد نمایگشر موبایل کاربر تغیر کند!  این تعریف در مورد دستگاه های دیگر نظیر تبلت هم صادق است! بطور کلی اندازه سایت باید با اندازه نمایشگر تغیر کند! این طراحی را طراحی ریسپانسیو می گویند! و سایت را که این ویژگی را داشته باشد را سایت موبایل فرندلی می نامند!

 

تاثیر-موبایل-فرندلی-در-سئو-سایت-طراحی-شده

 

اثر موبایل فرندلی در سئو

اگر شما یک فروشگاه اینترنتی یا سایت خبری یا هر نوع سایت دیگری راه اندازی کرده اید! نیاز به مخاطب و بازدیدکننده دارید! پس به دنبال افزایش رتبه خود در جستجوها می روید و به دنبال آن انواع راه ها را برای بهترین کردن سئو سایت خود انجام خواهید داد! یکی از عوامل موثر در سئو سایت های راه اندازی شده همین موبایل فرندلی بودن است! علاوه بر این وقتی سایت شما موبایل فرندلی باشد کاربر احساس خوشایندی از ورود به سایت شما پیدا خواهد کرد! و مطمئن باشید به سرعت از سایت شما خارج نخواهدشد!

در طراحی رسپانسیو سایت باید به این نکته دقت کرد! که رنگ و طراحی اصلی سیات حفظ شود بطور کلی نباید هویت سایت شما با کوچکتر شدن ابعاد تغیری کند!

 

1wanderlust-travel-hero-images-o-800x532

با این سه نکته وب سایت خود را بهتر کنید

با گسترش فضای وب این امکان برای بسیاری فراهم شده تا بتوانند با راه اندازی یک سایت اینترنتی کسب و کار کوچکی راه بیندازند! تا اینجای کار خوب است! ولی بعد از مدتی مدیران این نوع کسب وکارها متوجه می شوند که کابران آن ها شده اند و مثل قبل دیگر مشتری ندارند! یکی از دلایل این ریزش کاربان بروز نبودن سایت است! بله!! کسی که می خواهد کسب و کار پایداری داشته باشد باید خودش را با آخرین تکنولوژی ها و پیشررفت ها وقف بدهد!

امروز می خواهیم بعضی از این نکات را که شاید از دید شما پنهان مانده با هم مرور کنیم! شما می توانید با این سه نکته وب سایت خود را بهتر کنید

 

پس زمینه متحرک!

یکی از ویژگی های زیبا و در عیم حال کاربردی HTML5 پس زمینه متحرک است! این پس زمینه شامل تصاویر متحرکی هستکه وقتی پشت سرهم اجرا می شوند شبیه به یک ویدئو عمل میکنند! البته یکی از نقاط ضعف این تکنولوژی می تواند حجم زیاد آن باشد که باعث می شود تا سرعت بارگذاری صفحه شما کم بشود!

تصاویر و فونتهای بزرگ

 

 با آمدن تکنولوژی مردم کم حوصله شده اند!! آ« ها هیچ وقت چند دقیقه از وقت خود را تلف نمی کنند تا توضیحات شما درباره کسب و کارتان را بشنوند پس سعی کنید! همیشه در کوتاه ترین شکل و با فونت بزرگ و خوانا منظور خود را برسانید!

دکمه شبح

قبلا در مورد این نوع دکمه ها توضیح دادیم!! دکمه های بی رنگی هستند که کاربر را وسوسه می کنند تا بروی آن ها کلیک کند!! این دکمه تقریبا در تمام سایت ها یافت می شوند! دکمه های شبه زیبا هستند و در عین حال کاربردی می توانید استفاده از آن ها را امتحان کنید!این نوع دکمه ها معمولا شکل های مستطیلی و بیضوی دارند! داخلشان توپر بوده و با رفتن موس روی آن ها با رنگی پر می شوند البته می توان عملکرد های مختلفی برایشان در نظر گرفت! بطور معمول در داخل آن یک یا دو کلمه نوشته شده تا کاربر سیات را راهنمایی کند!

simple-ghost-button-css

این سه موردی که امروز مرور کردیم تنها بخش کوچکی از تغیراتی هستند که شما می توانید در سایت خود ایجاد کنید!  خود را بروز نگه دارید تا بتوانید همیشه کسب وکار پر رونقی داشته باشید!!

 

 

cover2

مقایسه سایت های داینامیک و استاتیک

در این مقاله می خواهیم به مقایسه سایت های داینامیک و استاتیک بپردازیم با آرت ویو همراه باشید :

اول باید تعریف کنیم که:

سایت استاتیک  یا ایستا چیست؟

سایتی که سیستم مدیریت محتوا نداشته باشد و کسی که طراحی سایت آشنایی نداشته باشد نتواند آن را مدریت کند! یعنی قادر نباشد تا مطلبی در سایت اضافه کند!

سایت داینامیک یا پویا چیست؟

سایت داینامیک یا پویا سایتی است که دارای پنل مدیریت است و یک سیستم مدیریت محتوا دارد و هر کسی می تواند در آن مطلب اضافه کند یا حذف کند! بتواند بخشی به سایت اضافه کند و یا تصاویر دلخواه خود را در سایت قرار دهد!

تفاوت سایت استاتیک با داینامیک چیست؟

 

سایت های استاتیک یا ایستا به منظور خاصی طراحی می شوند گاهی شما فقط قصد معرفی چیزی را دارید! و نمی خواهید هرروز به سایت خود مطلبی اضافه کنید!! بطور مثال سایت یک فیلم سینمایی که برای معرفی فیلم و عوامل آن طراحی شده لازم نیست هر روز بروزرسانی شود!! و  خدماتی هم به کاربران نمی دهد که بخواهد  بروز شود! البته اگر مالک سایت بخواهد تغیراتی در سایت باشد لازم است این را با طراح در میان بگذارد و خودش در صورت نداشتن تخصص در این زمینه نمی تواند تغیری در سایت ایجاد کند! این بروز رسانی هم هزینه خواهد داشت!

اما سایت های پویا یا داینامیک به گونه ای طراحی می شوند که کابر عادی بتواند آن را بروزرسانی کند و دارای یک سیستم مدیریت هستند! هزینه طراحی این گونه سایت ها بیشتر از  سایت های استاتیک است!

 

Web-Element-051
فواید و معایب سایت های استاتیک:

سایت های استاتیک دارای فوایدی هستند مثل طراحی کم هزینه! ،و محتوای کمی می خواهد و همچنین دارای امنیت بالایی نیز هستند!  اما این سایت ها دارای معایبی هم هستند مثل  هزینه های  زیاد آپدیت سایت!  مدیر سایت قادر نخواهد بود آن را مدیریت کند! وقت گیر بودن جهت ایجادتغیرات در سایت!

فواید و معایب سایت های داینامیک:

دارای یک سیستم مدیریت محتوا هستند! که این سیستم مدیریت محتوا انسان را قادر می ساز  تا بتواند سایت خود را مدیریت کند! هر وقت بخواهد بتواند مطلبی به سایت اضافه یا کم کند! یا اینکه محصولی را به فروش برساند! و بتواند سایت خود را در گوگل معرفی کند و کاربران خود را افزایش دهد! و هزاران فایده دیگری که از طریق سیتم مدیریت محتوا می تواند بدست بیاورد!

اما اگر این سایت ها به درستی طراحی نشوند همیشه امنیتشان در خطر خواهدبود و هر لحظه ممکن است وبسایت از سرویس خارج شود! بخصوص باید در قسمت دیتابیس سایت کدنویسی خوبی صورت بگیرد تا  مانع نفوذ مزاحمین و هکرها شود!
هر کدام از سایت های داینامیک و استاتیک کاربرد خود را دارند شما به عنوان کسی که می خواهید سفارش طراحی سایتی را دهید باید به این نکته توجه گنید که چه چیزی است سایت خود می خواهید!