راهنمایی سریع HTML 5 برای مدیران تیم های توسعه – بخش اول

مدت ها بود که فرصت نمی کردم مطلب جدید بذارم، نمیشه همه اش گذاشت به حساب این که سرم شلوغه، ولی خوب دیگه. البته مطلب خوب هم زیاده. اتفاقات جالبی هم تو زمینه ی IT رخ داده این چند وقته. این مطلبی که امروز می خونید رو تو تبلیغات Gmail دیدم، و عنوان تبلیغ اش هم در مورد این بود که با وجود این که یه گروهی از توسعه دهنده ها با Silverlight  کار می کردن، رشد و نمود HTML 5 چه شرایطی رو برای اونا به وجود می آره، اما ظاهرا این مقاله مفصل تر از اینه. امیدوارم مفید باشه براتون.

بابک فخریلو

تاثیری بزرگ و سریع

در نسل اخیر تکنولوژی های وب، HTML 5 یکی از بزرگترین جهش ها به حساب می آید. با پوشش وسیع که شرکت هایی چو Apple، Mozilla، Microsoft و Google از این نو آوری دارند، همه ی مروگرهای بزرگ به سرعت ویژگی های HTM 5 را در خود جا دادند. استیو جابز، رئیس سابق Apple، گفته بود که جهان HTML 5 را به عنوان یک راه حل توسعه ی  استاندارد برای برنامه های به اصلاح غنی (rich application) خواهد پذیرفت. می دانستید که در سایت های شغل یابی، مهارت  داشتن در HTML 5 به یکی از روند های بسیار رو به رشد تبدیل شده؟

اما بسیاری وقتی می خواهند از HTML 5 مثال بزنند، به جلوه های نمایشی Java Script و CSS 3.0 اشاره می کنند، که همین باعث سردرگمی می شود، و مخاطب نمی تواند تشخیص دهد که واقعا HTML 5 چیست؟ خوب واقعا این بستر نوظهور برای مدیران تیم های توسعه ی نرم افزاری چرا باید اهمیت داشته باشد؟

در این مقاله نگاهی کاربردی به تکنولوژی های اساسی HTML 5 داریم و به این می پردازیم که چرا در کمتر از چند سال، HTML 5 توانست نظر شرکت های بزرگ دنیای نرم افزار را به خود جلب کند.

HTML 5 در یک نگاه

وقتی به HTML 5 اشاره می شود، منظور مجموعه ای وسیع از تکنولوژی های نسل بعدی وب است که در حال حاضر در مرورگرهای کنونی پیاده سازی شده اند. برخی از این تکنولوژی ها پیش از این هم وجود داشتند. برای مثال، CSS 3.0 هیچ وقت جزو مشخصه های HTML 5 نبوده.

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

فهرست کامل مشخصه های HTML 5 به شرح زیر می باشد:

  • Core HTML 5 Spec
  • Cascading Style Sheet (CSS 3)
  • Web Workers
  • Web Storage
  • Web Sockets
  • Geolocation
  • Microdata
  • Device API and File API
  • و ویژگی های دیگری که در حال توسعه هستند

اما انچه که بسیار قابل توجه است، این است که HTML 5 باعث تغییرات بسیار بزرگی در مرورگرها شده تا به یک بستر برای rich application ها شوند. هدف HTML 5 این است که امکان توسعه ی برنامه های تحت وبی را بدهد که واسط کاربری زیباتری دارند، امکان ارائه برخی خدمات را در حالت offline داشته باشند و دسترسی امن به سخت افزار را فراهم کند. از آنجایی که برنامه های تحت HTML 5 برای وب توسعه داده می شوند، پس مزیت هایی دارند که وب همیشه به کاربران ارائه داده است:

  • Client مستقل از سکو و جهانی: مرورگر وب
  • جست و جوی آسان و indexing
  • استفاده از سرویس های برنامه های کاربردی دیگر
  • Deployment آسان

ویژگی های اساسی          HTML 5

بسیاری از جنبه های زبان HTML بعد از بروز HTML 5 به طور قابل توجهی دچار تغییر شده اند، اما بسیاری از تغییر ها برای کاربران نهایی پوشیده هستند. این تغییرات ناپیدا شامل یک مدل محتوایی جدید، مدل لایه بندی جدید، و ویژگی های دسترسی پذیری و browsing context جدید می شود.

سایر ویژگی های اساسی HTML 5 شامل موارد زیر می باشد:

  • در بسیاری موارد، توسعه دهندگان می توانند از HTML 5 برای کارهایی استفاده کنند که همین حالا همی می توانند با Java Script یا تغییرات در سرور، انجام دهند. برای مثال، HTML 5 برچسب های معنایی را به بسیاری از المان های محتوای می افزاید. همچنین دستورات جدیدی را برای منوها دارد که باعث ساده تر شدن آنها شده است. در نتیجه توسعه دهندگان به جای <div> میتوانند از <nav> و <aside> استفاده کنند.
  • فرمها می توانند برای مشخصه ی action خود از PUT یا DELETE استفاده کنند، که بدین ترتیب پردازش سمت سرور ساده تر می شود. همچنین ذاتا پشتیبانی از افزودن المان های فرم را  به صورت پویا فرام می سازد (که این کار در حال حاضر با Java Script انجام می شود).
  • برای کاربران نهایی، شاید یکی از بزرگ ترین تغییرات، افزوده شدن برچسب های <audio> و <video> و <canvas> باشد. با وجود تگ های audio  و video دیگر برای پخش فیلم و آهنگ نیازی به plug in (مانند flash player) نخواهد بود، و canvas امکان به تصویر کشیدن تصاویر با کیفیت دو بعدی را فراهم می کند.
  • بسیاری از برچسب های مانند <center> و <font> حذف شده اند و امکان بهره گیری مستقیم از جداول برای شکل دهی به محتوا نیست، در عوض توسعه دهندگان باید از CSS استفاده کنند.
  • به طور رسمی فریم ها دیگر حذف شده اند به جز <iframe> در حالت inline.

از ویژگی های دیگری که در هسته ی HTML 5 هستند، می توان به قابلیت جابجایی (drag and drop) محتوای وب، کشیدن فایل ها از میز کار به برنامه ی تحت وب (مانند آنچه در ضمیمه کردن فایل به Gmail میتوان دید)، پشتیبانی از cross-document messaging، ذخیره ی محتوا در سیستم کاربر، و محتوای قابل ویرایش توسط کاربر اشاره کرد.

HTML 5 و رابطه ی آن با CSS 3.0

بسیاری فکر می کنند که بین این دو تفاوتی نیست. CSS 3.0 مجموعه ای از مشخصه هایی است که با هماهنگ با ساختار HTML 5 کار می کند. در بسیاری موارد، دستورات HTML ساختار محتوای وب را تعیین میکند؛ Java script رفتار را مدیریت می کند، و CSS هم جلوه ی بصری را تعیین می کند.

ماژول های CSS 3.0 تقریبا روی هر جنبه ی قابل نمایش محتوای تحت وب تاثیر داشته است، از تغییر شکل المان ها (مانند چرخش یا تغییر اندازه) تا قاب های حرفه ای که با تصاویر می توان ایجاد کرد. توسعه دهندگان می توانند از CSS 3 برای تعیین شکل ظاهری متفاوت برای هر ابزار متصل وب استفاده کنند، مثلا برای تلویزیون ها، موبایل ها و … می توان با بهره گیری از ماژول “selectors” شکل ظاهری المان های خاصی از  صفحات وب را تغییر داد.

از جالب ترین ماژول های CSS 3.0 برای توسعه دهندگان، «Transition» و «Animations» هستند. اینها برای تعیین شکل المان های صفحه در گذر زمان، استفاده می شوند.

برای مثال،  “Transition “ به توسعه دهنده این امکان را می  دهد تا مشخص کند وقتی کاربر روی یک لینک رفت، چه اتفاقی رخ دهد، مثلا رنگ متن و یا انداره اش در بازه ی زمانی یک ثانیه تغییر کند. می توان با استفاده از Java Scirpt این جلوه را به صورت پویا به المان ها افزود.

از طرفی Animation، امکان تغییرات متعدد در خواص CSS را فراهم می سازد. در ابزارهای موبایل، این پویانمایی توسط پردازنده ی گرافیکی ابزار به اجرا در می آید، در نتیجه وقتی با پویانمایی های از نوع Java Script مقایسه می کنیم، عملکرد بسیاری بالایی حاصل می شود.

اما ویژگی قابل توجه دیگر از CSS 3.0، پشتیبانی از لایه بندی های قوی تر است. مثلا Multi-Column و Flexible Box خواص جدیدی را برای شکل دهی محتوا تعریف می کنند که نتیجه ی آن بی نیاز شدن از <div> های تو در تو یا جداول است.

ساده تر بخواهیم بگوییم، CSS 3.0 تعامل توسعه دهندگان با محتوای تحت وب را دارد تغییر می دهد. کاربران نهایی محتوایی را  می بینند که نتیجه ی ترکیب شدن ماژول های مختلف برای شکل دادن یک rich application است. برای توسعه دهندگان، شکل دادن به محتوا ساده تر می شود، بدون این که نیازی به جلوه های تصویری داشته باشند.

برگرفته از مقاله سایت http://www.sencha.com

دربارهٔ Persian Developer

I Love Developing applications

Posted on سپتامبر 10, 2012, in مرورگر, نرم افزار, وب and tagged , , , , . Bookmark the permalink. ۱ دیدگاه.

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s

%d وب‌نوشت‌نویس این را دوست دارند: