در این پست میخوام نحوه مهاجرت از html4 به html5 رو بدون از بین رفتن محتوا یا ساختار قبلیخدمتتون آموزش بدم
شاید فکر کنید که کار سختی در پیش دارید ولی اصلا این چنین نیست و شما خیلی راحت میتونید با تکنولوژی روز طراحی وب همگام شوید و به توصیه های کنسرسیوم جهانی وب عمل کنید پس این مطلب رو یاد بگیرید و در چند گام تمام فایل های اچ تی ام ال قبلی تون رو به html5 تبدیل کنید.
جی کوئری یک کتابخونه از جاوا اسکریپت هست و شاید بگید کتابخونه چیه، نگران نباشید همه چیزو خیلی ساده توضیح میدم
دوستان ما برای طراحی یک اپلیکیشن تحت وب نیاز به یادگیری زبانهای html , css , php داریم (البته میتونیم بجای php از زبانهای دیگه هم استفده کنیم) حالا اگه بخواهیم یکسری عناصر و رویدادها رو در سمت کلاینت یعنی توسط مرورگر کاربر کنترل و مدیریت کنیم و نیازی نباشه که پردازش توسط کامپیوتر سرور انجام بشه (مثلا وقتی کاربر روی یک دکمه در صفحه کلیک کرد یک پیاغام بلافاصله بهش نشون بدیم)در اینصورت علاوه بر سه زبان بالا باید یک زبان دیگه هم یاد بگیریم و اون کسی نیست جز زبان جاوا اسکریپت ، این زبان برنامه نویسی توسط مرورگرها تفسیر میشن بنابراین کدهایی که با زبان جاوا اسکرپیت نوشته میشن نیازی به پردازش در سمت سرور ندارند و مرورگر خودش کدها رو اجرا میکنه (مرورگرها قادرند زبانهای HTML و CSS و JAVASCRIPT رو پردازش کنند)
حالا که فهمیدیم جاوا اسکریپت چی هست و چرا استفاده میشه ، ممکنه بپرسید پس Jquery چیه ؟! نگران نباشید ، ادامه مطلب رو مطالعه بفرمائید
یکی از رویدادهایی که در صفحات وب اتفاق می افتد ، رویداد submit هست که در زمان ارسال فرم اتفاق می افتد و از لحظه فشرده شدن دکمه سابمیت فرم آغاز و تا اتمام ارسال کامل فرم به سمت سرور ادامه دارد ، لذا ما می توانیم یک تصویر لودینگ در صفحه قرار بدیم که خاصیت display آن برابر none باشه و در زمان ارسال فرم که رویداد submit اتفاق می افته display این تصویر رو در طول سابمت شدن فرم با استفاده از جاوا اسکریپت و جی کوئری نمایش دهیم:
که اگر برای مختصر نویسی از سینتکس جی کوئری استفاده کنید باید کتابخونه جی کوئری رو نیز دانلود و به صفحه تون لینک کنید که دقیقا به شکل زیر خواهد بود :
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Submit And Loading</title> <script src="js/jquery.min.js"></script> <style> .screen { display: none; width: 100%; height: 100%; position: fixed; top: 0; right: 0; z-index: 10; background:rgba(0,0,0,0.4); } .screen img { position: absolute; top: 50%; right: 49%; z-index: 100; } </style> </head> <body> <div class="screen"><img src="images/loading.gif"></div> <form action="" id="Form"> <input type="submit" value="Submit"> </form> <script> $(document).ready(function () { $("#Form").submit(function(){ $(".screen").css('display','block'); }); }); </script> </body> </html>
جهت دانلود آخرین نسخه کتابخونه جی کوئری به سایت جی کوئری مراجعه کنید و پس از دانلود که یک فایل با پسوند js هست رو با تگ <script> در قسمت head صفحه مثل نمونه کد بالا به سند تون لینک کنید.
من در اینجا هر دو فایل رو (تصویر لودینگ و فایل جی کوئری) قرار میدم ولی سعی کنید جی کوئری رو از سایت اصلیش دانلود کنید
دریافت
حجم: 40.3 کیلوبایت
توضیحات: فایل جی کوئری و تصویر لودینگ
همونطور که میدونید URL نام دیگر آدرس وب هست ، دقیقا مثل آدرس محل سکونت هر یک از ما در دنیای واقعی
پس هر وبسایتی یک آدرس اینترنتی داره که با عبارت URL شناخته میشه و هر URL هم شامل چند قسمت میشه که من فقط اشاره میکنم ، چون توی وبسایت های مختلف ، آموزش های زیادی در این خصوص وجود داره و نیازی به دوباره گویی نیست:
مثال : یک URL نمونه از وبلاگ من رو در نظر بگیرید
http://www.phpkar.blog.ir/posts/index.php
این آدرس صفحه index.php درون پوشه posts از وبلاگ من هست که خوب اگه آدرس بالارو بررسی کنیم میبینیم که به ترتیب از چپ به راست از قسمت های زیر تشکیل شده است:
- نوع سرویس اینترنتی : که معمولا یکی از پروتکل های http یا https یا ftp و یا file هست
- پیشوند : که بصورت پیشفرض در پروتکل http بصورت www نوشته می شود
- دامنه سایت : عبارت جایگزین شماره آی پی سرور هست مثل phpkar.blog.ir
- شماره پورت هاست : که بصورت پیشفرض در پروتکل http برابر با 80 هست و می توان در مرورگر تایپ نکرد
- مسیر یا دایرکتوری : نام دایرکتوری یا پوشه که در صورت خالی گذاشتن به ریشه هاست اشاره میکنه
- نام فایل یا سند : نام سند یا فایلی که در نهایت باید از وبسرور دریافت شود
نکته ای که اینجا هست اینه که URLها فقط می تونن بصورت ASCII character از طریق اینترنت به سمت سرور ارسال بشن و اگر در آدرس یک سایت کاراکترهایی غیر از ASCII character وجود داشته باشه ، باید در زمان ارسال درخواست دریافت اون سایت توسط مرورگر این کاراکترها به این استاندارد تبدیل بشن که این عمل تبدیل رو خود مرورگر انجام میده و شما قرار نیست کاری انجام بدید و هدف از یادگیری این مطلب این هست که بدونید چرا بعضی موقع ها توی URL ها عبارتهای اجق وجق میبینید.
البته بعضی موقع ها هم نیاز پیدا می کنیم که از رشته های URL ارسال شده توسط مرورگر ، در سمت سرور یکسری عبارتهای کدشده توسط مرورگر رو تبدیل به حالت اولش کنیم که میتونیم خیلی راحت بوسیله یکسری توابع در php اینکار رو انجام بدیم ولی فعلا در این پست میخواهیم بگیم که در زمان ارسال چنین کاراکترهایی چه مکانیزم هایی اتفاق می افته
مثلا مرورگر بجای کاراکترهای غیر اسکی علامت % رو قرار میده و بجای هر فاصله یک علامت + قرار میده که برخی مرورگرها بجای + از عبارت 20% نیز استفاده میکنند که میتونید با جستجوی عبارت " کاراکترهای اسکی " در گوگل یا سایر موتورهای جستجو به این لیست دسترسی پیدا کنید.
امیدوارم براتون مفید بوده باشه
در این پست میخوام برخی از ویژگی های جدید که در html5 وجود داره رو خدمتتون آموزش بدم ، پس با من همراه باشید
اولین چیزی که در html 5 بهینه شده ، سینتکس آسان و ساده شده تعریف نوع سند (DOCTYPE) هست که در اولین خط هر صفحه html قرار میگیره:
<!DOCTYPE html>
همچنین سینتکس تعریف Encoding صفحه هم خیلی ساده تر شده ، بصورت زیر :
<meta charset="UTF-8">
که یک نمونه اولیه سند HTML5 بصورت زیر نوشته میشه :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> </body> </html>
دوستان حتما شما هم توی پروژه هاتون نیاز به انتخابگر تاریخ شمسی پیدا کرده اید پس این پست رو بخوانید
برای دانلود پلاگین و ابزارهای آماده جی کوئری یک سایت معروفی هست که میتونید شماهم ازش استفاده کنید.
جهت ورود به سایت جی کوئری اسکریپت بر روی تصویر زیر کلیک کنید:
امروز هم وبسایتی رو معرفی میکنم که برای علاقه مندان به استفاده از متریال دیزاین بسیار کاربرد داره
متریال دیزاین یک سبک از طراحی هست که همه عناصر صفحه به شکل تخت باید باشند که برای این نوع طراحی دو راه حل داریم ، یا اینکه خودمان کلاس های css با این رویکرد و تفکر بنویسیم یا اینکه از فریمورکهای آماده ای که به سبک متریال دیزاین استایل های آماده ای رو نوشته اند استفاده کنیم که من در زیر لینک فریم ورک متریال دیزاین رو قرار دادم که شما میتونید وارد این وبسایت شده و بعد از دانلود فایل های css و js و اضافه کردن به پروژه تان شروع به استفاده از کلاسها و توابع آماده این فریمورک نمائید که البته مستندات خودشون کامل همه چی رو توضیح داده و کدها رو بابه همراه نمونه خروجی شان به شما نشون داده که براحتی میتونید ازش استفاده کنید
