دیباگ کردن کدهای جاوا اسکریپت در کروم
جاوا اسکریپت چیست؟
JavaScript چیست؟
برای دیباگ کردن کدهای جاوا اسکریپت در کروم این مقاله را بخوانید و با ما همراه باشید.
آموزش برنامه نویسی
سیستم طراحی فلوئنت یک سیستم طراحی شگفت انگیز برای یک جهان پیچیده. این مطلب را تا آخر بخوانید.
آموزش برنامه نویسی
بسم الله الرحمن الرحیم
آموزش طراحی قالب Responsive
در این بخش قصد دارم به صورت مختصر آموزش ساخت یک قالب Responsive را آموزش دهم. بدون هیچ بحث اضافی سراغ مباحث مربوطه می رویم:
برای نمایش عناصر صفحه در مقایس های مختلف مثل کامپیوتر ها یا تبلت و در نهایت موبایل به نحوی که بتوان اطلاعات را به صورت صحیح نمایش داد نیاز است شما در مورد هر مقایس تصمیمی اخذ نمایید برای این فرایند کافی است از دستور media@ استفاده نمایید. ساختار این دستور بسیار ساده می باشد. در دستور زیر ما مشخص کردیم که اگر خروجی ما صفحه نمایش بود و سایز ما حداقل 1200 پیکسل بود تغییرات مورد نظر صورت گیرد. این کار را به صورت های زیر می توان انجام داد:
درون یک فایل StyleSheet
@media screen and (min-width : 1200px) {
/* let's do somethin' */
}
لینک دادن به یک StyleSheet
بسم الله الرحمن الرحیم
استفاده از تگ <pre>
ممکن است شما بخواهید در وب سایت خود کدهایی را قرار دهید و نخواهید این کد ها توسط کامپایلر یا مفسر اجرا شوند
برای این کار کافی است به صورت زیر کد های خود را در سایتتان قرار دهید
<xmp id="snippet-container">
<divآموزش برنامه نویسی
بسم الله الرحمن الرحیم
طراحی یک قالب ایمیل
در ابتدا یک صفحه html ایجاد نمایید و سپس در قسمت head صفحه مورد نظر کدهای زیر را قرار دهید
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>حال برای طراحی بدنه و قسمت محتوای خود می توانید به صورت زیر عمل کنید
بسم الله الرحمن الرحیم
طبیعتا همه با طراحی یک جدول ساده HTML آشنایی دارید، مثلا جدول زیر را در نظر بگیرید:
<table >
<tr>
<th >
Title
</th>
<th >
Price
</th>
</tr>
<tr>
<td >
CSS
</td>
<td >
1,000,000
</td>
</tr>
<tr>
<td >
HTML
</td>
<td >
12,000,000
</td>
</tr>
</table>
خوب حالا فکر کنید می خواهید به سطرهای جدولتان استایلی بدهید، در زمان های گذشته شما می بایست یک استایل تعریف می کردید مثلا
بسم الله الرحمن الرحیم
طبیعتا همه شما دکمه های Top را در کنار صفحات وب سایت ها دیده اید که با کلیک بر روی آن می توانید به بالای سایت باز گردید.
در این آموزش می خواهیم کد این دکمه را در jQuery بنویسیم.
یک صفحه HTML ایجاد کنید و کد jQuery را به صفحه خود اضافه کنید.
jquery-1.8.0.min.js
سپس یک فایل js ایجاد کنید و کد زیر را در آن قرار دهید.
$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
با استفاده از این کد ما ظرف مدت زمان یک ثانیه از محلی که بر روی لینک کلیک می کنیم به ابتدای صفحه انتقال پیدا می کنیم.
بسم الله الرحمن الرحیم
حتما شما نیز با کاربرانی که به دلیل آشنا نبودن به مرورگرهای دیگر، از مرورگر قدرتمند IE استفاده می کنند در وب سایت داشته، دارید و خواهید داشت!
خوب به دلیل مشکل کاربران در عدم استفاده از ابزار بهتر شما مجبور هستید که سایت خود را به نحوی برای کاربرانتان تغییر دهید که بتوانند آن را به خوبی مشاهده کنند:
لطفا مقاله "طراحی وب سایت برای مرورگرهای مختلف" را مطالعه کنید.
چطور می توان یک استایل CSS اختصاصی برای IE نوشت؟ Cross-Browser
برای این کار می توانید از روشهای زیر استفاده کنید:
در روش اول کافی است درون تگ head مانند تمامی link هایی که قرار می دهید تگ مربوط به لود کردن استایل IE را نیز قرار دهید اما با چند ویژگی، که می توانید تعیین کنید این استایل برای چه نسخه ای از مرورگر IE است.
شما می توانید با دستور IF تعیین کنید که این استایل فقط برای مرورگرهای IE مورد استفاده قرار گیرد
در دستور IF می توانید از شرطهای منطقی استفاده کنید:
- ! به معنی not است. مثال !IE یعنی برای IE استفاده نشود.
- gt به معنی greater than (بزرگتر از)
- gte به معنی greater than or equal (بزرگتر مساوی)
- lt به معنی less than (کوچکتر از)
- lte به معنی less than or equal (کوچکتر مساوی)
آموزش برنامه نویسی
بسم الله الرحمن الرحیم
کرک کردن WowSlider
طبیعتا در وب سایت های کنونی برای جذابیت بیشتر از اسلایدشوهای متفاوت استفاده می شود، اما طراحی و ایجاد این اسلاید شو کار ساده ای نیست. توسعه دهنده گان که میخواهند به سرعت یک اسلاید شو زیبا انتخاب و در وب سایت خود قرار دهند معمولا با مشکل روبرو می شوند هر چند با جستجو می توان اسلاید شوهای متفاوتی را یافت که البته بعضا رایگان نبوده و یا برای CMS ها طراحی شده اند که تغییر و بدت آوردن آنها زمان بر خواهد بود.
پیشنهاد می کنم برای اینکار از ابزار WowSlide استفاده کنید. این ابزار با در اختیار گذاشتن نمونه های متفاوتی از اسلاید شو ها به شما اجازه می دهد Slideshow مورد نظر خود را با تمامی پاارمترهای مورد نیاز خود طراحی و با یک Wizard ساده ایجاد کنید.
شما می توانید این ابزار را از لینک زیر دانلود کنید
این ابزار رایگان نبوده و در صورتی که هزینه آن را پرداخت نکنید، اگر یک اسلاید شو ایجاد کنید در پایین تمامی تصاویر لولگو مربوط به نرم افزار دیده می شود.
برای مشاهده لطفا یک اسلاید شو با این نرم افزار ایجاد کنید تا مشکل مربوطه مشخص گردد.
کاربر ABLY
دقیقا همینطور هست که در متن گفتید. باید تخته هوشمند ...
کاربر ABLY
با سلام عالی بود. لطفا مبحث فلاتر رو هم ادامه ...
مدیر سایت
سلام و درود ممنون از لطفتان بله حتما ...
کاربر ABLY
درود و سپاس از مطلبتون درمورد WHILE @@FETCH_STATUS = 0 ...
کاربر ABLY
ممنونم. استفاده بردم. ...