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

:: پس اگر طراحی ، Html و جاوااسکریپت رو دوست دارید حتما آموزشهای مارو دنبال کنید !!!

:: جاوااسکریپت چیست ؟

جاوااسکریپت دقیقا یک زبان برنامه نویسی سمت مشتری (Client) برای پویا شدن و ایجاد انعطاف بیشتر کدهای Html هست . Client یا سمت مشتری بودن جاوااسکریپت به این معنیه که کدهای جاوااسکریپت توسط کامپوتر کاربر تفسیر و اجرا میشن و نه به وسیله ی سرورهای دیگه . کدهای جاوا اسکریپت می تونن بین کدهای Html قرار بگیرند و قابلیت های زیادی رو به یک صفحه ی اینترنتی اضافه کنن . بهتر بگم شما با کدهای Html فقط می تونید صفحاتی ایستا داشته باشید . یعنی در Html کاملا تعیین شده که فلان تگ فلان چیز رو در مرورگر نمایش میده . مثلا تگ <table> یک جدول ایجاد میکنه ، تگ <p> یک پاراگراف و …
ولی با کدنویسی جاوا اسکریپت شما خیلی کارای جالب تر و جذاب تر می تونید انجام بدید . مثلا با رفتن روی یه لینک یه سری اتفاقات جالب بیفته ، تاریخ و ساعت در صفحه داشته باشید ، با استفاده از یه فرم محاسبات ریاضی انجام بدید !  و خیلی کارای دیگه . خلاصه بگم . زبان جاوا اسکریپت براحتی می تونه به خشک و بی روح بودن Html تازگی و جذابیت ببخشه .

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

:: تاریخچه جاوااسکریپت :

به اختصار فقط بگم که بعد از اینکه طراحان وب متوجه شدند که Html به تنهایی نمی تونه ارتباط لازم رو با کاربر برقرار کنه به فکر ایجاد زبان جدیدی افتاند . به همین دلیل برای اولین بار شرکت Netscape در سال ۱۹۹۵ از این زبان در مرورگرهای خودش استفاده کرد . زبان جاوااسکریپت هم اکنون گسترش قابل توجهی داشته و استفاده از اون خیلی زیاد شده . البته توجه داشته باشید که جاوااسکریپت و جاوا ربطی به هم ندارند و دو زبان جدا از هم هستند .

:: در درسهای آینده بیشتر به سمت خود جاوا اسکریپت و شیوه ی نوشتن کدهای اون خواهیم رفت .

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

حالا اگه شما وبلاگنویس و یا دارای سایت باشید باید اهمیت موتورهای جستجو رو بیشتر درک کنید . اگر بتونید که رتبه ی خوبی تو موتورهای جستجو کسب کنید و مطالب سایت شما تو صفحات اول جستجو ظاهر بشن مطمئنا بازدید قابل توجهی رو می تونید از این راه بدست بیارید . پس اولین کاری که باید بکنید اینه که وبلاگ یا سایتتون رو توی این موتور های جستجو ثبت کنید . شاید با خودتون بگید ” بابا کی حال داره یکی یکی بره به همه ی این سایت ها و وب خودشو ثبت کنه . تو همین گوگل و یاهو ثبت می کنم کافیه ! “ ولی چرا فقط تو همین دو سایت ؟!!!

:: سایت های زیادی وجود دارند که اینکارو (ثبت وبسایت شما در چندین موتور جستجو) به صورت رایگان انجام میدن . امروز هم من یکی از این سایت ها رو بهتون معرفی می کنم . با ثبت وبلاگ یا سایت خود توی این آدرس به طور خودکار وبلاگ یا سایت شما تو بیش از ۱۳۰ تا از موتورهای جستجوی معروف از جمله Google , MSN , Altavista , SearchIt و … ثبت میشه !!!

:: در فرم سمت چپ این سایت اطلاعات وبسایت خود رو وارد کنید و دکمه ی Start رو بزنید :

.:. با کلیک روی این لینک سایت خود را در بیش از ۱۳۰ موتور جستجو ثبت کنید .:.

:: به همین راحتی در این همه موتور جستجو سایت خود رو ثبت کنید .

:: در ادامه ی بحث آموزش Html امروز تگ های Meta رو براتون آموزش میدم .

تگ های Meta بسیار فراوانند که ما در اینجا فقط به معرفی چند تا از اون ها که پرکاربرد هستند و شما به اون ها نیاز دارید می پردازیم :

● جایگاه تگ Meta :  تو درس قبلی یه اشاره به جایگاه تگ های Meta کردم . اگه درس ها رو دنبال کرده باشید من گفتم که تگ های Meta در بین تگهای Head قرار میگیرند. به شکل زیر :

همونطور که در بالا می بینید تگهای Meta بعد از تگ <head> و قبل از تگ <head/> اومدن .اگر چند تا تگ Meta به کار ببرید همشون در سطرهای زیر هم و در بین تگ های Head قرار میگیرن …

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

تگ متای توصیفی (Description meta Tags) :

در این گونه تگ های Meta شما در مورد صفحه ی وب ، وبلاگ و یا سایتتون توصیفی رو قرار میدین . شاید بپرسید که این به چه دردی می خوره ؟ خوب باید بگم که موتور های جستجوگر نظیر Google و Yahoo به این تگ اهمیت میدن . یعنی هنگام جستجو کردن ، توصیف درون این تگ رو دریافت می کنن و در صورت مربوط بودن به کلمه ی جستجو شده اون صفحه رو در نتایج جستجو قرار میدن . این تگ و توصیفی که در اون می نویسید می تونه در افزایش آمار بازدیدتون خیلی مؤثر باشه . فقط باید توجه داشته باشید که توصیف بیش از حد در این تگ هیچ تاثیری در بالاتر بردن کارایی اون نداره . سعی کنید یه توصیف کوتاه و دقیق راجع به صفحه رو در اون بگذارید . این تگ به شکل زیره :

تگ متای کلمات کلیدی (Keywords meta Tags) :

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

تگ های متای HTTP-EQUIV :

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

اولی برای اینه که مرور گر زبان صفحه رو فارسی تشخیص بده . البته این تگ برای زبانهای مختلف کاربرد داره و من اینجا فقط فارسیشو گذاشتم . دومی هم نوع نمایش متون رو تعیین می کنه که اینجا به صورت UTF-8  هست که برای زبان فارسی مناسب ترینه .  این تگهای متا که من معرفی کردم مهمترین و پرکاربردترین اونها بودن . تعداد تگ های متا زیادن که من فعلا به معرفی همین ها بسنده کردم .

حالا در آخر یه شکل از کد یه صفحه ی Html رو که این تگ های متا توش به کار رفته در زیر میارم تا با جایگاه و نحوه ی قرار گرفتن تگهای متا در کدهای یک صفحه بیشتر آشنا بشید . تگ های متا در یک صفحه ی Html فارسی به شکل زیر قرار میگیرن :

:: ترتیب قرار گرفتنشون زیاد مهم نیست .

:: امیدوارم تا اینجا با این مباحثی که توضیح دادم یه آشنایی مختصری با Html پیدا کرده باشید . من سعیم بر اینه که شما رو اول با همه ی تگهای Html آشنا کنم و بعد آموزش فرونت پیج رو هم بدم .

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

موفق و سربلند باشید .

:: یکی از عزیزان با نام ” بنیامین” سوال کرده بود که چطور می شه آهنگه های real player را که در سایت های مختلف فقط برای گوش دادن گذاشته شدند دانلود کرد ؟

 :: در بعضی از سایت ها آهنگهای ریال پلیر فقط برای گوش دادن گذاشته میشن و لینک دانلودشون رو مستقیما نمیدن . آقای بنیامین تو سوالشون سایت ترانه باران رو مثال زدن و گفتن چطور میشه آهنگ ها رو از این سایت دانلود کرد ؟

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

شما برای دانلود آهنگ باید ابتدا این فایل رو ( که حجمش معمولا بسیار کم هست ) دانلود کنید . سپس با استفاده از یک ویرایشگر متنی مثل NotePad این فایل رو باز کنید و آدرس آهنگ اصلی رو از توش در بیارید و با داشتن آدرس اصلی فایل ، اون رو دانلود کنید .

بزارید با مثال بگم :

مثلا در سایت ترانه باران به صفحه ی دریافت موزیک رفته و یکی از خواننده ها رو که می خواید آهنگاشو دانلود کنید انتخاب کنید . بعد آهنگ مورد نظر رو برای گوش دادن انتخاب کنید . مثلا اینجا من یکی از آهنگهای سیاوش قمیشی با نام پرسه رو مثال میزنم . برای اینکه آدرس فایل این آهنگ رو داشته باشید دکمه ی Shift رو پایین نگه داشته و روی لینک گوش دادن آهنگ مورد نظر کلیک کنید تا آدرس فایل اون آهنگ در آدرس بار صفحه ی جدیدی که باز میشه ظاهر بشه . که در مثال ما آدرس به شکل زیره :

http://www.taranehbaran.com/music/middleSmile/parseh_ghomayshi.smil

این فایل ها در واقع میانبر هایی مانند شورتکات ها در ویندوز هستند که شامل آدرس اصلی آهنگ هستن . این فایل ها در سایت ترانه باران با فرمت smil. هست . ولی ممکنه در سایت های دیگه با فرمتهای دیگه ای مثل ram  و یا فرمت دیگه ای باشه . به هر حال شما این فایل رو دانلود می کنید . بعد با ویرایشگری مثل NotePad که در ویندوز موجود هست این فایل رو باز کنید . در میان کدها به دنبال آدرس آهنگ بگردید که معمولا با فرمت rm. یا ra. هست .

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

http://www.taranehbaran.com/music/rm/parseh_ghomayshi.rm

با این ترفند می تونید آهنگ هایی رو که فقط برای گوش دادن گذاشته شدن ، دانلود کرد .  

● به دو نکته ی زیر توجه کنید :

۱- فایلی رو که آدرس آهنگ اصلی توش هست میتونید با راست کلیک روی لینک اون و انتخاب گزینه Save target as دانلود کنید . البته اگر راست کلیک رو در اون صفحه بسته بودن می تونید ابتدا کلیک چپ موس رو روی لینک پایین نگه دارید و بعد راست کلیک کنید . به این شیوه احتمالا می تونید در صفحاتی که راست کلیک رو بستن راست کلیک کنید . اگه نشد با نگه داشتن دکمه Shift و کلیک روی لینک ، آدرس اون رو در آدرس بار صفحه ی باز شده ببینید .

۲- در همه ی سایت ها با چنین شیوه ای نمی شه آهنگ ها رو دانلود کرد . بعضی از سایتها آدرس آهنگ اصلی رو که درون فایل میانبر هست به شیوه ای قرار میدن که به سادگی قابل دانلود نیست . مثلا اینکه آدرس به جای اینکه با http شروع بشه با پیشوند دیگه ای آغاز بشه.

:: تا حالا به این فکر افتادید که ارزش وبلاگ یا سایتتون چقدره ؟ منظورم ارزش از لحاظ تعداد بازدید و رنکینگ و از این چیزا نیست .  ارزش مادی وبلاگتون !!!

جالبه ! شما می تونید با مراجعه به آدرس زیر و وارد کردن آدرس وبلاگ یا سایتتون ارزش اون رو به طور تقریبی به دلار ببینید :

http://www.business-opportunities.biz/projects/how-much-is-your-blog-worth/

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

شما هم برید یه تستی کنید . شاید وبلاگتون میلیونی بود !!!

● آدرس وبسایت یا وبلاگتون عوض شده ؟ وبسایت جدیدی رو راه انداختین ولی نمی دونید چطور بازدیدکننده هاتون رو متوجه کنید ؟ دوست دارید همه ی بازدید کننده های وبسایت های قبلیتون به وب سایت جدیدتون هم بیان ؟ …

خوب کاری نداره !

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

من دوتا کد براتون میزارم که یکی Html و دیگری JavaScript هست .  در هر دو باید آدرس وبسایت جدید خودتونو به اضافه ی مدت زمان انتقال رو وارد کنید و کد رو در وبسایت قبلیتون قرار بدید .

● کد اول یک کد (تگ) اچ تی ام ال هستش و خیلی سادست :

یک تگ متا که باید اونو بین تگ های <head> و <head/> قرار بدید . می تونید تگ <head> رو که در همون اوایل کد html صفحه هست پیدا کنید و این کد رو بعد از اون بزارید . توجه کنید که آدرس وبسایت جدید خودتون رو به جای http://www.7learn.com  و مدت زمان انتقال رو هم از ۱۰ ثانیه به مقدار دلخواه تغییر بدید .

● کد جاوا اسکریپت انتقال از یک وبسایت یا وبلاگ به وب سایت با وبلاگ دیگه هم به شکل زیره :

● توجه : در این کد زمان به میلی ثانیه محاسبه میشه . مثلا برای انتقال پس از ۱۰ ثانیه باید مقدار ۱۰۰۰۰ رو وارد کنید که بر حسب میلی ثانیه هست . انتقال پس از ۳ ثانیه مقدار ۳۰۰۰ . این کد رو پس از تگ <body> میتونید قرار بدید .

:: الگوریتم عملکرد این کد هم به این صورته که اول یه تابع به نام  Go2NewUrl تعریف کردیم که کارش باز کردن یک صفحه هست . و بعد با قرار دادن یک شرط پس از مدت زمان مشخصی (در این کد ۱۰ ثانیه = ۱۰۰۰۰میلی ثانیه) تابع Go2NewUrl رو صدا میزنیم تا آدرس مورد نظر رو باز کنه .

:: تفاوت این دو کد به این شکله که کد html انتقال کاربر از یک سایت به سایت دیگه ، زمان رو پس از لود شدن کامل صفحه محاسبه میکنه . یعنی ۱۰ ثانیه پس از زمانی که صفحه ی وبسایت کاملا  بارگزاری شد انتقال صورت میگیره . ولی در کد جاوااسکریپت ، زمان ، پس از لود شدن خود کد جاوا اسکریپت شروع میشه .

:: تست این کد رو هم براتون گذاشتم : روی این لینک کلیک کنید تا پس از ۱۰ ثانیه به آدرس جدید منتقل بشید و از درستی و عملکرد این کد مطمئن بشید .
 

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

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

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

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

ابتدا باید صفحه رو طراحی کنید . می تونید این کار رو با برنامه هایی که برای طراحی صفحات وب وجود دارن انجام بدید . برنامه هایی مثل Front Page ، DreamWeaver و …

بعد از اینکه صفحه رو کامل طراحی کردید به کنترل پنل وبلاگتون ( در میهن بلاگ ) برید . روی لینک مدیریت صفحات اضافی وبلاگ در سمت راست کنترل پنلتون کلیک کنید .

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

در آخر روی دکمه ی اضافه کردن قالب جدید کلیک کنید تا صفحه ی جدیدتون رو ایجاد کنید .

 :: دو نکته :

برای دریافت کد صفحه ای که طراحی کردید ، اون صفحه رو با اینترنت اکسپلورر باز کنید . بعد از منوی View روی گزینه Source کلیک کنید .

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

:: دوستان عزیزی هم که در بلاگفا مشغول وبلاگنویسی هستند برای ایجاد صفحات اضافی در وبلاگشون می تونن به اینجا مراجعه کنند .