آموزش html5

[mehrjo]

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

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

 

[mehrjo]

پیش گفتار
آیا نام یورد ویسچر را شنیده اید؟ احتمال می دم که نشنیده باشید، اما اکتشاف کوچک او ، استفاد ه از HTML5 را برایمان امکان پذیر کرد.
در سال 2002 در شهر هاگ در هلند آقای ویسچر تصمیم داشت که سرعت اجرای خروجی فایل XSL خود را افزایش دهد. او به جای استفاده از دستور creatElement در جاوا اسکریپت از دستور inner HTML استفاده کرد و متوجه شد که عناصر ناشناخته که بخشی از برچسب های HTML نیستند را نمی توان با استفاده از css سبک دهی کرد.

در سال 2008 جنبش HTML5 قوت گرفت، عناصر تازه ای تعریف شدند. اما مرورگرهای اینترنت اکسپلورر نسخه 6 تا 8 به مشکل برخوردند و نمی توانستند عناصر جدید را شناسایی کنند عناصر جدید در این مرورگرها نمی توانستند برچسبی را به عنوان فرزند در خود جای دهند و CSS نیز بر روی این برچسب های جدید اعمال نمی شد. همین حقیقت ناامید کننده مانعی بر سر راه پیاده سازی HTML5 ایجاد کرد.

حال ، یورد ، نیم دهه بعد از اکتشافش ترفندی را در یکی از یادداشت هایش در کارگروه HTML کنسرسیوم جهانی وب در زیر مطلب سم روبی نوشت : در هر صورت اگر می خواهید که دستورات CSS به برچسب های ناشناخته در اینترنت اکسپلورر اعمال شود، تنها باید از دستور document.createElement(elementName) استفاده کنید و آن برچسب جدید را معرفی کنید. این ترفند به موتور پردازش CSS اطلاع می دهد که برچسبی با این نام هم وجود دارد و می توان به آن سبک اختصاص داد.

ایان هیکسون، ویراستار ارشد مستندات HTML5 همانند همه فعالان وب از آموختن این ترفند مسرور شد او تا به حال از این ترفند اطلاع نداشت و با خوشحالی گفت : این ترفندجدید کار را برای ساخت یک وصله ترمیمی برای IE7 بسیار آسان تر از آنی می کند که انتظارش را داشتیم.

یک روز بعد، جان رسیگ مطلبی در وبلاگش نوشت و از عبارت HTML shiv استفاده کرد. حال به اتفاقات بعدی دقت کنید:

• ژانویه 2009 : رمی شارپ اولین اسکریپت برای فعال کردن HTML5 در مرورگر IE را نتشر کرد.
• ژوئن 2009 : فاروق آتش دستورات HTML5 shiv را به نسخه اولیه کتابخانه Modernizer اضافه کرد.
• فوریه 2010 : یک گروه از حرفه ای های جاوا اسکریپت از جمله ، رمی ، کانگکس ، جان دیوید دالتون و پورنل با همکاری هم حجم اسکریپت اولیه را کاهش دادند.
• مارچ 2010 : ماتیاس بیننز و برخی دیگر از فهالان متوجه شدند که اسکریپت shiv تأثیری بر روی صفحه مناسب برای چاپ در IE نمی گذارد. روز غم انگیزی بود. من به طور غیر رسمی از توسعه دهندگان وب خواستم که برای یافتن یک راه حل تازه تلاش کنند.
• آوریل 2010 : جانات نیل در پاسخ به درخواستم فایل IE Print Protector یا به اختصار IEPP را منتشر کرد که از همان دستورات HTML shiv استفاده می کرد، ولی در صفحه چاپ نیز پشتیبانی از دستورات HTML5 اضافه شده بود.
• آوریل 2010 : رمی دستورات قدیمی HTML shivرا با راه حل ارائه شده در IEPP تعویض کرد.
• فوریه 2011 : الکساندر فارکاس هدایت پروژه را به عهده گرفت و کد IEPP را به GitHub انتقال داد، تست های فراوانی برای آن ترتیب داد و ایراداتش را برطرف کرد و سرعتش را نیز افزایش داد.
• آوریل 2001 : IEPP v2 منتشر شد و کتابخانه Modernizr و HTML5 shiv از کدهای جدید ارئه شده در این نسخه استفاده کردند و حال همگان بدون نگرانی در حال استفاده از دستورات HTML5 در طراحی هایشان هستند.

داستان HTML5 shiv تنها یک نمونه از کارهایی است که نشان دهنده همکاری افراد مختلف برای پیشبرد وب آزاد است. این تنها کنسرسیوم جهالنی وب یا مرورگرها نیستند که بر روی استفاده ما از وب تأثیر می گذارند بلکه افرادی هماننند شما و ما نیز در این مسیر نقش داریم. امیدواریم این کتاب شما را تشویق کند تا به همین شکل عمل کنید بهترین راه برای کسب مهارت بیشتر این است که دانسته هایتان را فعلانه با دیگران به اشتراک بگذارید.

به کارگیری HTML5 و CSS3 در حال حاضر از هر زمان دیگری آسان تر و مفرح تر است، این کتاب مطالب کاربردی و با ارزش زیادی را در اختیارتان قرار می دهد و چیزهایی را که باید بدانید به شما می آموزد تا از HTML5 بهره ببرید. نویسندگان – الکسیس، لوییس و استلا- توسعه دهندگان مطرحی هستند که شیوه آموزششان واقعی است و به شما کمک می کند تا بهترین شیوه های استفاده از HTML5 را به آسانی بیاموزید.

 

[mehrjo]

:: HTML5 چیست؟

چیزی که امروزه از آن به عنوان HTML5 یاد می شود، تاریخچه پر فراز و نشیبی دارد. به احتمال بسیار زیاد می دانید که زبان نشانه گذاری HTML در حال حاضر زبان غالب بر روی اینترنت است و از آن برای توصیف محتوا یا داده بر روی وب استفاده می شود. HTML5 آخرین نسخه از این زبان نشانه گذاری است که حاوی امکانات جدید است، برخی از امکاناتی که در نسخه قبلی موجود بود در این نسخه بهبود یافته و همچنین API های اسکریپت نویسی جدید نیز به آن اضافه شده است.

گفته می شود که HTML5 ویرایش تغییر یافته نسخه قبلی محسوب نمی شود این نسخه شامل تمامی عناصر HTML4 و XHTML1.0است. علاوه بر آن، در طراحی این نسخه اصول پایه ای مدنظر قرار گرفته تا اطمینان حاصل شود که این نیخه بر روی تمامی پلتفرم ها به خوبی کار خواهد کرد، با مرورگرهای قدیمی سازگار است و خطاهای برنامه نویسی را نیز به خوبی و بدون مشکل مدیریت می کند.

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

اول از همه HTML5 تعریفی جدید برای عناصر نشانه گذاری موجودارائه می دهد و عناصر جدید نیز به این نسخه اضافه شدده است که به طراح اجازه می دهدتا کدی با معناتر بنویسد. چه لزومی دلرد وقتی می تواز برچی با تری همچون article, section, header, footer و بسیاری از برچسب های دیگر استفاده کنید، صفحه اتان را برچسب های div پر کنید؟

علاوه بر این واژه HTML5 را برای تعدادی دیگر از فناوری ها و APIی جدید دیگر نیز به کار می برند. برخی از این فناوری ها عبارتند از رسم تصاویر با استفاده از برچسب <canvas> ذخیره سازی خارشبکه برچسب های <video> و <audio> قابلیت کشیدن و رها کردن عناصر داخل صفحه پیوست کردن فونت به صفحه دیگر و دیگر قابلیت ها. در این کتاب برخی از این فناوری ها را توضیح می دهیم.

می شود مشخص کنید که کدام نسخه از مستندات HTML5 واقعی است؟
از آن جایی که مستندات HTML5 توسط دو گروه مختلف تدوین می شود(کنسرسیوم جهانی وب یا همان W3C و همچنین WHATWG) دو نسخه از این سند موجود است. W3C (کنسرسیوم جهانی وب)که احتمالاً برایتان آشنا است، سازمانی است که مستندات اصلی HTML و CSS را نگهداری می کند و همچنین میزبان بسیاری از استانداردهای مرتبط با وب همچون SVG (گرافیک برداری مقیاس پذیر) و WCAG (راهنمای دسترسی پذیری محتوای وب)

از سوی دیگر شاید WHATWG یا همان کارگروه فناوری برنامه های ابر متن تحت وب برایتان جدید باشد. این گروه توسط افرادی از شرکت های Mozilla, Appe و Opera تشکیل شده است که در سال 2004 کنسرسیوم جهانی وب درخواست شان را برای توسعه HTML رد کرد. آن ها احساس می کردند که W3C نیاز کاربران و شرکت های تولید کننده مرورگر را نادیده گرف به جای تمرکز بر روی استانداردهای HTکه بر روی مرورگرهدیمی هم قابل استفاده است بر روی XHTML2.0 تمرکز کرده . از این رو گروه راه خود را در پیش گرفت و مستندات برنامه های تحت وب و فرم های تحت وب که بحثشان قبلاً مطرح شد را تهیه کردند.

این دو سند با هم ادغام شدند و نام HTML5 بر آن ها نهاده شد بعد از این اتفاق ، W3C مستندات تهیه شده توسط این گروه را دریافت کرد و مستندات دیگری بر اساس همین سند گروه WHATWG تهیه کرد و مستندات مربوط به HTML5 مخصوص به خودش را توسعه داد.

شاید کمی گیج ننده باشد . درست است، سیاست هایی پشت پرده وجود دارد که ما به عنوان طراح و برنامه نویس کنترلی بر آن ها نداریم . ولی آیا وجود دو سند متفاوت می تواند باعث نگرانی ما شود؟ در یک کلام ، خیر.

مستندات تهیه شده توسط WHATWG را می توانیددر آدرس http://www.whatwg.org/html/ بیابید که به تازگی نامش به HTML تغییر کرده است (عدد 5 از نام سند حذف شده است) در حال حاضر به این سند استاندارد زنده هم گفته می شود، زیرا به طور دائم در حال توسعه و تغییر است و دیگر نمی توان با شماره نسخه به آن اشاره کرد.

نسخه تهیه شده توسط WHATWG تنها حاوی اطلاعات و قابلیت هایی است که تنها در HTML وجود دارد و امکانات جدید HTML5 نیز در این سند گنجانده شده است. علاوه بر آن ، مستندات دیگری توسط WHATWG تهیه شده است که فناوری های مرتبط دیگر را شامل می شود. این مستندات موارد همچون ریز داده ها ، محتوای Canvas دو بعدی،WebWorkerها ،Web Storageها و برخی موارد دیگر را شامل می شود.

مستندات تهیه شده توسط W3C را می توانید در آدرس http://dev.W3.org/html5/spec مستندات مربوط به دیگر فناوری ها نیز از آدرس http://dev.W3.org/html5/ در دسترس است.

حال تفاوت بین مستندات W3C و WHAWG در چیست؟ به طور خلاصه مستندات WHATWG کمی محاوره ای تر و کاربردی تر است و البته بعضی ها می گویند کمی آینده گرانه تر است . ولی در مجموع این دو سند بسیار به هم شبیه هستند و می توان هرکدام از این دو سند را به عنوان منبعی برای یادگیری عناصر HTML5 و فناوری های مرتبط با آن به کار گرفت.

 

[mehrjo]

چرا HTML5 بايد برايم مهم باشد؟

مان طور كه قبلاً توضيح داده شد هسته HTML5 تشكيل شده است از تعدادي عنصرمعناگرا به همراه تعدادي فناوري و APIهاي مرتبط. اين تغييرات و عناصر جديد بدين منظور ايجاد شده اند تا كدنويسي يك صفحه وب دسترسي و استفاده از آن را آسان تر كنند.

عناصر معناگراي جديد به همراه استانداردهايي همچون WAI-ARIA و Microdata كه درباره اشان در ضميمه B و C صحبت خواهيم كرد به ما كمك مي كنند تا صفحاتي در دسترس تر براي انسان و ماشين فراهم كنيم نفع اين كار دو سويه است و هم به دسترس پذير بودن صفحه ما كمك مي كند و هم موتورهاي جستجو بهتر مي توانند مطالب دخل صفحه هاي ما را كاوش كنند.​

عناصر معناگرا نيز به طور خاص براي وب پويا طراحي شده اند و تمركزشان بر روي اين موضوع است كه ص فحات ماهيتي ما‍ولار را پيدا كنند و استفاده از كدهاي نوشته شده در بخش هاي ديگر نيز امكان پذير باشد. در اين مورد در فصل هاي آينده صحبت خواهيم كرد.

در پايان APIهاي مرتبط با HTML5 تكنيك هايي را كه طراحان وب سال هاست از آن ها استفاده مي كنند را ارتقا مي دهد. بسياري از امور اكنون ساده تر شده و قدرت بيشتري در اختيار طراح قرار گرفته است. علاوه بر آن معري قابليت پيوست فيلم و موسيقي در HTML5 بدين معني است كه وابستگي به نرم افزارهاي جانبي و افزونه ها كه امكان پخش فيلم و موسيقي را در وب فراهم مي كنند كمتر خواهد شد.

در مجموع دلايل قانع كننده اي وجود دارد كه نگاهي به قابليت هاي HTML5 و APIهاي مربوط به آن بياندازيد.

ادامه دارد .... دی
​

 

[mehrjo]

:: نوع سند در HTML5

اولين خطي كه در سند HTML وجود دارد اعلانيه نوع سند يا همان doctype است. اين خط به مرورگر و يا هر ابزار ديگري اعلاممي كند كه صفحه موجود از چه نوع استانداري استفاده مي كند. در فايل هاي HTML اعلانيه نوع سند مشخص مي كند كه از كدام نسخه از استاندارد HTML استفاده شده است نوع سند بايد هميشه اولين خط از سند شما باشد. در گذشته نوع سند عبارتي نامفهوم و طولاني بود و به خاطر سپاري آن نيز بسيار مشكل بود. به عوان مثال براي XHTML 1.0 Strict نوع سند به اين شكل است:

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict //EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

و براي HTML4 Trransitional:

<!DOCTYPE html public "-//W3C//DTD XHTML 4.01 Trransitional //EN" http://www.w3.org/TR/html4/loose.dtd">​

براي سال ها نرم افزارهاي ويرايش كد يك قالب آماده براي اسناد HTML فراهم مي كردند كه doctype را نيز در خود داشت و يا حداقل قابليتي را فراهم مي كردند تا بتوان اين بخش را به طور خودكار به كد صفحه اضافه كرد. وبه طور كلي با يك جستجوي سريع در اينترنت مي توانستيد نوع سند مورد نظرتان را پيدا كرده و عبارت مورد نظر را در سند خود كپي كنيد.

اگرچه داشتن يك خط طولاني از متن در بالاي سند HTML مزاحمتي براي ما ايجاد نمي كند اما در HTML5 اين بخش تغيير كرده وآن خط طولاني حذف شده است. حال تنها چيزي كه به عنوان نوع سند استفاده مي شود اين عبارت است:

<!doctypehtml>​

ساده و مناسب است احتمالاً متوجه شده ايد كه عدد 5 از نوع سند حذف شده است. اگر چخ نسخه اي از HTML كه در حال حاضر بر روي آن كار مي شود با نام HTML5 شناخته مي شود اما در حقيقت اين نسخه همان نسخه متحول شده استاندارد HTML‌ قبلي است و مستنداتي كه در آينده ارائه خواهد شد نيز متحول شده مستنداتي است كه امروز در حال تهيه كردنشان هستيم. از آنجايي كه قرار است كه مرورگرها از تمامي داده هاي موجود در وب پشتيباني كنند،‌از اين رو نبتايد اتكايي به نوع سندها باشد و تعيين استاندارد صفحه وب از طريق نوع سند عمل صحيحي به حساب نمي آيد.

​

 

[MA.ZA]

ببخشید در مورد WAI-ARIA راهنمایی می خواستم، لطفا کمکم کنین