آموزش ساخت اسلاید شو
بسم الله الرحمن الرحیم
آموزش ساخت اسلایدر
بخش ششم (آموزش ساخت اسلایدشو)
نمایش لیست آموزش های Bootstrap
آموزش ساخت slide show
در آموزش پیش نحوه ایجاد منو را در بوت استرپ با هم بررسی کردیم. در این بخش از آموزش قصد داریم بخش مربوط به Slide show را طراحی کنیم.
در این بخش بیشتر فعالیت هایی را انجام خواهیم داد که بوت استرپ در آن تاثیر زیادی نخواهد داشت. در این آموزش نحوه طراحی انواع Slide Show ها را برای سایت های مختلف بررسی خواهیم کرد و نحوه ایجاد Slide Show های زیبا را برای سایت های مختلف و موضوعات مختلف خواهیم آموخت.
یکی از بخش هایی که در تمامی سایت های امروزی وجود دارد Slide Show می باشد، طراحی و ساخت اسلایدشوهای حرفه ای کار بسیار پیچیده ای می باشد زیرا شما باید در jQuery تخصص بسیار زیادی داشته باشید که بتوانید اسلاید شوهای جذاب ایجاد کنید.
اما سایت های زیادی وجود دارند که اسلایدر های زیادی را برای دانلود در اختیار شما قرار می دهند. یکی از این سایت ها، سایت http://www.jssor.com می باشد. در این سایت شما می توانید اسلایدر های زیادی را مشاهده کنید و در میان آنها اسلایدر مورد نظر خود را انتخاب و دانلود کنید. اما طبیعتا این اسلایدری که انتخاب می کنید نیاز به تغییرات دارد، در برخی موارد هزینه ی تغییر این اسلایدر ها به قدری زیاد است که شاید شما ترجیح دهید از این اسلایدر ها استفاده نکنید!.
به هر حال دانستن اینکه سایت های زیادی وجود دارند که اسلایدرهای رایگان و زیبایی را در اختیار ما قرار می دهند، خالی از لطف نیست. می توانیم این راه حل را به عنوان یکی از گزینه های ممکن همیشه در ذهن خود داشته باشیم.
ادامه مطلب...
تغییر عناصر یک DropDown با jQuery
بسم الله الرحمن الرحیم
ممکن است شما نیاز داشته باشید، برخی از عناصر یک Drop Down را با استفاده jQuery حذف و یا Hidden کنید برای این کار می توانید به صورت زیر عمل کنید:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<select id="MyDropDown">
<option value="1">Ably.ir</option>
<option value="2">__________________ ABLY ____________</option>
<option value="3">yahoo.com</option>
<option value="2">google.com</option>
</select>
<button type="button" onclick="HiddenOptionInDropDown(2)">Hidden Secound Item</button>
<script>
function HiddenOptionInDropDown(id) {
$("#MyDropDown option").css("display", "block"); // show all hidden option
$("#MyDropDown option[value='" + id + "']").css("display", "none"); // hidden current option
}
</script>
</body>
</html>
در کد بالا ما توسط یک button دومین عنصر Drop Down را مخفی می کنیم.
ادامه مطلب...اعتبار سنجی فرم ها به صورت Client Side
بسم الله الرحمن الرحیم
اعتبار سنجی فرم ها با html5
یکی از بخش های مهم هر پروژه نرم افزاری، اعتبارسنجی اطلاعات است، در تمامی فرم ها شما نیاز خواهید داشت تا اطلاعات ورودی کاربر را بررسی کنید تا از صحت اطلاعات وارد شده اطمینان حاصل کنید.
با توجه به تکنولوژی های مورد استفاده نظیر PHP, JSP, ASP.NET و.. برای توسعه صفحات وب شما می توانید از روش های متفاوتی استفاده کنید.
در این آموزش قصد داریم تا شما را با یکی از ساده ترین روشهای اعتبارسنجی اطلاعات در سمت کلاینت آشنا کنیم. طبیعتا همه شما امروزه خواه و ناخواه از دستورات HTML5 استفاده می کنید، در این آموزش نیز می خواهیم با استفاده از دستورات HTML5 اعتبارسنجی اطلاعات ورودی کاربر را در سمت کلاینت بررسی کنیم.
از همین رو شما می توانید از این آموزش در تکنولوژی های مختلف توسعه صفحات وب استفاده کنید.
در مبحث اعتبارسنجی اطلاعات در Client Side در گذشته تنها توسط کدهای java Script و یا با استفاده ا ز یک Framework (مانند jQuery validation plugin) صورت می گرفت، اما با معرفی HTML5 این روش رویکرد تغییر کرد زیرا شما برای انجام اعتبارسنجی نیاز به کدهای پیچیده java script ندارید.
اعتبارسنجی فرم ها با HTML5
HTML5 با ارائه attribute های type, pattern و requireدر تگ <input /> به ما اجازه می دهد به سادگی اطلاعات ورودی کاربر را بررسی و Validate کنیم.
در این آموزش نیز مانند همیشه سعی خواهیم کرد با مثال های متفاوت روش های مختلف Validation را بررسی کنیم.
آموزش Type Attribute
type Attribute اولین Attribute ایی است که در HTML5 برای کنترل مقادیر ورودی کاربر مورد استفاده قرار می گیرد. توسط این Attribute شما مشخص می کنید که کنترل input شما چیست. با چند مثال این ویژگی را بررسی خواهیم کرد.
ادامه مطلب...
آموزش ساخت اسلاید شو با WowSlider
بسم الله الرحمن الرحیم
کرک کردن WowSlider
طبیعتا در وب سایت های کنونی برای جذابیت بیشتر از اسلایدشوهای متفاوت استفاده می شود، اما طراحی و ایجاد این اسلاید شو کار ساده ای نیست. توسعه دهنده گان که میخواهند به سرعت یک اسلاید شو زیبا انتخاب و در وب سایت خود قرار دهند معمولا با مشکل روبرو می شوند هر چند با جستجو می توان اسلاید شوهای متفاوتی را یافت که البته بعضا رایگان نبوده و یا برای CMS ها طراحی شده اند که تغییر و بدت آوردن آنها زمان بر خواهد بود.
پیشنهاد می کنم برای اینکار از ابزار WowSlide استفاده کنید. این ابزار با در اختیار گذاشتن نمونه های متفاوتی از اسلاید شو ها به شما اجازه می دهد Slideshow مورد نظر خود را با تمامی پاارمترهای مورد نیاز خود طراحی و با یک Wizard ساده ایجاد کنید.
شما می توانید این ابزار را از لینک زیر دانلود کنید
این ابزار رایگان نبوده و در صورتی که هزینه آن را پرداخت نکنید، اگر یک اسلاید شو ایجاد کنید در پایین تمامی تصاویر لولگو مربوط به نرم افزار دیده می شود.
برای مشاهده لطفا یک اسلاید شو با این نرم افزار ایجاد کنید تا مشکل مربوطه مشخص گردد.
می توان به سادگی لوگو نرم افزار را حذف کرد برای اینکار باید ابتدا تصاویر اصلی خود را بر روی تصاویر ایجاد شده Paste کنید زیر را بر روی تصاویر لوگو نرم اضافه شده است.
پس از جایگزین کردن تصاویر اصلی به مسیر engine1 بروید (البته مدتی است که نام فولدرها توسط این نرم افزار تغییر داده می شود اما مشخصا باید شما پس از ایجاد اسلاید شو خود دو فولدر داشته باشید یکی برای تصاویر و دیگری برای فایلها و اسکریپت های jQuery، به هر حال فولدر اسکریپتها را باز کنید) در فولدر مربوطه فایل wowslider.js را در یک Editor باز کنید.
در فایل مربوطه باید به دنبال کد زیر بگردید:
position:”absolute”,right:”2px”, bottom:”2px”,padding:”0 0 0 0″,”z-index”:10
طبیعتا یافتن این خط کد مابین تمامی کدهای نامرتب این فایل کار آسانی نیست و شخصا تجربه کردم که برخی از این پارامترها مانند مقدار z-index در نسخه های مختلف این نرم افزار متفاوت است اما معمولا در تمامی نسخه های فاصله ی لوگو نرم افزار از پایین 2 پیکسل است (bottom:” 2px”) پس بهتر است شما عدد 2px را در فایل مربوطه جستجو کنید و پس از یافتن خط مربوطه کد زیر را به آن اضافه کنید:
{position:”absolute”,right:”2px”, display:”none”,bottom:”2px”,padding:”0 0 0 0″,”z-index”:10
لطفا کد "display:"none دقیقا به همین صورت قرار دهید.
البته می توانید از این وب سایت نیز برای یافتن اسلایدشو ها استفاده کنید
http://designscrazed.net/free-responsive-jquery-image-sliders/
چطور می توان یک استایل CSS اختصاصی برای IE نوشت
بسم الله الرحمن الرحیم
حتما شما نیز با کاربرانی که به دلیل آشنا نبودن به مرورگرهای دیگر، از مرورگر قدرتمند 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 (کوچکتر مساوی)
وب فونت
بسم الله الرحمن الرحیم
شاید بیشتر شما دوستان عزیز با وب فونت آشنایی داشته باشید، وب فونت درواقع یک روش برای نشان دادن متن های یک وب سایت با قونت های اختصاصی و مورد نظر شما است
همانظور که شما می توانید در نوشتن متن های خود در برنامه Word از فونت های متفاوت استفاده کنید این امکان در وب نیز وجود دارد
گوگل نیز فونت های زیبایی را برای شما البته و طبیعتا فونت های انگلیسی را برای شما طراحی کرده است که متاسفانه منظور از شما در این متن کشور ایران نیست و برای استفاده از این ویژگی به دلیل تحریم بودن باید از نرم افزاری برای تغییر آی پی استفاده کنید
آدرس بخش وب فونت گوگل
گوگل نیز آموزش استفاده از هر فونت را برای شما قرارداده است که اینکار بسیار ساده خواهد بود.
ممکن است شما بخواهید یک فونت که در سیستم خود دارید را در وب استفاده کنید و باید این نکته را مد نظر قرار دهید که وب فونت با فونت های عادی که پسوند ttf دارتد متفاوت است برای تبدیل فونت ttf به فونت وب می توانید از وب سایت های زیر استفاده کنید
http://www.fontsquirrel.com/tools/webfont-generator
برای استفاده از فونت های تولید شده می توایند به صورت زیر عمل کنید
ابتدا فونت را در مسیری مشخص قرار دهید و با دستور CSS زیر فونت ها را به وب سایت خود معرفی کنید
@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
در خط دوم اسم فونت خود را MyWebFont قرار داده ایم حال مانند تمامی فونت های دیگر این فونت را به المان مورد نظر خود انتساب می دهیم
p { font-family: 'MyWebFont', Arial, sans-serif; }
طراحی یک چک باکس زیبا با Css & Html
بسم الله الرحمن الرحیم
در این آموزش یک مثال ساده از طراحی یک چک باکس زیبا برای صفحات وب آموزش خواهید دید
برای مشاهده کد و مثال لطفا اینجا کلیک کنید
ساخت Scroll Top
بسم الله الرحمن الرحیم
طبیعتا همه شما دکمه های 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);
});
}
با استفاده از این کد ما ظرف مدت زمان یک ثانیه از محلی که بر روی لینک کلیک می کنیم به ابتدای صفحه انتقال پیدا می کنیم.
کد زیر را نیز در همین فایل قرار دهید.
$('#scroll-link').click(function (event) {
event.preventDefault();
$('#header').scrollView();
});
header ای دی element ای است که در ابتدای صفحه قرار می دهیم و می خواهیم پس از کلیک بر روی scroll-link به آن جا انتقال پیدا کنیم
حال این فایل را نیز به صفحه خود اضافه کنید.
در بالای صفحه یک div با id منحصر به فردی ایجاد کنید تا هنگامی که ما بر روی لینک پایین صفحه کلیک می کنیم به این div لینک شود.
<div id="header"></div>
در پایین صفحه یک تگ a به صورت زیر اضافه کنید
<a href="#" id="scroll-link">TOP</a>
در نهایت صفحه خود را با مطلبی پر کنید تا اسکرول آن نمایش داده شود
کد این آموزش را می توانید از این جا دانلود کنید.
پسورد فایل
EduOnline.ir
دانلود jQuery Scroll bar
حجم: 32.7 کیلوبایت
طراحی یک جدول 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>
خوب حالا فکر کنید می خواهید به سطرهای جدولتان استایلی بدهید، در زمان های گذشته شما می بایست یک استایل تعریف می کردید مثلا
<style>
.blueColor
{
color:blue;
}
</style>
بعد آن را به سلول های جدول خود یعنی td می دادید.
اما باز طبیعتا شما نیز از Selector های HTML استفاده می کنید مثل زیر
<html>
<head>
<style>
tr
{
color:blue;
}
</style>
</head>
<body>
<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>
</body>
خوب اگر بخواهید برای سطر و ستون های زوج فرد استایل تعریف کنید یک راه این است که به صورت گذشته آن را به سلول ها بدهید.
اما می توانید این کار را نیز با استفاده از jQuery انجام دهید یعنی فقط شما استایل خود را تعریف کنید و سپس با استفاده از jQuery استایل خود را به تمامی سلول ها بدهید.
وقتی دارید به صورت داینامیک جدول ایجاد می کنید و یا سطر و ستون های شما به صورت داینامیک از پایگاه داده شما خوانده و ایجاد می شوند، این دستور می تواند بسیار به شما کمک کند.
$(document).ready(function(){
$("tr:odd").css("background-color","yellow");
});
</script>
حال مثال ما به صورت زیر کامل می شود
<html>
<head>
<style>
.oddStyle
{
color:blue;
}
.evenStyle
{
color: red;
}
</style>
<script>
$(document).ready(function () {
$("tr:even").addClass("even");
$("tr:odd").addClass("oddStyle");
});
</script>
</head>
<body>
<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>
</body>
شاید راه های ساده به نظر پیش پا افتاده و مبتدی باشند اما رفع یک نیاز می تواند اختراع یک دکمه باشد، سعی کنید این مطالب کوچک و پیش پا افتاده را برای افزایش سرعت کد نویسی و حل مسائل همیشه دنبال کنید
موفق باشید
آدرس دهی در HTML
بسم الله الرحمن الرحیم
در طراحی وب و HTML ما چندین نوع روش آدرس دهی به فایل ها و مسیر ها داریم
آدرس دهی نسبی
<img src="../../Images/file.jpg" />در این روش ما برای دسترسی به یک فایل باید مسیری را طی کنیم که مثلا برای رفتن به پوشه های بالاتر از /.. استفاده می کنیم و بدین صورت می توانیم کل وب سایت را پیمایش کنیم
آدرس دهی مطلق
<img src="http:www.EduOnline.ir/content/theme/Images/file.jpg" />در این روش ما بر اساس ریشه اصلی و نام سایت شروع به آدرس دهی می کنیم که تکنولوژی ASP.NET , MVC نیز به همین روش در انجین های سمت View خود آدرس دهی می کنند مانند زیر
<asp:image ImageUrl="~/content/theme/Images/file.jpg" />علامت ~ به معنای این است که باید از ریشه وب سایت جستجو برای یافتن فولدر Content انجام شود
ادامه مطلب...طراحی یک قالب ایمیل
بسم الله الرحمن الرحیم
طراحی یک قالب ایمیل
در ابتدا یک صفحه 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 در یک فایل HTML
بسم الله الرحمن الرحیم
استفاده از تگ <pre>
ممکن است شما بخواهید در وب سایت خود کدهایی را قرار دهید و نخواهید این کد ها توسط کامپایلر یا مفسر اجرا شوند
برای این کار کافی است به صورت زیر کد های خود را در سایتتان قرار دهید
<xmp id="snippet-container">
<div>
<div>this is an example div & holds an xmp tag:<br />
<xmp>
<html><head> <!-- indentation col 0!! -->
<title>My Title</title>
</head><body>
<p>hello world !!</p>
</body></html>
</xmp> <!-- note this encoded/escaped tag -->
</div>
This line is also part of the snippet
</div>
</xmp>آموزش طراحی قالب Responsive
بسم الله الرحمن الرحیم
آموزش طراحی قالب Responsive
در این بخش قصد دارم به صورت مختصر آموزش ساخت یک قالب Responsive را آموزش دهم. بدون هیچ بحث اضافی سراغ مباحث مربوطه می رویم:
برای نمایش عناصر صفحه در مقایس های مختلف مثل کامپیوتر ها یا تبلت و در نهایت موبایل به نحوی که بتوان اطلاعات را به صورت صحیح نمایش داد نیاز است شما در مورد هر مقایس تصمیمی اخذ نمایید برای این فرایند کافی است از دستور media@ استفاده نمایید. ساختار این دستور بسیار ساده می باشد. در دستور زیر ما مشخص کردیم که اگر خروجی ما صفحه نمایش بود و سایز ما حداقل 1200 پیکسل بود تغییرات مورد نظر صورت گیرد. این کار را به صورت های زیر می توان انجام داد:
درون یک فایل StyleSheet
@media screen and (min-width : 1200px) {
/* let's do somethin' */
}
لینک دادن به یک StyleSheet
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="small.css" />
در روش بالا اگر سایز ما حداقل 1200 پیکسل بود فایل مشخص شده به صفحه ما اضافه می گردد.
لینک دادن به یک فایل StyleSheet (در صورت موبایل بودن دستگاه یا هر دستگاهی با نهایت وضوح 480 پیکسل)
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />
لینک دادن به یک فایل StyleSheet درون دستورات CSS
@import url( small.css ) screen and ( min-width: 1200px );
استفاده از عملگرهای منطقی
AND
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}OR
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}NOT
@media not all and (max-width: 600px) {
html { background: red; }
}Exclusive
@media (max-width: 400px) {
html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
@media (min-width: 801px) {
html { background: blue; }
}Overriding
@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}در نهایت یک مثال کامل
@media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}مرورگرهایی که دستورات media@ را پشتیبانی می کنند:
- Firefox 3.5+
- Opera 9.5+
- Safari 3+
- Chrome
- Internet Explorer 9+