مروری بر HTML5 و بهترین کاربردهای آن
حتماً تاکنون آوازه HTML5 را شنیدهاید. HTML5، یک فناوری فوقالعاده است که به عنوان منجی اینترنت معرفی میشود و امکان طراحی صفحات وب غنی و جذاب بدون استفاده از برنامههای فلش و «سیلور لایت» (Silverlight) را برای برنامهنویسان وب فراهم میآورد. اگر بخواهیم HTML5 را بهطور کلی تعریف کنیم باید بگویم که این فناوری یک استاندارد نوشتن صفحات وب، روش جدیدی برای افزودن قابلیت تعامل به این صفحات و مجموعهای از «رابطهای برنامهنویسی وب» (API) است.
در این آموزش، ما فرض میکنیم که شما از قبل با HTML و CSS آشنایی دارید یا حتی شاید در زمینه طراحی وبسایت نیز تجاربی داشته باشید. بنابراین آنچه در این آموزش بحث میشود برای شما چندان جدید یا ناآشنا نیست. هدف این راهنما، آموزش کامل و مفصل HTML5 نیست و تشریح کامل و جزئی این مبحث از محدوده این آموزش خارج است. هدف این است که مقدمهای بر این فناوری شگفتانگیز وب داشته باشیم و برخی از روشهای جالب برای استفاده از آن در وبسایتها را به شما معرفی کنیم.
چرا قصد یادگیری HTML5 را دارید؟
این سوال، یک پرسش منطقی است. در دنیایی که گوشیهای هوشمند و برنامههای قابل اجرا بر روی این گوشیها در همهجا گسترده شدهاند، آیا یادگیری نوشتن برنامههای وب واقعاً اهمیت دارد؟ واقعیت این است که حتی اپلیکیشن گوشیهای هوشمند را میتوان با فناوریهای HTML5 ایجاد کرد. زمانی اپلیکیشن فیسبوک برای اندروید با استفاده از HTML5، CSS و جاوا اسکریپت نوشته شده بود.
شرکت بلک بری یکی دیگر از شرکتهایی است که بسیار علاقمند به استفاده از این فناوری است. این شرکت توسعه دهندگان خود را به استفاده از فناوریهای وب برای توسعه برنامههای کاربردی گوشیهای هوشمند خود تشویق میکند. میتوان گفت که امروزه دانش کار بر روی HTML5 در بازار اپلیکیشنهای موبایل ضروری است. علاوه بر این، اگر شما یک توسعه دهنده وب باشید، یادگیری HTML5 برای حرفه شما مناسب است. آمار نشان میدهد که اغلب شرکتها، وب سایتهای خود را با استفاده از HTML5 تغییر میدهند بنابراین توسعه دهندگانی که با این فناوری آشنایی داشته باشند، موفقتر خواهند بود.
پیش نیازهای مطالعه آموزش
دو پیشفرض برای این آموزش در نظر گرفته شده است. اول اینکه فرض شده است که شما میدانید وب چگونه کار میکند و همچنین فرآیند چگونگی ایجاد یک صفحه وب را میشناسید. شما باید قادر به ترکیب برخی از عناصر HTML5 باشید و بتوانید اطلاعاتی را در یک مرورگر وب نمایش دهید. همچنین باید با تگهای رایج HTML همانند <div> و <p> آشنا بوده و کدهای اولیه HTML را نوشته یا ویرایش نمایید. ثانیاً، فرض شده است که با فناوری CSS و چگونگی کارکرد آن آشنایی دارید. البته نیازی نیست که شما یک طراح حرفهای باشید و تمام دستورات CSS را بدانید. با این حال، باید بتوانید یک سبک را به عناصر صفحه وب اختصاص دهید. قادر به ایجاد ارتباط بین صفحه وب و فایل CSS باشید و تفاوت بین ID و Class را بدانید و با نحوه استفاده از هر کدام از این دو برای سبکدهی عناصر آشنا باشید.
شما به یک ویرایشگر متن و مرورگر مدرن نیز نیاز دارید. نسخههای مرورگر اینترنت اکسپلورر قبل از IE9 و برخی از نسخههای قدیمی مرورگرهای کروم، فایرفاکس و سافاری نیز بسیاری از ویژگیها از جمله بخشهایی از فناوری HTML5 را پشتیبانی نمیکنند و در صورت استفاده از این مرورگرها ممکن است قادر به اجرای دستورالعملهای ذکر شده در این آموزش نباشید. بنابراین، ما پیشنهاد میکنیم که یک مرورگر جدید مانند کروم یا فایرفاکس را انتخاب نمایید.
ویرایشگرهای متن برای توسعه وب
«ویرایشگر متن» (Text Editor)، ابزاری است که میخواهید برای نوشتن کد خود استفاده کنید. توجه داشته باشید که ویرایشگر متن، یک «ویرایشگر کلمه» (Word Processor) نیست. برنامههایی مانند برنامه Word از مجموعه آفیس یا نرمافزار Pages شرکت اپل برای توسعه وب مناسب نیستند. دلیل این امر این است که این برنامهها، اطلاعات اضافی به فایلهای HTML، CSS و جاوا اسکریپت اضافه میکنند که مرورگر قادر به خواندن این نوع اطلاعات نمیباشد.
یک ویرایشگر متن، مشخصات عناصر را درون یک فایل متنی قرار میدهد؛ بنابراین، این ابزار امکان ایجاد فایلهای بدون فرمتبندی اضافی را فراهم میآورند و شما میتوانید فایل را با فرمت دلخواه ذخیره نمایید. اگر از سیستم عامل ویندوز استفاده میکنید، ویرایشگر متن Notepad بر روی سیستم شما نصب است و در صورت تمایل میتوانید برنامه ++Notepad که برای این کار مناسبتر است را نیز دانلود کرده و نصب نمایید.
اگر رایانه مورد استفاده شما مک است، شرایط کمی متفاوت خواهد بود. سیستم عامل OS X دارای چهار ویرایشگر متن Pico، Emacs، Vim و Nano است. با این حال، بر خلاف Notepad، تمام این برنامهها در ترمینال کار میکنند. البته برنامههای ذکر شده برای افراد تازهکار در زمینه طراحی وب مناسب نیستند و ما نیز در این آموزش از آنها استفاده نخواهیم کرد. با اینحال، زمانیکه به نرمافزارها و فرآیند توسعه وب مسلط شدید، برنامههای Vim و Emacs را حتماً بررسی کنید. این دو ویرایشگر متن بسیار قدرتمند هستند و هنگامی که در زمینه طراحی وب حرفهای شوید، میتوانند در صرفهجویی وقت به شما کمک کنند. در لینوکس، ویرایشگر متن متفاوتی در نسخههای مختلف عرضه شده است در توزیع اوبونتو، ویرایشگر Gedit عرضه شده است که یک ویرایشگر متن بسیار مناسب و شبیه به برنامه Notepad است.
با اینحال، در این آموزش، ما کدهای خود را با سه نرمافزار مختلف مینویسیم. اولین نرمافزار، ویرایشگر متن Sublime Text است. این ویرایشگر دارای تمام ویژگی لازم برای شروع آسان کد نویسی به زبان HTML برای یک توسعه دهنده تازهکار است. در مرحله اول، نمایش بخشهای مختلف کد با رنگهای متفاوت باعث درک بهتر آن میشود. ثانیاً، با این ویرایشگر به راحتی میتوان بین فایلهای پروژه حرکت کرده و آنها را مدیریت کرد. این برنامه برای حرکت بین فایلها و ویرایش فوری کدها بسیار مناسب است. دومین ابزار مورد استفاده در این آموزش، وب سایت Codepen.io است این وب سایت امکان نوشتن کدهای HTML، CSS و جاوا اسکریپت را به صورت رایگان فراهم میآورد. هنگام نوشتن کدها میتوانید نتیجه تغییرات را بلافاصله مشاهده کنید. سومین ابزار، کنسول توسعۀ جاوا اسکریپت در مرورگر گوگل کروم است. با استفاده از این کنسول میتوانید کدهای جاوا اسکریپت را بنویسید و بلافاصله اجرا کنید. این ابزار برای تشریح مفاهیم یا برای برنامهنویسی استفاده میشود.
نشانهگذاری معنایی
کدهای HTML بهطور کلی با تگهای <div> سازماندهی میشوند. با استفاده از این تگها میتوانید گروهی از عناصر را ایجاد کنید و سبکهای مورد دلخواه را به آنها اعمال نمایید. تگهای <div> به خوبی کار میکنند اما هنوز جا برای پیشرفت وجود دارد. مشکل تگ <div> این است که معنایی ندارد. در واقع عبارت Div بیانگر هیچ چیز خاصی نیست.
نشانهگذاری معنایی، یک ویژگی جدید در HTML5 است که تگهایی را ارائه میدهد که همان کار تگ <div> را انجام میدهند اما برای برچسبگذاری بخشهای مشترک یک صفحه استفاده میشوند. برای درک چگونگی کارکرد این تگها، کد زیر را در نظر بگیرید. این قطعه کد شامل دو بخش «سرآیند» (Head) و «بدنه» (Body) است که از یک نوار «پیمایش» (Navigation)، یک عنوان و یک لیست تشکیل شدهاند. احتمالاً قبلاً قطعه کدی مشابه این کد را در طراحی دیگر وب سایتها دیده باشید.
تگهای معنایی عناصری هستند که امکان تعریف بخشهایی از یک صفحه وب که در اکثر وب سایتها یافت میشوند را فراهم میآورند. این تگها هیچ چیزی به صفحه اضافه نمیکنند اما به شما اجازه میدهند تا تگها را بر اساس محتوای آنها گروهبندی کنید و سبکهای مورد نظرتان را به آن گروه اعمال نمایید. اگر بخواهیم کد ذکر شده در ابتدای متن را با نشانهگذاری معنایی بنویسیم، نتیجه به صورت زیر خواهد بود.
همانطور که میبینید، خواندن این کد بسیار سادهتر است. شما میدانید که هر بخشی برای چه کاری استفاده میشود و ابهامی وجود ندارد. استفاده از این نشانهگذاری مهم است زیرا نوشتن کدهای خوب و تمیز را سادهتر میکند. آیا تا به حال تصمیم گرفتهاید تا به یک طراح حرفهای تبدیل شوید؟ اگر اینطور است باید بدانید که نوشتن کدهای خوب و تمیز و خوانا بسیار مهم است زیرا شما نمیدانید که چه کسی کدهای شما را خواهد خواند. بنابراین، به دلیل اهمیت نشانهگذاری معنایی، در ادامه تگهای مختلف را بررسی کردهایم.
تگ section
تگ section، یک تگ بسیار کاربردی است که برای تعیین یک بخش بزرگ و مجزا از اطلاعات و محتوای نشانگذاری شده با یک عنوان استفاده میشود. برای نمونه، یک فصل از یک کتاب را در نظر بگیرید. فصل دارای یک عنوان است و همچنین ممکن است شامل تصاویر، نمودارها، جداول و کلمات باشد. یک تگ section برای در بر گرفتن همه آنها استفاده میشود.
تگ Article
تگ Article باید از باقی محتویات صفحه مجزا و مستقل بوده اما به تنهایی نیز دارای معنا و مفهوم باشد. این برچسب اغلب برای تعیین مواردی مانند خبرنامه یا مطالب جدید در وبلاگ استفاده میشود.
تگ Aside
این تگ برای محتوایی استفاده میشود که به صفحه مرتبط است اما بخشی جدایی ناپذیر نیست. در واقع، این تگ اغلب برای ستونهای کناری صفحه مانند ستونهای حاوی اطلاعات زندگینامه نویسنده وبلاگ یا اخبار مرتبط با وبسایت مورد استفاده قرار میگیرد.
تگ Header
بسیاری از صفحات وب دارای یک نوار در بالای صفحه حاوی لوگو، برخی اطلاعات مربوط به سایت و یا چند لینک هستند. در نشانهگذاری معنایی از تگ Header به عنوان طرحی برای در بر گرفتن این موارد استفاده میشود.
تگ Nav
این عنصر برای بخش نوار پیمایش وبسایت استفاده میشود. تگ Nav شامل لینکهایی به صفحات داخلی یا به دیگر وب سایتها است.
تگ Footer
این تگ برای بخش پایین وبسایت استفاده میشود. در این بخش میتوانید جزئیات تماس، اطلاعات قانون حق تکثیر، یک نقشه یا لینک به صفحه «درباره ما» را قرار دهید.
فرمها در html5
اگر تا به حال کار طراحی وب را انجام داده باشید، احتمالاً میدانید که چگونه یک فرم ساده را در HTML طراحی کنید. همچنین احتمالاً با چگونگی دریافت اطلاعات از فرم و درج آنها در پایگاه داده آشنایی دارید. فرمها بسیار مهم هستند؛ آنها اساس بسیاری از کارهایی هستند که ما در اینترنت انجام میدهیم. هر دفعه که وضعیت خود را در شبکه اجتماعی مورد علاقهتان بروز رسانی میکنید، چیزی را از طریق اینترنت بخرید یا یک ایمیل ارسال نمایید، احتمالاً از فرم HTML استفاده کردهاید. چیزی که ممکن است از آن آگاهی نداشته باشید، این است که نحوه ایجاد فرمها به طور اساسی در HTML5 تغییر کرده است. در این فصل، کارهای جالبی که با استفاده از فرمها در HTML5 میتوان انجام داد را بررسی میکنیم. در ادامه چند نمونه از این کارها را ذکر کردهایم.
اولین پیشرفت HTML5 در زمینه فرمها، نمایش خودکار پیغام مناسب به کاربر در صورت خالی گذاشتن فیلدهای ضروری است. در این فناوری تنها با تغییر نشانهگذاری خود فرم میتوان تعیین کرد که پر کردن برخی فیلدها قبل از ارسال اطلاعات فرم ضروری است و برای انجام این کار دیگر نیازی به نوشتن کدهای جاوا اسکریپت و PHP ندارید.
دومین کاری که میتوانید انجام دهید، این است که میتوانید اطمینان حاصل کنید که کاربران شما تنها میتوانند نوع خاصی از اطلاعات را به فرم شما ارسال کنند؛ بنابراین، فرض کنید که شما یک وب سایت برای لیست ایمیل خود دارید و میخواهید افراد تنها قادر به ارسال ایمیلهای واقعی باشند. این کار را میتوانید به سادگی با HTML5 انجام دهید.
سوم اینکه شما میتوانید با افزودن اطلاعات راهنما درون هر فیلد (Placeholder)، ظاهر بهتری به فرمهای خود ببخشید؛ این کار ظاهر فرم را بهطور قابل توجهی بهتر و بصریتر میکند. شما میتوانید درون هر فیلد، مثالی از اطلاعاتی که انتظار میرود کاربر درون آن درج کند را به عنوان متن راهنما در فیلد اضافه کنید. برای مثال، در بخش درج ایمیل، نمونهای از یک ایمیل یا الگوی ایمیل را قرار دهید.
بهبود یک فرم
فرم زیر که با کدهای HTML نوشته شده است را در نظر بگیرید. در ادامه تلاش میکنیم تا با استفاده از کدهای HTML5، این فرم را بهبود ببخشیم.
فرم ذکر شده بسیار ساده است. این فرم اطلاعات مربوط به نام، ایمیل و رنگ مورد علاقه کاربر را دریافت کرده و به وی اجازه میدهد که این اطلاعات را ارسال کند. این فرم اطلاعات درج شده در فیلدها را بررسی نمیکند، کاربر میتواند هر نوع اطلاعاتی وارد نماید و حتی در صورت خالی بودن برخی فیلدها امکان ارسال اطلاعات وجود دارد. در ادامه ما این موارد را تغییر خواهیم داد.
اولین کاری که انجام میدهیم، کسب اطمینان از درج اطلاعات یک ایمیل در فیلد مربوطه است. انجام این کار قبلاً بسیار سخت بود زیرا برای بررسی صحیح بودن آدرس ایمیل باید کدهای پیچیده با «عبارات منظم» (Regex) نوشته میشد؛ اما این سختی با استفاده از HTML5 به آسانی رفع شده است. برای اطمینان از درج آدرس ایمیل تنها کافی است نوع فیلد ورودی را از «text» به «email» تغییر دهید. بنابراین، اگر هنگام ارسال فرم تعدادی حرف درون فیلد ایمیل وارد کنید، فرم ارسال نمیشود و از شما میخواهد تا یک ایمیل معتبر وارد نمایید.
انواع فیلدهای ورودی و الگوها
انواع فیلدهای ورودی دیگری مانند نوع فیلد شماره تلفن، آدرس وب، فرمهای جستجو و حتی انتخاب رنگ نیز وجود دارد که ممکن است به آنها نیاز پیدا کنید. علاوه بر این، برای عناصری مانند شماره تلفن که بسته به محل زندگی افراد، متفاوت است، میتوانید الگوهایی برای اطلاعات ورودی مشخص نمایید. الگوها با استفاده از «عبارات منظم» ایجاد میشوند و بسیار پیچیده اما فوقالعاده قدرتمند هستند.
ما همچنین میخواهیم مثالی از یک ایمیل نمونه نیز به عنوان راهنما در پس زمینه فیلد مربوط به ایمیل درج کنیم تا کاربر بداند در این فیلد دقیقاً چه اطلاعاتی را باید وارد نماید. انجام این کار بسیار ساده است؛ تنها کافی است در تگ فیلد مربوطه، ویژگی «placeholder» را اضافه نماییم و یک آدرس ایمیل نمونه را به آن اختصاص دهیم.
فرض کنید که میخواهید فیلد «رنگ مورد علاقه» را به عنوان یک فیلد الزامی در فرم تعیین کنید. برای انجام این کار، قبل از بستن تگ (<) ورودی مربوط به تعیین رنگ مورد علاقه، کلمه «required» را اضافه نمایید. حال اگر سعی کنید فرم خود را بدون پر کردن این فیلد ارسال نمایید، یک پیام خطا دریافت خواهید کرد.
یک چیز فوقالعاده در مورد این پیامهای خطا این است که برنامهنویس مجبور نیست آنها را بنویسید، تنها کافی است نوع فیلد را به درستی انتخاب کند تا در صورت اشکال، پیام خطای مناسبی به کاربر نمایش داده شود. البته واضح است که پیامها به زبان انگلیسی نوشته شده هستند اما در صورت تمایل میتوانید پیامهای فارسی جایگزینی اضافه نمایید.
فایلهای ویدیوئی و صوتی
زمانی تنها راه درج یک فایل ویدیوئی یا صوتی در صفحه وب، استفاده از برنامههایی مانند Shockwave، فلش یا سیلورلایت بود. اما این روش، مناسب نبود. در ابتدا، هیچ کدام از این برنامهها به خوبی بر روی تلفنهای همراه کار نمیکردند. علاوه بر این، این فرمتها اختصاصی ویندوز بودند؛ بنابراین کاربران لینوکس و OS X که این برنامهها را در اختیار نداشتند، حتی ممکن بود که قادر به استفاده از این سرویسهای رسانهای نباشند. در نهایت، این برنامهها بسیار کند بودند. اگر شما از یک رایانه قدیمی استفاده کرده باشید، قطعاً تجربه خوبی از مشاهده ویدئو با این برنامهها ندارید. به ویژه برنامه فلش در بین این برنامهها بسیار نامناسب بود.
تجربه خوب استفاده از فایلهای ویدیوئی و صوتی با HTML5
HTML5 با ارائه چند خط کد اضافه شرایط افزودن ویدیو و صدا به صفحات وب را کاملاً تغییر داد. این روش با تمام دستگاههای تلفن همراه و مرورگرهای جدید وب به خوبی هماهنگ است.
همه چیز درباره کدکها (Codec)
در این بخش، قصد داریم از قدرت HTML5 برای درج فایلهای صوتی و ویدیوئی در صفحات وب استفاده کنیم. در حالیکه شما میتوانید فایل ویدیوئی درج شده با استفاده از کدهای HTML5 را در هر مرورگر جدید وب نمایش دهید اما خروجی در تمام مرورگرها یکسان نیست. کدکهای استفاده شده توسط هر مرورگر، متفاوت هستند. در IE، تنها میتوانید از ویدئو با فرمت MP4 استفاده کنید. گوگل کروم از فرمتهای WebM، MP4، ogg و Theora پشتیبانی میکند؛ مرورگر اپرا کمی محدودتر است و تنها اجازه استفاده از فرمتهای Theora و WebM را میدهد.
درج ویدیو با HTML5
برای شروع، یک تگ <video> را درج کنید. سپس ویژگی «poster» را به این تگ اضافه نمایید و این ویژگی را با یک تصویر مقداردهی کنید؛ تا زمانیکه فایل ویدیوئی بارگذاری و اجرا شود، تصویر اختصاص داده شده به ویژگی «poster» در پسزمینه نمایش داده میشود.
کار بعدی که باید انجام دهید، افزودن یک پیغام برای زمانی است که کاربر از مرورگرهای قدیمی استفاده میکند. این مرورگرها اغلب از HTML5 پشتیبانی نمیکنند، بنابراین قادر به نمایش ویدیو درج شده با کدهای HTML5 نیز نیستند. شما باید یک پیغام بگذارید تا آنها را مطلع کنید که برای مشاهده ویدیوی درج شده در وبسایت باید مرورگر خود را ارتقا دهند. برای انجام این کار، باید پیغام خود را درون تگ ویدوئی </video> <video> بنویسید.
اکنون بیایید یک ویدیو به صفحه وب اضافه کنیم. ما قصد داریم از مرورگر گوگل کروم استفاده نماییم بنابراین یک فایل MP4 اضافه میکنیم. برای این کار، یک تگ <source/> درون تگ <video> ایجاد میکنیم و سپس ویژگی «src» را به این تگ اضافه کرده و مقدار آن را با ویدیوی مورد نظر تنظیم مینماییم.
حال میتوانیم صفحه وب طراحی شده را در مرورگر باز کنیم. اگر فیلم اضافه شده دارای حجم زیادی باشد، هنگامی که صفحه باز میشود تنها تصویر «poster» نمایش داده میشود و ویدیوی درج شده پس از بارگذاری کاملا، جایگزین این تصویر خواهد شد.
افزودن صدا
با روشی مشابه آنچه برای درج فایل ویدیوئی ذکر شد، میتوان یک فایل صوتی را نیز درج کرد. برای درج یک فایل صوتی، ابتدا تگ <audio> را اضافه کنید. تگ <audio> دارای ویژگی «control» است که امکان توقف، مکث و جلو یا عقب بردن فایل صوتی در حال پخش را به کاربر میدهد. پس از درج تگ <audio>، یک تگ </ source> را درون آن اضافه کنید و فایل صوتی مورد نظرتان را به ویژگی «src» اختصاص دهید. در زمینه فایل صوتی دیگر نگران سازگاری کدکها نباشید زیرا اغلب مرورگرهای جدید توانایی پخش فایلهای صوتی MP3 را دارند. البته برای تمرین میتوانید فرمتهای ogg. و wav. را نیز امتحان کنید. در نهایت میتوانید همانند آنچه در بخش درج فایل ویدیوئی انجام دادید، یک پیغام را برای کاربران مرورگرهای قدیمی اضافه کنید. نتیجه نهایی این کدنویسی مشابه زیر خواهد شد.
هنگامیکه صفحه وب را در مرورگر باز کنید، خروجی همانند شکل زیر است.
تبدیلها و انیمیشنهای CSS3
فناوری CSS برای مدیریت طراحی ظاهر یک صفحه وب عرضه شد. امروزه نیز CSS برای انجام این کار مورد استفاده قرار میگیرد اما قابلیتهای مدیریت انیمیشنها و تبدیل عناصر و تصاویر نیز در نسخه CSS3 به این زبان سبکدهی افزوده شد. برنامهنویسان از CSS3 برای انجام کارهای شگفت انگیزی از ساختن یک ساعت دیجیتال تا ساخت بازی pony بهره گرفتهاند. این فناوری واقعاً قدرتمند است و هنگامی که به آن مسلط شوید، میتوانید از آن برای افزودن قابلیتهای فوقالعادهای به صفحه وب خودتان استفاده نمایید. در این بخش، توضیح خلاصهای دربارۀ CSS3 و چگونگی افزودن افکتهای فوقالعادهای به صفحه وب را ارائه خواهیم داد.
ابتدا به وبسایت Codepen.io بروید و یک صفحه جدید ایجاد کنید. ما قصد داریم از این وبسایت به عنوان فضای کاری برای این بخش استفاده نماییم. ما استفاده از CSS را با یک مثال ساده شروع میکنیم. در این مثال میخواهیم یک تصویر اضافه کنیم و هنگامیکه اشارهگر موس بر روی آن قرار گرفت، تصویر سه درجه چرخش داشته باشد. برای انجام این کار، ابتدا یک تگ <div> ایجاد کنید و یک ID به آن اختصاص دهید. ما در این مثال، «id=muo» را انتخاب کردیم.
افکتهای Hover در CSS
به عنصر Div درج شده در بخش قبل، یک تصویر دلخواه اضافه کنید. حال باید کمی ویژگیهای سبکبندی را به این عناصر اعمال نمایید. در مثال زیر، ما با استفاده از خصوصیت «margin»، کمی حاشیه بالا و پایین برای کادر عنصر Div ایجاد کردیم. علاوه بر این، همانطور که مشاهده میکنید، قانون «muo:hover#» را نیز اضافه نمودیم. در واقع هنگامی که شما عبارت «hover:» را به یک ID یا Class یا یک عنصر اضافه میکنید، با این کار به مرورگر اعلام میکنید که عمل خواسته شده را در هنگام عبور اشارهگر موس از روی آن عنصر اعمال کند.
درون قانون «muo:hover#»، کد «(webkit-transform: rotate(3deg-» درج شده است. همانطور که احتمالاً حدس میزنید، این خط کد برای چرخش 3 درجهای تصویر در هنگام عبور اشارهگر موس از روی آن است؛ اما افزودن این خط کد تنها باعث انجام این عملکرد در مرورگرهای کروم و سافاری میشود. اگر میخواهید کدتان در مرورگرهای فایرفاکس و اینترنت اکسپلورر 9 و نسخههای بالاتر آن نیز کار کند، قطعه کدهای زیر را نیز اضافه کنید.
حال اگر اشارهگر ماوس را بر روی تصویر قرار دهید، نتیجه به صورت زیر خواهد بود.
استفاده از CSS3 برای تغییر اندازه تصاویر
با استفاده از روش «transform» در CSS میتوان اندازه یک تصویر را کوچک یا بزرگ کرد. برای انجام این کار، قطعه کدهای زیر را به فایل CSS اضافه نمایید.
همانطور که مشاهده میکنید، ما باز هم از یک قانون «transform» استفاده میکنیم اما این بار خواهان تغییر با استفاده از خصوصیت «scale» هستیم. این روش برای تغییر اندازه یک تصویر بسیار عالی است. برای تغییر اندازه عنصر باید دو مقدار وارد کنید (مقادیری که بین پرانتزها درج شدهاند)، این مقادیر برای افزایش ارتفاع و عرض عنصر مورد استفاده قرار میگیرند. حال اگر اشارهگر موس را بر روی تصویر قرار دهید، تغییر اندازه آن را مشاهده خواهید کرد.
معرفی اجمالی جاوا اسکریپت
اگر میخواهید در مرورگر خود یک اسکریپت درج کنید باید از جاوا اسکریپت استفاده نمایید و هیچ راه دیگری برای این کار وجود ندارد. جاوا اسکریپت، یک زبان اسکریپت نویسی است که طرفداران و مخالفان بسیاری دارد. آموزش جاوا اسکریپت در یک فصل مختصر ناممکن است و در اینجا هدف ما این است که شما را تنها کمی با جاوا اسکریپت آشنا کنیم تا بخش بعدی که در مورد استفاده از فناوری canvas برای ترسیم عناصر و انیمیشن است را به خوبی درک کنید.
کنسول اسکریپت نویسی
ما برای نوشتن اسکریپتها از کنسول جاوا اسکریپت مرورگر گوگل کروم استفاده میکنیم. برای دسترسی به این کنسول، شما میتوانید بر روی هر صفحه وب راست کلیک کرده و سپس گزینه «Inspect Element» را برگزینید در نهایت بر روی «console» کلیک نمایید؛ پنجرهای همانند شکل زیر را مشاهده خواهید کرد.
در کنسول خود، قطعه کد «(;console.log ("Hello world!"» را درج کنید. این برنامه ساده، عبارت «!Hello world» را چاپ میکند.
بررسی کد برنامه
حال بیایید کد نوشته شده در بخش قبل را بررسی کنیم. در ابتدا، کد «console.log» را نوشتیم که این کد به کامپیوتر دستور میدهد تا هر آنچه درون آن قرار دارد را چاپ نمایید. سپس، پرانتز باز و بسته را افزودیم و بین آنها عبارت «Hello world» را بین کوتیشن دوتایی (" ") قرار دادیم؛ به کوتیشنهای دوتایی، آرگومان ارسالی گفته میشود و نوع آرگومان ارسالی نیز رشته است زیرا مجموعهای از حروف میباشد. هنگامیکه میخواهید عبارتی را چاپ کنید، اگر عبارت مورد نظرتان از حروف یا کاراکترهای خاص تشکیل شده باشد باید از کوتیشنها استفاده نمایید؛ اما اگر قصد چاپ اعداد را دارید، نیازی به استفاده از کوتیشن نیست.
متغیرها در جاوا اسکریپت
شما میتوانید متغیرها را نیز به «console.log» ارسال کنید. متغیرها، پیچیده به نظر میرسند اما آنها فقط فضایی هستند که برای قرار دادن اطلاعات استفاده میشوند. اطلاعات درج شده در متغیرها، اغلب اعداد و حروف هستند. برای تعریف متغیرها، ابتدا کلید واژه «var» را درج کنید، سپس یک نام دلخواه به این متغیر اختصاص دهید و مقابل نام علامت تساوی را قرار داده و مقدار مورد نظرتان برای متغیر را بنویسید. در مثال زیر، ما یک متغیر به نام «hello» تعریف کردیم و مقدار «!Hello word» را به آن اختصاص دادیم. در نهایت، این متغیر را به «console.log» ارسال نمودیم.
توجه داشته باشید که هنگام ارسال متغیر «hello» به «console.log» از کوتیشن استفاده نمودیم. دلیل این کار این است که قصد چاپ محتویات متغیر «hello» و نه خود عبارت «hello» را داشتیم.
استفاده از توابع در جاوا اسکریپت
نوشتن و تکرار یک قطعه کد خاص کمی خسته کننده است، به همین دلیل ما برای جلوگیری از تکرار، توابع را بکار میبریم. استفاده از توابع بسیار آسان است. توابع، قطعه کدهایی هستند که ما میتوانیم چندین بار و بدون بازنویسی از آنها استفاده کنیم. در مثال زیر، ما یک تابع به نام «sup» را ایجاد کردیم و سپس با استفاده از پرانتزها، یک آرگومان را به آن فرستادیم که در نهایت مقدار این آرگومان بر روی صفحه نمایش داده میشود. سپس، تابع «sup» را با ارسال «(sup ("hello world!"» به کنسول فراخوانی کردیم.
تکرار یک کار با حلقه «for»
فرض کنید، شما میخواهید یک عمل را به تعداد دفعات مشخصی تکرار کنید. برای انجام این کار، میتوانید از حلقه «for» استفاده نمایید. ممکن است استفاده از حلقهها کمی پیچیده به نظر برسد اما هنگامی که آنها را بخوبی فرا گرفتید، متوجه خواهید شد که بکارگیری آنها ساده و مفید است. برای شروع کار، عبارت «( )for» را در کنسول بنویسید. درون پرانتزها، باید متغیری قرار دهید که تعداد دفعات تکرار عمل مورد نظر را شمارش کند؛ بنابراین، کدی شبیه «(for (var i=0» را باید بنویسید. سپس باید یک شرط اضافه کنید که تکرار عمل تا زمانی که آن شرط درست است، ادامه پیدا کند. مثلاً میخواهید تا زمانی که متغیر شمارنده از عدد 10 کمتر است، فرآیند تکرار ادامه پیدا کند. بنابراین، پس از سمی کالن عبارت «i<10» را اضافه کنید و حلقه به صورت «(for (var i=0; i<10» تغییر خواهد کرد. حال میخواهید تا زمانیکه مقدار شمارنده از عدد 10 کمتر است، آن را در هر تکرار با عدد یک جمع کنید؛ بنابراین عبارت «i=i+1» را نیز باید اضافه کنید. حلقه تقریباً تمام شده است و به شکل
1(for(var i=0; i<10; i=i+1
خواهد بود. دقت داشته باشید که پس از عبارت «i=i+1» دیگر سمی کالن اضافه نمیشود.
حال که حلقه را ایجاد کردید، باید دستورالعملی که میخواهید تکرار شود را درون حلقه جای دهید. برای این کار، پس از بستن پرانتز، کروشههای باز و بسته بنویسید و دستورهای مورد نظرتان را درون این کروشهها درج نمایید. در مثال زیر، ما دستور «(console.log (i» را نوشتیم که خروجی این حلقه، چاپ اعداد 0 تا 9 خواهد بود.
دو ساختار برنامهنویسی نهایی که در این بخش معرفی میکنیم، دستورات شرطی «if» و حلقه «while» هستند.
دستورات شرطی if
دستور «if» زمانی اجرا میشود که یک شرط خاصی برآورده شود. ساختار این دستورات مشابه حلقههای «for» است. عملکرد این دستورات را در ادامه تشریح کردهایم. فرض کنید، متغیری به نام «cheeseburgers» دارید و میخواهید بررسی کنید که آیا مقدار این متغیر، عبارت «tasty» است یا خیر. اگر اینطور باشد، میخواهید عبارت «!yum, tasty cheeseburgures» بر روی صفحه نمایش داده شود. برای انجام این کار میتوانید قطعه کدی همانند شکل زیر را بنویسید.
به نحوه نوشتن (if(cheeseburgers =="tasty" توجه کنید؛ همانطور که میبینید برای برابری از دو علامت «=» استفاده شده است. به طور کلی، برای بررسی برابری از دو یا سه علامت تساوی و برای عمل انتساب از یک علامت تساوی استفاده میشود.
حلقههای while
دستورات درون حلقه «while» تا زمانی اجرا میشوند که شرط حلقه درست باشد. فرض کنید که میخواهید تا زمانی که مقدار متغیر «cheeseburgers» برابر عبارت «tasty» است، پیام «yum, tasty cheeseburgers» نمایش داده شود. برای انجام این کار باید قطعه کدی به صورت زیر بنویسید. شایان ذکر است که حلقه قطعه کد بالا، یک حلقه بینهایت است و شما باید از ایجاد حلقه بر روی مقداری که به احتمال زیاد تغییر نمیکند، اجتناب کنید. انجام این کار میتواند مرورگر را قفل کند یا در عملکرد کد اختلال ایجاد نماید.
همانطور که قبلاً ذکر شد، این بخش تنها مقدمه کوتاهی بر ساختارهای برنامهنویسی در جاوا اسکریپت است تا شما را به مطالعه بیشتر در مورد این مبحث بزرگ و جذاب تشویق کنیم.
معرفی و ساخت canvas
canvas، فناوری جالبی است که امکان ترسیم تصاویر و انیمیشنها را بدون استفاده از برنامههای فلش یا سیلور لایت (Silverlight) فراهم میآورد. برنامه نویسان از این فناوری برای ساخت چیزهای جالب و عجیب همانند شبیهساز سشوار یا بازیهای ویدیوئی مختلف استفاده کردهاند. در این بخش، معرفی مختصری از این فناوری فوقالعاده و بزرگ را ارائه میدهیم. فناوری canvas تنها در مرورگرهای جدید وب کار میکند. اگر از نسخههای قدیمی IE، کروم یا فایرفاکس استفاده میکنید، ممکن است نتوانید خروجی مناسبی از کدهای ارائه شده در این بخش دریافت کنید. اگر اینطور است، سعی کنید نسخه جدیدی از مرورگر گوگل کروم را که مرورگر مورد استفاده در این آموزش است را دانلود و نصب نمایید.
شروع کار با canvas
برای شروع به وبسایت Codepen.io مراجعه نمایید و یک صفحه جدید باز کنید. حال باید یک عنصر «canvas» را تعریف نمایید. دو تگ باز و بسته «canvas» را ایجاد کنید و دو ویژگی «width» و «height» برای تعیین عرض و ارتفاع عنصر «canvas» و یک «ID» به آن اختصاص دهید. همانند آنچه در بخش درج ویدیو انجام دادید، در این بخش نیز باید برای کاربرانی که مرورگر آنها از فناوری canvas پشتیبانی نمیکند، پیغامی درج شود.
برای شروع، یک قطعه کد جاوا اسکریپت برای نمایش چیزی بر روی صفحه بنویسید. کار خود را با ترسیم یک فریم ساده قرمز آغاز نمایید.
یک متغیر به نام «demo» تعریف کنید، سپس عنصر «canvas» را انتخاب کرده و به این متغیر اختصاص دهید. برای انجام این کار، از «( )document.getElementByID» استفاده نمایید و ID عنصر مورد نظر خود را ارسال کنید. همانند خط دوم اسکریپت نوشته شده، یک متغیر دیگر با نام «context» تعریف نمایید، سپس «(demo.getContext('2d'» را در آن صدا بزنید. این قطعه کد برای مرورگر تعریف میکند که ما در حال کار بر روی یک تصویر دو بعدی هستیم، سپس توابع لازم برای ترسیم بر روی صفحه را فرا میخواند. خطوط سوم و چهارم اسکریپت بالا، کدهایی هستند که در واقع عمل ترسیم بر روی صفحه نمایش را انجام میدهند. خط سوم یک مستطیل قرمز رنگ ترسیم میکند و خط چهارم تابع «fillRect» را صدا میزند که این تابع طول و عرض و موقعیت مستطیل را تعیین میکند.
شکلها و متنها
در این مرحله، چهار خط کد نوشته شده در بخش قبل را پاک کنید و به جای آنها کدهایی بنویسید که مستطیل ترسیم شده را در سمت چپ و بالای صفحه قرار دهد و این مستطیل را طوری بکشد تا تمام فضای عنصر canvas را پر کند. دو آرگومان اول، موقعیت عنصر نسبت به محورهای x و y را تعیین میکنند؛ فعلاً مقدار آنها را برابر 0 قرار دهید. آرگومان سوم به عرض شکل اشاره دارد؛ مقدار این آرگومان را 200 انتخاب کنید و مقدار آرگومان چهارم را برابر 50 قرار دهید. خروجی این کد باید چیزی شبیه شکل زیر باشد.
حال باید متنی بر روی مستطیل ترسیم شده بنویسید. برای انجام این کار، متغیری به نام «makeuseof» تعریف کنید و مقدار آن را به «MakeUseof» تنظیم نمایید. حال باید یک متغیر «context» دیگر تعریف کنید. نام این متغیر را «context2» تعیین کنید و اطمینان حاصل کنید که آن را دو بعدی تعریف میکنید. متن مورد نظر باید به رنگ آبی باشد و بر روی مستطیل قرمز رنگ قرار گیرد؛ بنابراین، باید مقدار ویژگی «fillstyle» آن را «blue» انتخاب کنید. در ادامه، ویژگی «bold» برای ضخیم کردن را به متن اختصاص دهید و فونت آن را از نوع «Arial» و اندازه فونت را «20px» انتخاب کنید. برای این کار، ویژگی «font» متغیر «context2» را فراخوانی کنید و مقدار «bold 20px Arial» را به آن اختصاص دهید.
از آنجایی که متن باید بر روی کادر قرمز رنگ قرار گیرد، باید خصوصیت «textBaseLine» را برای متغیر «context2» فراخوانی کنید و مقدار آن را به «top» تنظیم نمایید. در نهایت، متغیر حاوی متن و مختصات مکانی که قصد داریم متن در آنجا قرار گیرد را به خصوصیت «fillText» اختصاص دهید. نتیجه نهایی همانند شکل زیر خواهد بود.
آموزش ذکر شده تنها مقدمهای بر فناوری عظیم canvas بود. برای آشنایی بیشتر با این فناوری باید مطالعه کامل و مفصلی داشته باشید.
سخن پایانی
فناوری HTML5، به دلیل سادگی استفاده و قدرت فوقالعاده آن بسیار محبوب است. اگر مطالعه HTML5 را بهطور جدی دنبال کنید، قطعاً بزودی میتوانید کارهای بزرگ و جالبی با استفاده از آن انجام دهید.
اگر این مطلب مورد توجه شما واقع شده است، احتمالا آموزش های زیر برای شما مفید خواهند بود:
- مجموعه آموزشهای طراحی صفحات وب
- آموزش تصویری کار با HTML 5
- آموزش طراحی وب با CSS3
- آموزش زبان جاوا اسکریپت
#