اضافه کردن ترجمه یا ساب تایتل به ویدئو های خود در html5

یک پلاگین جی کوئری  به اسم cue-points  که با کمک html5 به شما این قابلیت رو میده که به ویدئو های خودتون ترجمه یا به عبارت درست (sub Title ) اضافه کنید.

نحوه کارش هم بسیار آسون هست. کافیست پس از ضمیمه کردن پلاگین به صفحه تون کد زیر را وارد کنید.


$(document).ready(function(){
  var slides = {5:"Hello World"}
  cuepoint.init(slides);
  cuepoint.play();
});

جهت دریافت پلاگین به اینجا مراجعه کنید

پایان یک مشکل جهنمی، نحوه استفاده css3 در Internet Explorer

تمام طراحان وب در حال حاضر با یک معضل بزرگ و مشترکی در انجام طراحی صفحات وب مواجه هستند. و اون هم مرورگر وب جهنمی یعنی Internet Explorer است. Internet Explorer به راستی اشک طراحان وب رو درآورده. امکان نداره یک پروژه رو انجام بدهیم و شاهد نا هماهنگی هایی در نسخه های مختلف این مرورگر نباشیم.

از تمامی این ناهماهنگی ها بگذریم می رسیم به پیشتیبانی نکردن از ابزار ها جدید. یکی از این ابزار ها CSS3 می باشد .که با ظهورش قدرت زیادی به پویا کردن صفحات وب ارائه کرد. متاسفانه Internet Explorer در هیج کدام از نسخه های جدید و پایدارش از این ابزار پشتیبانی نمی کند. از آنجایی که این مرورگر بر روی کامپیوتر خیلی از کاربران نصب می باشد،  متاسفانه بیشتر بازدید کنندگان وب سایت ها از این مرورگر جهنمی بهره می بردند.

در بازار وب مخصوصا در ایران کارفرمایان و مشتریان خواهان استفاده از آخرین ابزار ها و تکنولوژی های روز در وب سایتشان هستند. و از طرف دیگر چون هنوز درصد زیادی از بازدید کنندگان از این مرورگر استفاده میکنند.  مجبورند یکی را انتخاب کنند یا هماهنگی با Internet Explorer یا استفاده از نوآوری های وب. در این وسط ما طراحان وب هستیم که هلاک می شویم تا در مرحله اول مشتری را توجیه کنیم و در مرحله دوم وب سایت را با Internet Explorer هماهنگ کنیم.

در راستای همین  مشکلات  یک برنامه نویس خوش ذوق به نام Jason Johnston که اتفاقا از دیار کفر و استکبار هم هست به همراه چند تن دیگر از برنامه نویس بیکار دنیای اوپن سورس (اصطلاحی که برنامه نویسان ایرانی برای توجیه کردن خود که چرا در پروژه های اوپن سورس شرکت نمی کنند )، پروژه ای را شروع کردنند تا  بتوان CSS3 را در نسخه های فراگیر Internet Explorer رو شبیه سازی و استفاده کرد.

اسم این پروژه CSS3PIE هست. در این پروژه به کمک جاوا اسکریپت خاصیت های ارائه شده در Css3  را شبیه سازی می کنند.همکنون  ۲ نسخه ارائه دادند که در نسخه اول مشکلات زیادی به همراه بود و در آخرین نسخه که  من در یکی از پروژه های دولتی از CSS3PIE بهره بردم ،  هیچ مشکل خاصی نه خودم شاهدش بود نه کسی گزارش داده.

CSS3PIE در حال حاضر می تواند از این خاصیت های CSS3 زیر پشتیبانی و آنها را به خوبی شبیه سازی کنید.

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

شما فقط کافیست فایل PIE.htc در روت وب سایت خود کپی نمایید. و در هر کجا که از خاصیت های CSS3 بهره میگیرید فقط خط زیر را درج نمایید.

behavior: url(PIE.htc);

همانند مثال زیر :

#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(PIE.htc);
}

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

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

مقدمات یادگیری JQUERY

همینطور که میدونیم JQUERY یک کتابخانه جاوا اسکریپت هست . پس نیاز هست مقداری آشنایی با این زبان کلاینت ساید داشته باشید.

اما از همه مهمتر  شما باید با تگ ها و المنت های html و xhtml  آشنایی داشته باشیم. در این پست سعی می کنم موارد ضروری، که باید حتما بلد باشید رو مختصری توضیح میدهم!!

هر عنصر یا المنت می توانید دارای بخش های زیر باشد.

۱- صفات (Attribute’s) : شامل صفت هایی هستند که ما به عنصرهای داخل صفحات میدهیم. مانند title,dir,lang, hight,widthو
name ……


<div dir="rtl" lang="fa" title="hello"></div>

نکته : در خیلی از عنصر ها صفات خاص دارند یا صفاتی که در سایر عنصر ها هستند رو ندارند.

۲- شناسه یکتا ( ID ) : ما می توانیم به هر عنصر یک شناسه یکتا اختصاص بدیم تا بتونیم به راحتی از سایر عنر های هم نوع شناسایی و انتخاب کنیم


<div id="maindiv"></div>

۳- کلاس (class) : تعریف کلاس هم یک نوع شناسه هست. هم میتواند یکتا باشد. هم یکتا نباشد. و بیشتر در صفحاتی که بر پایه css طراحی می شود استفاده می شود.


<div class="hidediv"></div>

۴- سبک (style) : به کمک این صفت می توانید صفاتی که برای ظاهر عنصر مورد استفاده میگیرند رو در این صفت و inline قرار بدید


<div style="width:30px; height:40px; background:#CCCCCC;"></div>

سوال اینجاست اینها به چه درد ما میخوره؟!

سوال خوبی هست. باید خدمتتون عرض کنم که برای کنترل عنصر ها توسط جاوا اسکریپت ما نیاز داریم که بتونیم عنصر مورد نظرمون رو سریع پیدا کنیم. راه های زیادی هست برای شناسایی. شاید سریع ترین راهی که مد نظرتون بیاد این هست که ما میتوانیم کل عنصر ها رو اسکن کنیم و عنر مورد نظر رو پیدا میکنیم. اما به نظر شما این کار درست و بهینه ای هست؟ شاید در صفحای که ما میخواهیم این کار رو انجام بدیم صدها عنصر همانند وجود داشته باشه؟ اونقت به نظر شما چه مقدار وقت باید صرف پیدا کردن عنصر مورد نظرمون بکنیم؟

در مطلب بعدی خواهیم دید که ما توسط jquery  چه طور به کمک موارد بالا یعنی شناسه ها ، کلاسها یا نوع عنصر به راحتی عنصر مورد نظرمون رو پیدا خواهیم کرد.

JQuery (جی کوئری) چیست

JQuery یک فریمورک جاوا اسکریپت می باشد. اما اصلاً یک فریمورک چیست؟ و فقط مورد نیاز یک برنامه‌نویس است یا یک طراح وب هم می‌تواند از آن بهره ببرد؟

نمی‌دانم وقتی صحبت از فریمورک می‌شود چه تعریفی برای آن در ذهن دارید. بطور کلی می‌توان فریمورک را مجموعه‌ای از ابزارها، کتابخانه‌ها، قراردادها و بهترین شیوه‌ها تعریف کرد بطوریکه سعی می‌کنند وظایف روتین را به سوی مدل‌های جامعی سوق دهند که دوباره می‌توانند مورد استفاده قرار بگیرند. هدف این است که به یک طراح یا توسعه دهنده اجازه داده شود تا بر روی وظایفی که در انجام پروژه مهم هستند تمرکز کند. البته وقتی صحبت از فریمورک می‌شود الزاماً در مورد چیزی که ساخته شده، بصورت پکیج در آمده و برای عموم منتشر شده حرف نمی‌زنیم. چرا که ممکن است یک فریمورک منحصراً برای شما یا تیم شما باشد.(منبع الوان وب)

همینطور که در بالا توضیح داده شد. jquery یک کتابخانه از توابع آماده شده برای جاوا اسکریپت می باشد. در این زمینه فریمورک های دیگری هم وجود دارند. همانند Prototype و MooTools و فریمورک معروف یاهو با نام YUI .که هر کدوم از این فریمورک ها داری معایب و مزایای مختص خود هستند.

Continue reading “JQuery (جی کوئری) چیست” »