هر کاراکتر در کامپیوتر با عددی مشخص می شود که آن عدد همان کد کاراکتر است. در اصل کامپیوتر کاراکتر ها را فقط با عدد آن ها می شناسد و نمی داند مثلا حرف "a" چیست. بلکه می داند عدد آن 97 است. جالب تر این که کامپیوتر حتی همین 97 را هم نمی شناسد و با اعداد دودویی آن را تشخیص می دهد.

کد کاراکتر چیست؟

تمام کاراکتر هایی که ما استفاده می کنیم ، در جدول هایی بسیار بزرگ جمع آوری شده اند و به صورت قراردادی این کد ها به آن ها تعلق گرفته است که وقتی ما صفحه ای پر از کاراکتر را می بینیم ، کامپیوتر برای نمایش تمام این کاراکتر ها از آن جدول ها استفاده می کند. سیستم ها به طور پیشفرض از جدول ascii برای نمایش کاراکتر ها استفاده می کنند که جدول بسیار محدودی است و بسیاری از کاراکتر هایی که شاید به درد ما بخورند ، از جمله حروف فارسی را ندارند. اگر شما می توانید الان این حروف فارسی را ببینید به خاطر این است که کامپیوتر شما از جدولی به غیر از این جدول استفاده کرده است. جدول utf-8 جدولی کامل تر است که به دلیل استفاده از اعداد در مبنای 16 ، ظرفیت بسیار بیشتری دارد. این جدول شامل حروف فارسی و بسیاری کاراکتر های دیگر نیز هست.

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

دامنه چیست؟

دامنه یا domain آدرسی متنی است که به آی پی هایی از اینترنت اختصاص داده می شود. اگر دامنه نبود ما برای دیدن هر سایتی مجبور بودیم آدرس آی پی آن را وارد کنیم. همان طور که می دانید آی پی ها چهار عدد هستند که با نقاطی از هم جدا می شوند (مثل 192.168.0.1) و حفظ کردن آن ها به هیچ وجه راحت نیست. اما با وجود دامین دیگر کسی لازم نیست این آی پی ها را حفظ باشد تا بتواند سایت های محبوب خود را ببیند. وبلاگ ها به جای دامنه ، زیر دامنه (sub-domain) دارند و این زیر دامنه ها را به طور رایگان به صاحب وبلاگ ها ارائه می کنند. اما اگر شما بخواید یک دامنه ی شخصی برای خود داشته باشید باید چه کار کنید؟

برای مشاهده ی مطلب به طور کامل به ادامه ی مطلب بروید.

این مطلب کوتاه را نوشتم تا توضیح دهم که صفحات پویا و ایستا به چه معنی هستند و چه تفاوتی با هم دارند.

برای دیدن مطلب به طور کامل به ادامه ی مطلب بروید.

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

شاید تا به حال با کلمه ی cache (تلفظ: کَش) روبرو شده باشید. این کلمه مربوط به یکی از امکانات مرورگر ها است که اگر علاقه داشته باشید می توانید در این باره متن زیر را بخوانید.

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

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

برای مطالعه ی مطلب به طور کامل به ادامه ی مطلب بروید.

یک کوکی اطلاعات ذخیره شده روی رایانه شما توسط یک وب سایت که از آنها بازدید کرده‌اید می‌باشد.

در بعضی از مرورگرها، هر کوکی یک پرونده کوچک است اما در فایرفاکس، همه کوکی‌ها در یک پرونده واحد ذخیره شده‌اند، که در پوشه profile فایرفاکس قرار دارد.

برای مشاهده ی مطلب به طور کامل به ادامه ی مطلب بروید.

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

برای مشاهده ی مطلب به طور کامل به ادامه ی مطلب بروید.

 در پی درخواست یکی از کاربران ، این مطلب را ایجاد کرده ام. می خواهم در این جا به طور ساده طرز ایجاد یک پنجره ی شناور برای صفحات وب را آموزش دهم. در این آموزش از کد های html ، css و javascript و از کتابخانه ی jquery استفاده می کنیم.

برای این که کد ها را آزمایش کنید از ابزار زیر استفاده کنید:

دمو ساز - آزمایش کد ها

کد های html

خب! ابتدا کد های اچ تی ام ال:

<<<code>>>

<a href="#" title="باز کردن پنجره" id="winOpen"> open floating window </a>

<div class="win-blur"></div> <!-- صفحه ی تار پشتی -->

<div class="win-width"> <!-- تنظیم کننده ی پنجره -->

   <div class="win-page"> <!-- خود پنجره -->

      <span class="win-close">X</span> <!-- بستن -->

      <p>

         چیزی که در پنجره نمایش داده می شود.

      </p>

   </div>

</div>

<<</code>>>

توضیحات بیشتر در ادامه ی مطلب.

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

از نظر من CURL یکی از جالب ترین و باحال ترین قسمت های php است. این امکان به شما قدرتی می دهد که وقتی به آن قدرت دست پیدا کنید ، تازه حرف من را می فهمید.

شروع کار با CURL

خب! برای شروع کار با CURL در php ما باید از تابع curl_init استفاده کنیم. این تابع یک نشست برای ارسال درخواست ، ایجاد می کند.

<<<code>>>

$ch = curl_init();

<<</code>>>

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

توضیحات بیشتر در ادامه ی مطلب

همان طور که در مطالب قبلی هم توضیح داده شده است ، سی اس اس دارای یک سری ویژگی ها برای ایجاد انیمیشن است. من در این مطلب یک انیمیشن جالب درست کردم که شاید به درد بعضی از کاربران بخورد. همچنین این کد ها برای افرادی که می خواهند تجربه به دست بیاورند و تمرین سی اس اس داشته باشند ، بسیار مناسب است. این انیمیشن کاملا با کمک سی اس اس نوشته شده است و از جاوا اسکریپت یا جی کوئری در آن استفاده نشده است.

دموی این کد را در لینک پایین مشاهده کنید:

دموساز - دموی انیمیشن

برای مشاهده ی توضیحات بیشتر به ادامه ی مطلب بروید.

context چیست؟

کانتکست (context) همان منویی است که وقتی شما در صفحات وب ، روی قسمتی از صفحه کلیک می کنید ، باز می شود و این منو دارای امکاناتی است که به شما کار کردن با صفحات را آسان تر می کند. در html5 امکانی ایجاد شده است که شما می توانید با استفاده از موجودیت (attribute) رویداد oncontextmenu به راحتی این منوی راست کلیک را با موارد دلخواه خودتان کامل تر کنید.

نکته: این امکان فعلا تنها در فایرفاکس کاربرد دارد و در دیگر مرورگر ها فعال نیست. (به تاریخ مطلب دقت کنید)

خب! برای ساخت یک منوی اختصاصی باید از تگ های زیر استفاده کنید:

<<<code>>>

<menu>

   <menuitem> ... </menuitem>

</menu>

<<</code>>>

برای مشاهده ی توضیحات بیشتر و یک مثال به ادامه ی مطلب بروید.

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

اگر ما کد های جاوا اسکریپت را در بدنه ی فایل جاوا اسکریپت بنویسیم ، کد ها هنگامی که توسط مرورگر بارگذاری شوند ، اجرا خواهند شد. اما ما این را نمی خواهیم. اگر قرار باشد اینطور باشد که انیمیشن ها و تغییرات صفحه بی معنی خواهند بود. مثلا وقتی وارد یک صفحه می شویم ، قبل از این که ما روی دکمه ی "نمایش" کلیک کنیم ، قسمت مربوط به ما نمایش داده می شود. مطمئنا این چیزی نیست که ما نیاز داریم. برای این که این مشکل را حل کنیم ما از رویداد ها (events) جاوا اسکریپت استفاده می کنیم.

برای مشاهده ی آموزش به طور کامل به ادامه ی مطلب بروید.

همان طور که از عنوان مطلب مشخص است ، این مطلب مربوط به ایجاد یک نوار بارگذاری (لودینگ) برای صفحه است. خیلی ها برای نمایش بارگذاری از تصاویر gif استفاده می کنند. اما اگر دقت کرده باشید ، خیلی از این تصاویر به موقع لود نمی شوند و نمی توانند فرایند بارگذاری را به خوبی نشان دهند. برای مثال در بسیاری از وبلاگ های رزبلاگ ، وقتی در فرم ورود کاربران ، روی ورود کلیک می کنید ، قبل از این که تصویر بارگذاری مربوط به ورود کاملا نمایش داده شود ، ورود انجام می شود و تصویر لودینگ عملا هیچ زیبایی ای ندارد.

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

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

برای مشاهده ی مطلب به طور کامل به ادامه ی مطلب بروید.

حتما شما هم تا به حال با صفحاتی که تصویر پس زمینه ی آن ها به نسبت حرکت اسکرول (scroll) ، حرکت می کند روبرو شده اید. این صفحات با یک رویداد از jquery به نام scroll کار می کنند. این رویداد هنگامی است که کاربر ، صفحه را به سمت بالا و پایین و یا چپ و راست می برد (یعنی اسکرول را حرکت می دهد). حال اگر ما با استفاده از این رویداد ، حالتی را ایجاد کنیم که همزمان با بالا و پایین رفتن صفحه ، پس زمینه ی ما نیز مقدار حرکت کند ، می تواند حالت زیبایی به صفحه ی ما بدهد. شاید درست متوجه نشده باشید: در حالتی که پس زمینه ی ما با استفاده از css در حالت fixed قرار داده شده است ، پس زمینه هیچ حرکتی نمی کند و همیشه در جالی خود ثابت است. و هنگامی هم که پس زمینه با استفاده از css در حالت scroll قرار داده شده است ، پس زمینه کاملا هم سرعت و هم زمان با حرکت اسکرول ، حرکت می کند. اما چیزی که ما می خواهیم در اصل یک حالت بین این دو حالت است. یعنی حرکتی نه به سرعت scroll و نه به ثابتی fixed. این حالت در زیبایی صفحه کمک زیادی می کند.

اول این نمونه را برای درک بهتر ببینید

در این مطلب توابع مربوط به نمایش و پنهان کردن جی کوئری با انیمیشن به همراه توضیحات قرار داده شده است.

مواردی که علامت ستاره (*) در کنار آن ها درج شده است ، توضیح بیشتری در پایین جدول دارند.

برای دیدن آموزش به ادامه ی مطلب بروید.

خیلی ها دوست دارند که وبلاگ یا سایتشان پر از انیمیشن های مختلف باشد. در این مطلب قرار است روشی برای ایجاد چرخش در المنت های صفحه با استفاده از css آموزش داده شود. این چرخشی که آموزش می دهیم دائمی خواهد بود و تا زمانی که کاربر در صفحه حضور داشته باشد ، این چرخش انجام خواهد شد.

 برای دیدن خروجی کد های خود از این لینک استفاده کنید

خیلی سریع میریم سروقت آموزش.

در css برای ایجاد انیمیشن باید از @keyframes استفاده کرد. ما هم همین کار را می کنیم:

<<<code>>>

@keyframes toolstheme

{

      ....

}

<<</code>>>

برای دیدن ادامه ی آموزش به ادامه ی مطلب بروید.