صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
مقالات
۸۹ مقاله
ساختار استاندارد یک صفحه HTML
تا اینجا با مفاهیم اصلی HTML آشنا شدیم و یاد گرفتیم چگونه متن، لینک، تصویر، جدول، فرم و بخش‌های مختلف یک صفحه وب را ایجاد کنیم. همچنین با ویژگی‌ها و تگ‌های معنایی HTML آشنا شدیم و فهمیدیم که هر صفحه وب باید ساختار مشخصی داشته باشد. در این مقاله می‌خواهیم تمام این مفاهیم را در کنار یکدیگر قرار دهیم و ساختار استاندارد یک سند HTML را بررسی کنیم. هدف این است که بعد از مطالعه این مقاله، بتوانید یک فایل HTML را از ابتدا به‌درستی ایجاد کنید، بخش‌های مختلف آن را بشناسید و بدانید هر قسمت چه وظیفه‌ای دارد.
HTML5 چیست؟ معرفی تگ‌ها و قابلیت‌های HTML5 با مثال‌های کاربردی
تا اینجا با ساختار صفحات وب، تگ‌های HTML، متن، لینک، تصویر، جدول و فرم‌ها آشنا شدیم. اما HTML در طول سال‌ها توسعه پیدا کرده و امکانات جدیدی به آن اضافه شده است تا ساخت صفحات وب مدرن، استاندارد و قابل فهم ساده‌تر شود. یکی از مهم‌ترین مراحل این توسعه، HTML5 است. HTML5 را می‌توان نسل مدرن HTML دانست؛ نسخه‌ای که علاوه بر حفظ قابلیت‌های اصلی HTML، عناصر معنایی جدید، پشتیبانی استاندارد از صوت و ویدئو، امکانات گرافیکی، کنترل‌های پیشرفته‌تر فرم و APIهای مختلف را در اختیار توسعه‌دهندگان قرار می‌دهد.
صوت و ویدئو در HTML5
یکی از قابلیت‌های مهم HTML5 این است که برای پخش محتوای صوتی و ویدئویی، دیگر لازم نیست به فناوری‌ها و افزونه‌های قدیمی وابسته باشیم. HTML5 عناصر اختصاصی audio و video را در اختیار ما قرار می‌دهد تا بتوانیم فایل‌های صوتی و ویدئویی را مستقیماً در صفحات وب قرار دهیم. در این مقاله ابتدا با ساختار این دو تگ آشنا می‌شویم، سپس ویژگی‌های مهم آن‌ها مانند controls ، autoplay ، muted ، loop ، poster و preload را بررسی می‌کنیم و در ادامه یاد می‌گیریم چگونه با استفاده از source چند فایل با فرمت‌های مختلف ارائه کنیم تا مرورگر بتواند مناسب‌ترین گزینه را انتخاب کند.
Canvas در HTML5
یکی از قابلیت‌های جذاب HTML5، عنصر canvas است که یک سطح خالی برای رسم محتوای گرافیکی در اختیار ما قرار می‌دهد. برخلاف عناصری مانند img که یک تصویر آماده را نمایش می‌دهند، Canvas به ما اجازه می‌دهد با استفاده از JavaScript روی یک بوم گرافیکی رسم کنیم و شکل‌هایی مانند خط، مستطیل، دایره و متن ایجاد کنیم. Canvas در پروژه‌هایی مانند نمودارها، بازی‌های دوبعدی، ابزارهای نقاشی، ویرایش تصویر و جلوه‌های گرافیکی کاربرد دارد. در این مقاله ابتدا ساختار Canvas را یاد می‌گیریم و سپس قدم‌به‌قدم با JavaScript آن را کنترل می‌کنیم.
SVG در HTML5
در مقاله قبل با Canvas آشنا شدیم؛ روشی که به کمک JavaScript امکان رسم شکل‌ها و گرافیک دوبعدی را فراهم می‌کند. اما Canvas تنها راه ایجاد گرافیک در صفحات وب نیست. SVG یا Scalable Vector Graphics یکی دیگر از فناوری‌های مهم وب برای ساخت تصاویر و اشکال برداری است. SVG برخلاف تصاویر پیکسلی، از عناصر و مسیرهای برداری تشکیل می‌شود و به همین دلیل می‌تواند در اندازه‌های مختلف بدون افت کیفیت نمایش داده شود. همچنین از آنجا که SVG به صورت ساختاریافته در HTML قابل استفاده است، می‌توان عناصر آن را با CSS و JavaScript نیز کنترل کرد. در این مقاله از ساده‌ترین مثال‌ها شروع می‌کنیم و به تدریج با شکل‌ها، رنگ‌ها، مختصات، viewBox و تفاوت SVG و Canvas آشنا می‌شویم.
Geolocation در HTML5
در مقالات قبلی با قابلیت‌های مختلف HTML5 مانند Canvas و SVG آشنا شدیم و دیدیم که HTML5 فقط برای ساختاردهی متن و محتوای صفحه استفاده نمی‌شود، بلکه امکاناتی را در اختیار برنامه‌های وب قرار می‌دهد که می‌توانند با قابلیت‌های دستگاه کاربر تعامل داشته باشند. یکی از این قابلیت‌ها Geolocation یا موقعیت‌یابی جغرافیایی است. با استفاده از Geolocation، یک صفحه وب می‌تواند در صورت موافقت کاربر، موقعیت تقریبی یا دقیق دستگاه را دریافت کند؛ برای مثال می‌توان از آن در فروشگاه‌های اینترنتی برای پیدا کردن نزدیک‌ترین شعبه، در سامانه‌های حمل‌ونقل برای نمایش موقعیت، یا در برنامه‌های مبتنی بر نقشه استفاده کرد. در این مقاله ابتدا با مفهوم Geolocation آشنا می‌شویم و سپس یاد می‌گیریم چگونه با JavaScript موقعیت کاربر را دریافت کنیم، خطاها را مدیریت کنیم، دقت و زمان دریافت موقعیت را تنظیم کنیم و در نهایت تغییرات موقعیت را با watchPosition() دنبال کنیم.
Web Storage در HTML5
تا اینجا بیشتر با قابلیت‌هایی آشنا شدیم که به ما کمک می‌کنند محتوای صفحه وب را ایجاد و مدیریت کنیم؛ اما در بسیاری از پروژه‌ها لازم است برخی اطلاعات را در مرورگر کاربر نگهداری کنیم. برای مثال ممکن است بخواهیم انتخاب زبان کاربر، حالت نمایش سایت، اطلاعات یک فرم موقت یا برخی تنظیمات رابط کاربری را ذخیره کنیم تا هنگام مراجعه دوباره به صفحه بتوانیم آن‌ها را بازیابی کنیم. Web Storage یکی از ساده‌ترین APIهای مرورگر برای انجام این کار است و دو مکانیزم اصلی به نام‌های localStorage و sessionStorage دارد. این دو API داده‌ها را به صورت جفت‌های کلید و مقدار در سمت کاربر نگهداری می‌کنند و برخلاف کوکی‌ها برای ذخیره داده‌های ساده سمت کلاینت بسیار راحت‌تر هستند. در این مقاله ابتدا مفهوم Web Storage را یاد می‌گیریم، سپس با localStorage و sessionStorage کار می‌کنیم و در ادامه با متدهای اصلی، ذخیره داده‌های پیچیده‌تر، حذف اطلاعات، محدودیت‌های ذخیره‌سازی و نکات امنیتی آشنا می‌شویم.
Drag & Drop در HTML5
یکی از قابلیت‌های جذاب در صفحات وب، امکان کشیدن و رها کردن عناصر یا همان Drag & Drop است. احتمالاً در بسیاری از سایت‌ها دیده‌اید که می‌توانید یک فایل را روی یک ناحیه مشخص بکشید و رها کنید، یک محصول را به سبد خرید منتقل کنید یا یک وظیفه را از یک ستون به ستون دیگر ببرید. HTML5 امکاناتی برای پیاده‌سازی این رفتار در اختیار ما قرار می‌دهد و JavaScript نیز کنترل بیشتری روی آن ایجاد می‌کند. در این مقاله ابتدا با مفهوم Drag & Drop آشنا می‌شویم، سپس رویدادهای مربوط به آن، draggable ، شیء DataTransfer و روش انتقال اطلاعات را بررسی می‌کنیم و در نهایت یک نمونه کاربردی شبیه یک برد مدیریت وظایف ایجاد خواهیم کرد.
APIهای کاربردی در HTML5
تا اینجا با بسیاری از امکانات HTML و HTML5 آشنا شده‌ایم؛ از ساختار صفحات و فرم‌ها گرفته تا Canvas، SVG، Geolocation، Web Storage و Drag & Drop. اما صفحات وب مدرن فقط از HTML و CSS ساخته نمی‌شوند. مرورگرها مجموعه بزرگی از APIها را در اختیار JavaScript قرار می‌دهند تا بتوانیم با امکانات مختلف مرورگر و دستگاه کار کنیم؛ برای مثال موقعیت کاربر را دریافت کنیم، اطلاعاتی را در مرورگر ذخیره کنیم، با فایل‌ها کار کنیم، داده‌ای را از یک سرور دریافت کنیم، صدای صفحه را کنترل کنیم یا به امکانات مختلف محیط مرورگر دسترسی داشته باشیم. در این مقاله ابتدا مفهوم API را به زبان ساده یاد می‌گیریم و سپس با تعدادی از APIهای مهم و کاربردی آشنا می‌شویم تا بدانیم هرکدام چه مسئله‌ای را حل می‌کنند و در چه پروژه‌هایی می‌توان از آن‌ها استفاده کرد.
تگ‌های معنایی HTML
وقتی یک صفحه وب را با HTML می‌سازیم، فقط مهم نیست که محتوا در صفحه نمایش داده شود؛ بلکه باید ساختار صفحه نیز برای مرورگر، موتورهای جستجو، ابزارهای کمکی و حتی خود برنامه‌نویس قابل درک باشد. تصور کنید یک صفحه شامل منوی سایت، محتوای اصلی، چند بخش مختلف، مقالات، نوار کناری و قسمت پایانی سایت باشد. اگر همه این قسمت‌ها را فقط با تگ‌های عمومی مانند <div> ایجاد کنیم، مرورگر می‌تواند صفحه را نمایش دهد، اما از روی کد به‌سادگی نمی‌توان فهمید هر قسمت چه نقشی دارد. HTML معنایی یا Semantic HTML برای حل همین مسئله به وجود آمده است. در این مقاله یاد می‌گیریم چگونه با استفاده از تگ‌های معنایی، ساختار صفحات وب را واضح‌تر، استانداردتر و قابل فهم‌تر ایجاد کنیم.