در این جلسه از سری آموزش های دوران طراحی وب قصد داریم نحوه اجرای متد ها یا بهتر بگوییم توابع این کتابخانه جاوااسکریپت رو مورد بررسی قرار دهیم (بیشتر…)
دسته: آموزش
-
آموزش تگ audio در HTML5
سلام به تمامی بچه های گل تمپها . امیدوارم از سری آموزش های دوران طراحی وب لذت کافی رابرده باشید امروز می خواهیم در مورد تگ audio در زبان HTML5 صحبت کنیم .
همانطور که گفتیم این تگ در ورژن پنجم از زبان html اضافه شده است و در ورژن های قبلی از این زبان وجود نداشت . خب برسیم به تگ audio در زبان html5 , همانطور که از نام این تگ پیداست کار این تگ اضافه کردن یک فایل صوتی یا بهتر است بگوییم یک آهنگ به صفحه سایتمان , البته از این تگ به منظور کار هایی دیگری هم استفاده می شود که بیشتر جنبه کاربر پسند دارد , مانند صدای آلرتی که هنگام دریافت یک پیغام یا یک ایمیل پخش می شود که حتما در آموزش های بعدی جاوااسکریپت به این موضوع می پردازیم . لازم به ذکر است که این تگ در مرورگر های IE ورژن 9 به بالا , فایرفاکس , کروم , سافاری و اپرا پشتیبانی می شود . این تگ نیز مانند تگ video در زبان html5 فایلی که می خواهد پخش شود باید در مرورگر مربوطه پشتیبانی شود , که معمولا فرمت این فایل های صوتی MP3,Ogg,Wavمیباشد , جدول زیر نحوه پشتیبانی مرورگر ها از این فایل های صوتی را شرح می دهد .
Browser MP3 Wav Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES YES NO Opera 10+ NO YES YES و اما ساختار دستوری این تگ بسیار شبیه تگ video که قبل تر در مورد آن صحبت کردیم می باشد :
[html]
< audio controls autoplay>
<source src=”sound.ogg” type=”audio/ogg”>
<source src=”sound.mp3″ type=”audio/mpeg”>
</audio>[/html]
این قطعه کد باعث ایجاد یک پلیر و پخش فایل صوتی در سایت شما می شود . خصوصیت controls در تگ audio قابلیت پلیر و یا مدیریت خط فرمان و بلندی صدا را فعال می کند
تگ source نیز درون تگ audio به انتخاب فایل های صوتی می پردازد همانطور که قبل تر گفتیم ما اگر بخواهیم کلیه مرورگر ها از این فایل صوتی در سایت ما پشتیبانی کنند مجبور به اضافه کردن آن فایل صوتی به فرمت های ذکر شده هستیم
صفت src درون تگ های source نشان دهنده آدرس فایل صوتی مورد نظر می باشد و صفت type نیز در این تگ نشان دهنده نوع آن فایل صوتی می باشد که به صورت کامل در جدول زیر ذکر شده است :
Format type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav و اما در آخر هم خاصیت autoplay که همانطور که از نامش پیداست به معنی پخش خودکار فایل صوتی در صفحه می باشد
تا این جا ما با تگ های audio و video در html5 آشنا شدیم اما این تگ ها معمولا به صورت سفارشی با زبان جاوااسکریپت ترکیب می شوند و یک پلیر یا پخش کننده بسیار خوب را می سازند که ما حتما در سری آموزش های javascript و jquery به نحوه سفارشی کردن این تگ ها و option ها و api های فوق العاده این تگ ها می پردازیم .
خب به این ترتیب به پایان یکی دیگر از سری آموزش های دوران طراحی وب رسیدیم . امیدوارم از این آموزش لذت کافی را ببرید .
موفق پیروز و سربلند باشید
-
دستور Border radius در CSS3
در این قسمت از سری آموزش های دوران طراحی وب به موضوع زیبا سازی تگ های درون صفحه می رسیم . در این قسمت دستور border radius در زبان css3 مورد بررسی قرار می دهیم . (بیشتر…)
-
آموزش jquery – انتخاب المنت ها
با سلام خدمت تمامی دوستان آموزش امروز رو با کمی تاخیر خدمت شما تقدیم می کنم . در این قسمت از سری آموزش های دوران طراحی وب ادامه قسمت قبلی یعنی آموزش jquery رو دنبال می کنیم .
در قسمت قبل ساختار اصلی jquery رو مورد بررسی قرار دادیم و در این قسمت قصد داریم نحوه انتخاب المان ها و استفاده کردن از آن رو توضیح دهیم .
در ابتدا بهتر است بگوییم انتخاب المنت در صفحه به چه معنی می باشد ؟ المنت به تک تک تگ ها یا المان های درون سایت مانند عکس , ویدیو , پاراگراف , لینک ها و … گفته می شود , حالا چه لزومی دارد که ما این المان ها را انتخاب کنیم ؟ جواب این سوال بسیار ساده می باشد و آن این است که شما هنگامی که می خواهید درون صفحه خود بر روی یکی از تگ ها یا المان ها تغییری ایجاد نمایید می بایست ابتدا آن تگ را انتخاب کنید و به قول معروف آن را Select کنید . در jquery یک سلکتور فوق العاده کارآمد و عالی تعبیه شده است که شما بسیار با آن راحت هستید ! در ادامه خواهیم دید که این selector ها چگونه شما را به وجد می آورد !
همانطور که قبل تر در آموزش اول گفتیم کلیه کد های jquery درون قطعه کد زیر قرار خواهد گرفت :
[javascript]
$(function){
// Your Jquery Code Here
})[/javascript]
اما دستور انتخاب المان در jquery به صورت زیر می باشد :
[javascript]
$(selector)
[/javascript]
که در قطعه کد بالا علامت $ به معنای jquery می باشد و کلمه selector نیز نشانگر المانی است که می بایست انتخاب شود . در ادامه با برخی از انتخاب های المان های مختلف آشنا خواهیم شد .
برای انتخاب تمامی تگ های p درون صفحه از دستور زیر استفاده می شود :
[javascript]
$(“p”)
[/javascript]
برای انتخاب تمامی عکس ها یا تگ img درون صفحه از دستور زیر استفاده می شود :
[javascript]
$(“img”)
[/javascript]
برای انتخاب تمامی تگ های div درون صفحه از دستور زیر استفاده می شود :
[javascript]
$(“div”)
[/javascript]
برای انتخاب تمامی تگ ها و اجزای درون صفحه از دستور زیر استفاده می شود :
[javascript]
$(“*”)
[/javascript]
برای انتخاب تمامی المان های درون صفحه که دارای خاصیت class=class1 هستند درون صفحه از دستور زیر استفاده می شود :
[javascript]
$(“.class1”)
[/javascript]
برای انتخاب تمامی المان های درون صفحه که دارای خاصیت id=id1 هستند درون صفحه از دستور زیر استفاده می شود :
[javascript]
$(“#id1”)
[/javascript]
حال بیایید کمی از عجایب این انتخابگر ها مثال بزنیم
این دستور کلیه checkbox های درون صفحه را مورد انتخاب خود قرار می دهد :
[javascript]
$(“:checkbox”)
[/javascript]
این دستور کلیه input های انتخاب فایل درون صفحه را مورد انتخاب خود قرار می دهد :
[javascript]
$(“:file”)
[/javascript]
و باز هم کمی سخت تر !
این دستور تگ div را که دارای خاصیت class با نام myclass را دارد مورد انتخاب قرار می دهد :
[javascript]
$(“div.myclass”)
[/javascript]
این دستور تگ div را که دارای خاصیت id با نام myid را دارد مورد انتخاب قرار می دهد :
[javascript]
$(“div#myid”)
[/javascript]
حال ما تا حدودی از این selector ها را به طور مختصر توضیح دادیم که البته از خودتان انتظار نداشته باشید که کلیه این قطعه کد ها را به این زودی متوجه شده باشید در قسمت های بعدی حتما مفصل تر این انتخابگر ها را پیشرفته تر و عمیق تر خواهیم کرد تا شما به قدرت jquery پی ببرید و به کار خود افتخار کنید . فقط در مورد خوبی این selector ها این نکته را بدانید که به یک از اجزای صفحه که می خواهید می توانید به راحتی با استفاده از این انتخابگر ها دسترسی پیدا کنید و به زودی عاشق کار با آن می شوید . اما یک مثال کوچک که در مورد آن در این قسمت زیاد توضیح نمی دهیم این است که حال ما این المان ها را انتخاب کردیم و باید با از آن ها چگونه استفاده کنیم ؟ جواب شما بسیار ساده است و آن این است که شما باید از متد های عالی jquery بر روی المان خود استفاده کنید , قطعه کد زیر تمامی تگ های img یا عکس های دورن صفحه را مخفی می کند :
[javascript]
$(“img”).hide()
[/javascript]
می دونم خیلی کد ها براتون می تونه گنگ باشه اما کمی که با این دستورات کار کنید متوجه می شوید که jquery فوق العاده است . در قسمت بعد بسیار مفصل تر و حرفه ای تر در مورد انتخابگر ها صحبت می کنیم .
به این ترتیب به پایان قسمت چهارم از سری آموزش های دوران طراحی وب می رسیم و امیدوارم که از این آموزش نهایت استفاده را برده باشید در ضمن ما رو از نظر های خوبتون مطلع کنید .
موفق پیروز و سربلند باشید
-
آموزش jquery – ساختار اصلی
در این قسمت از سری آموزش های دوران طراحی وب می رسیم به بحث شیرین Jquery و ساختار اصلی این فریم ورک . (بیشتر…)
-
آموزش استفاده از متد Fullscreen در HTML5
امروز در دومین قسمت از سری آموزش های دوران طراحی وب به سمت متد های جدید HTML5 می رویم
در این قسمت قصد داریم از متدی جدید یا بهتر بگوییم API جدید در زبان HTML5 به نام متد Fullscreen استفاده کنیم و نحوه کار کردن با آن را شرح دهیم . هنگامی که زبان HTML5 رونمایی شد بسیاری از API های مفید و جدید نیز برای آن معرفی گردید که قبل تر این گونه امکانات به وسیله برنامه های جانبی از جمله فلش قابل اجرا بود . با استفاده از این متد می توانیم تمام صفحه سایت خودمان را فول اسکرین یا تمام صفحه کنیم , اما خوبی های این قابلیت جدید به اینجا ختم نمی شود زیرا به کمک این متد می توان کلیه اجزای صفحه از جمله ویدیو ها و تصاویر و… را در سایز بزرگتر یا تمام صفحه نمایش دهیم .
استفاده از این API بسیار ساده می باشد و نیازی به کدنویسی زیادی ندارد .
متد های این API :
دستور زیر یکی از اجزای صفحه را به حالت تمام صفحه می برد:
[javascript]
document.requestFullScreen()
[/javascript]این دستور تگی با آی دی canvas1 را به حالت تمام صفحه می برد:
[javascript]
document.getElementById(“canvas1”).requestFullScreen()
[/javascript]دستور زیر برای خارج شدن از حالت تمام صفحه است:
[javascript]
document.cancelFullScreen()
[/javascript]این دستور در صورتیکه کاربر در حالت تمام صفحه باشد، دستور زیر مقدار true را به عنوان خروجی باز می گرداند:
[javascript]
document.fullScreen
[/javascript]اگر بخواهیم بفهمیم کدام المنت در حالت تمام صفحه قرار دارد، می توانیم از این دستور استفاده کنیم:
[javascript]
document.fullScreenElement
[/javascript]فقط باید به این نکته مهم نیز توجه داشت که نحوه استفاده از این متد در مرورگرهای مختلف از جمله کروم و فایرفاکس متفاوت است و باید متد خاص هر مرورگر را نیز فراخوانی کنیم و باز هم بزرگترین مشکل برنامه نویسان و طراحان وب یعنی ناسازگاری کد ها با مرورگر های مختلف این بار هم گریبانگیر آنان است , این متد با مرورگر های اینترنت اکسپلور و اپرا در ورژن های پایین رابطه خوبی ندارد
اما بییایید کمی خلاقیت به خرج دهیم و کد هایمان را بهینه سازی کنیم :
تابع زیر هر المان یا عنصری از صفحه را که به عنوان آرگومان ورودی دریافت می کند آن را تمام صفحه یا فول اسکرین می کند
[javascript]
var fullScreen = function (element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
[/javascript]نحوه استفاده از این تابع به صورت زیر می باشد :
فول اسکرین کردن کل صفحه :
[javascript]
var $document = document.documentElement;
fullScreen($document);
[/javascript]فول اسکرین کردن یک المان خاص :
[javascript]
var canvas = document.getElementById(‘canvas’);
fullScreen(canvas);
[/javascript]و اما میرسیم به قسمت خارج شدن از Fullscreen (بازهم خلاقیت!) :
[javascript]
var cancelFullscreen = function () {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.webkitCancelFullScreen ) {
document.webkitCancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
[/javascript]
و اما استفاده از آن :
[javascript]
cancelFullscreen()
[/javascript]خب به این ترتیب به پایان قسمت دوم از دوران طراحی وب رسیدیم . امیدوارم از این آموزش لذت کافی رو ببرید . اگر سوالی بود لطفا در بخش دیدگاه ها مطرح فرمایید
موفق پیروز و سربلند باشید -
آموزش قرار دادن تگ video در HTML5
در اولین قسمت از سری آموزش های دوران طراحی قصد داریم که به معرفی و نحوه استفاده از تگ Video در HTML5 بپردازیم .
-
دوران طراحی وب – مقدمه
از امروز در سایت دوره آموزشی طراحی وب سایت با عنوان دوران طراحی وب آغاز خواهد شد .
در این دوره نظر شما کاربران گرامی به مباحث و نکته های طراحی وب به زبان های HTML5,Jquery,css3 جلب می نماییم. (بیشتر…) -
آموزش طراحی صحنه دراماتیک اسپارتان با فتوشاپ
در این آموزش ما میخواهیم یاد بگیریم که چگونه دو منظره صخره و صحرا را با هم ترکیب کنیم و با استفاده از تنظیمهای مختلف لایهها صحنهی تیر خوردن اسپارتان را به حالت پرسپکتیو طراحی کنیم. با ما همراه باشید!
-
آموزش طراحی پوستر فانتزی در فتوشاپ
در این آموزش فتوشاپ روش ایجاد یک پوستر فانتزی را به شما نشان خواهم داد که در آن از افکتهای نور و آتش استفاده خواهم کرد تا نتجیه پایانی حاصل شود.
-
آموزش ساخت آسان افکت پراکندگی در فتوشاپ
دادن یک افکت پراکندگی یا Splatter به یک شی می تونه یه تصویر شگفت آور بسازه. بهترین قسمتش اینه که، خیلی سریع و آسونه و فقط با چند براش فتوشاپ انجام می گیره. اما نتیجه خیلی پیچیده میشه جوری که انگار چندین ساعت برای ساختش زمان برده.در این آموزش، من به شما در سه گام آسان روش ساختن اثر پراکندگی رو می آموزم. برای دیدن آموزش به ادامه نوشته بروید.