تنکولوژی Html5
Html5
6 بهمن 93
زیر مجموعه: جدید ترین ابزار طراحی

 باظهور این تکنولوژی انقلابی در طراحی وب سایت ها صورت گرفته است. توسعه  css به سوی افزونه بندی  کدها بوده است در صورتی که در ویرایش های قبلی آن کدها خیلی طولانی بوده اند که این خود باعث سبک تر شدن صفحات وب سایت و حذف داده های تصاویر و بالارفتن کارایی وب می باشد. HTML5 نیز نسل جدیدی از تحول در صنعت طراحی وب می باشد. این تکنولوژی با توسعه استانداردهای جدید خود باعث شده دیگر نیازی به پلاگین خاصی برای نمایش ویدئوها، کشیدن و رها کردن اشیا نباشد. این دو تکنولوژی همراه با هم می توانند در ساخت گالری و اسلایدشوها مورد استفاده قرار گیرند.


جایگاه HTML در طراحی
 
در طراحی و پیاده سازی صفحات وب و application های تحت وب، تکنولوژی های متعددی مورد استفاده قرار می گیرند که هر کدام کاربرد خاص خود را دارند. در این بین کاربردها و اهداف اصلی استفاده از HTML را در دو مورد زیر می توان خلاصه کرد:
توصیف ساختار معنایی اطلاعات
تولید رابط کاربری و فرم های ورود اطلاعات
البته از HTML برای توصیف ساختار ظاهری اطلاعات هم استفاده می شود که امروزه این کار تقریبا منسوخ شده و این وظیفه به CSS محول شده است. به عبارت دیگه CSS برای جدا کردن ساختار ظاهری از ساختار معنایی ابداع شد. و بنابراین امروزه استفاده از تگهایی نظیر font و center و همچنین استفاده ازattribute هایی نظیر bgcolor و width داخل HTML تقریبا منسوخ شده است. در راستای جدا کردن ساختار ظاهری از HTML حتی استفاده از table برای طراحی ساختار صفحات هم به نوعی منسوخ دانسته شده و به جای آن از طراحی های مبتنی بر div و CSS استفاده میشود.
 
فرایند تکامل HTML5
HTML 4 در سال 1997 منتشر شد. با گذشت زمان نیاز به ایجاد تغییرات برای برآوردن نیازهای جدید احساس میشد. روند کند توسعه استانداردهای وب که تحت نظارت W3C انجام میشد باعث شد تا گروه WHATWG متشکل از علاقمندان و نمایندگانی از شرکت های فعال در این عرصه نظیر Mozilla ، Opera و Apple در سال 2004 تشکیل شود. حاصل کار چند ساله این گروه در اواسط سال 2007 برای تدوین استاندارد HTML5 مورد قبول W3C واقع شد. HTML5 نسخه شماره ۵ زبان اصلی World Wide Web یعنی HTML است. این نسخه در تاریخ ۲۲ ژانویه ۲۰۰۸ بوسیله کنسرسیوم وب جهانی (W3C) منتشر شد. ایده ابتدایی این نسخه از HTML در سال ۲۰۰۴ در WHATWG کلید خورد. این گروه کاری شامل شرکت های بزرگی مانند AOL، Apple، Google، IBM، Microsoft، Mozilla، Nokia، Opera و … می باشد.
 
نشانه های جدید
HTML 5 عناصر و ویژگی های جدیدی به تگ ها (tag) ها اضافه کرده است. از لحاظ تکنیکی بعضی از این تگ ها به div و span شبیه هستند. به عنوان مثال تگ جدید nav و تگ جدید footer از این دسته هستند. بعضی دیگر از تگ های جدید مخصوص موتور های جستجو (برای ایندکس کردن اطلاعات) ، دستگاه های دارای صفحه کوچک (مانند موبایل) و یا خواننده های صوتی می باشند مانند تگ های جدید audio و video. همچنین بعضی از عناصر حذف شده اند. مانند تگ center.
 
چه امکاناتی را میتوان از Html5 انتظار داشت؟
فضای آفلاین: Google Gears را میشناسید؟ HTML5 قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک "ابر کوکی".
اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.
پخش صوت و ویدیو به صورت مستقل: اگر مطلب قبلی من در مورد فایرفاکس و پخش ویدیو بدون هیچ افزونه راخوانده باشید با این قابلیت آشنا هستید. این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی میتوان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید.
مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های twitter شما را برچسب گذاری کند.
فرم‌های هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.
تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون هیچ مشکلی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت، انجمن، سایتهای drag-and-drop نوشت.
تفاوت ها با HTML 4
لیست تعدادی از تفاوت های HTML 5 با HTML 4 به طور خلاصه (تعداد کمی از نمونه ها نمایش داده شده است) عبارتند از:
عناصر جدید – section, video, progress, nav, meter, time, aside, canvas
عناصر صفحه – header, section, footer, figure
ویژگی های جدید برای تگ Input – date/time, email, url
ویژگی های جدید – ping, charset, async
ویژگی های عمومی (به تمامی عناصر قابل اعمال هستند) – id, tabindex,repeat
عناصر حذف شده – center, font, strike
تغییرات HTML5
تغییرات HTML5 بیشتر در رابطه با هر چه بهتر برآوردن دو هدفی است که پیشتر گفته شد.
» تگ های جدیدی که برای توصیف بهتر ساختار معنایی اطلاعات افزوده شده عبارتند از:
section , article , aside, header , footer , nav , dialog , figure 
 
» تغییرات جدید برای طراحی بهتر فرم های ورود اطلاعات، افزوده شدن انواع جدیدی از input نظیر :
datetime, datetime-local, date, month, week, time, number, range, email, url 
تگ های جدید output و datalist 
» برخی از تگ های جدید برای پویا تر شدن محتوا و رابط کاربری:
audio, video, canvas, meter, progress, event-source, … 
 
مشاهده لیست کامل تغییرات (در سایت W3C) 
 
:: برای مشاهده تگ های جدید اضافه شده به نسخه 5 و توضیح کوتاهی در مورد هر یک، به صفحه HTML 5 Reference مراجعه نمایید. تگ های جدید با (NEW) مشخص شده است. (در سایت W3schools) 
 
ساختار کلی یک صفحه وب مبتنی بر HTML۵
همانطور که گفته شد HTML5 تغییرات بسیاری نسبت به نسخه پیشین خود داشته است. یکی از مهمترین ویژگی های HTML5 مشخص نمودن نوع محتوا است که می‌تواند تحولی در عرصه‌ موتورهای جستجو باشد به این صورت که شما با مشخص کردن مکان دقیق مطالبتان، آنها را  از قسمت‌های دیگر سایت که همیشه ثابت هستند جدا کرده و باعث دسته‌بندی صحیح محتوا برای موتورهای جستجو می‌شوید.
در اینجا با تصویری ساده درباره این قابلیت HTML5 توضیح می دهیم.
 
 
همانطور که در تصویر مشاهده میکنید تمامی قسمت‌ها توسط تگ‌هایی از یکدیگر جدا شده‌اند و این، کار را برای موتورهای جستجو راحت میکند.
در ادامه توضیح کوتاهی در مورد تگ های موجود در تصویر ارائه می دهیم:
 
همانطور که از نامش پیداست مکان دقیق سربرگ سایت را مشخص می‌سازد و تمامی عناصر مربوط به سربرگ بین دو تگ 
و قرار می‌گیرند به صورت زیر:
.
.
محتوای سایت که در کنار صفحه و جدا از محتوای اصلی تعریف شده و با محتوای قسمت های دیگر صفحه مرتبط می باشد در تگ قرار می گیرند. لینک های صفحه در این قسمت قابل تعریف می باشند.
 
از این تگ برای تعریف بخش ها در صفحه استفاده می شود. فصل ها ، سرصفحه ، پاورقی ، بخش های مربوط به تبلیغات و یا هر بخش دیگر از صفحه با این تگ مشخص و مجزا می گردد. 
 
جهت تعریف محتوای خارجی از تگ استفاده می شود. محتوای خارجی می تواند یک مقاله خبری از ارائه دهنده های خارجی، یک متن از وبلاگ و یا یک متن از یک بخش یا هر چیز دیگر از یک منبع خارجی باشد. 
 
تگ همانطور که از نامش پیداست برای مشخص کردن مکان پابرگ سایت یا وبلاگ استفاده میشود و تمامی عناصری که در قسمت پابرگ صفحه قرار می‌گیرند بین دو تگ و قرار می‌گیرند.
 
در اینجا جا دارد کمی هم درباره ساختار یک صفحه وب صحبت کنیم.
در نسخه قدیمی HTML یعنی نسخه ۴ آن برای شروع کدنویسی هر صفحه باید استاندارد آن صفحه تایید میشد که با کد زیر مشخص می‌شود:
اما در HTML۵ دیگر لازم نیست دو خط کد بنویسید تا استاندارد بین المللی HTML را مشخص کنید و فقط کافی است با کد زیر در ابتدای کدها، استانداردتان را مشخص کنید:
همانطور که مشاهده کردید کدها در HTML۵ بسیار بهینه‌تر از گذشته شده اند 
تگهای بسیاری در نسخه جدید جایگزین چندین خط کد شده‌اند. 
به عنوان مثال برای مشخص کردن نوع کاراکتر صفحه و تنظیم آن به UTF8 در نسخه قبلی باید کد زیر نوشته می شد:
اما حالا در نسخه جدید فقط کافی است از کد زیر استفاده کنید:
این کدها در مورد فایلهای موجود در صفحه سایت نیز صدق میکنند. شما قبلا برای قراردادن یک اجرا کننده صوتی یا تصویری در سایت باید از چندین خط کد استفاده میکردید و برای داشتن یک اجرا کننده خوش‌ساخت باید دست به دامان جاوا اسکریپت و فلش میشدید ولی در HTML5 به راحتی و فقط با یک تگ می‌توانید یک اجرا کننده فایلهای صوتی و تصویری با ظاهری زیبا داشته باشید.
 
سازگاری مرورگرها با HTML5
اکثر مرورگر ها به غیر از IE همگام با استاندارد ها پیش میروند و کم و بیش از استاندارد های جدید پشتیبانی میکنند. هم اکنون نسخه های بتای firefox3 و opera9.5 تا حدودی از HTML5 پشتیبانی میکنند. قطعا زمانیکه HTML5 از پیش نویس خارج شده و کاربردی شود این مرورگر ها هم از نسخه بتا خارج شوند، میتوان انتظار داشت تا از HTML5 و CSS3 پشتیبانی قابل قبولی داشته باشند. با توجه به این که اکثر کاربران این مرورگرها از نسخه های آپدیت استفاده میکنند در آینده نزدیک مشکل خاصی با این مرورگرها وجود نخواهد داشت. اما IE که متاسفانه حدود 75 درصد از کاربران وب از آن استفاده میکنند. بعید به نظر میرسد که در آینده نزدیک (و یا حتی دور) پشتیبانی قابل قبولی از HTML5 و CSS3 داشته باشد. IE6 در سال 2001 منتشر شد و در سال 2005 نسخه ی 7 این مرورگر در حالی منتشر شد که پیشرفت چشمگیری نسبت به نسخه قبل نداشت و حتی هنوز از CSS2 هم پشتیبانی خوبی نداشت. و اگر مایکروسافت این روند را در پیش بگیرد نمیتوان به IE8 امیدوار بود.
 
 
HTML5، طراحان وب و مرورگرها
از آنجایی که سازگاری یکسان همه مرورگرها با استاندارد های وب ظاهرا" رؤیایی بیش نیست. لذا طراحان وب چاره ای ندارند جز اینکه خودشان طرح ها یشان را با مرورگر ها سازگار کنند. برای مثال برای پشتیبانی از canvas در IE میتوان از explorercanvas استفاده کرد که در واقع canvas شبیه سازی شده با استفاده از جاوااسکریپت و vml است.
HTML5 و CSS3 برای راحت تر و بهتر شدن طراحی بوجود آمده اند ولی با توصیفاتی که ذکرش رفت، طراحی با تکنولوژی های جدید و در عین حال سازگار بودن با تمام مرورگرها کار را دشوار تر میکند. اما چاره ای نیست چون گذر از این مراحل برای پیشرفت لازم است حتی اگر دشوار باشد و حتی اگر موانعی نظیر IE بر سر راه باشد.
 
نکته: XHTML5 در واقع همان HTML5 با رعایت قوانین XML هست. ولی در مورد XHTML2.0 بر خلاف XHTML1 که بر اساس HTML4 توسعه یافته، XHTML 2.0 کاملا مستقل از HTML5 هست و حتی با XHTML 1.1 هم سازگاری ندارد.

دیدگاه (27) به اشتراک بگذارید:

Insalry
21 آذر 1402 ساعت 12:09

finasteride prescription floroda For example, most vertebrates often are simultaneously or sequentially infected with multiple pathogens

euuqezuqagi
8 تیر 1398 ساعت 08:04

[url=http://mewkid.net/buy-amoxicillin/]Amoxicillin Without Prescription[/url] Buy Amoxicillin Online cvx.cnwm.bidsun.ir.dmt.ji http://mewkid.net/buy-amoxicillin/

CarlTieni
11 اسفند 1397 ساعت 08:12

[url=http://buspar10.com/]buspirone price[/url]

PaulTieni
11 اسفند 1397 ساعت 03:12

[url=https://buspar10.com/]buspirone pill[/url]

AmyTieni
11 اسفند 1397 ساعت 01:12

[url=http://buspar10.com/]buspirone 5 mg[/url]

AlanTieni
10 اسفند 1397 ساعت 01:12

[url=https://buspar10.com/]buspar[/url]

JudyTieni
9 اسفند 1397 ساعت 08:12

[url=https://buspar10.com/]buspar[/url]

LisaTieni
9 اسفند 1397 ساعت 07:12

[url=https://buspar10.com/]buspar[/url]

CarlTieni
9 اسفند 1397 ساعت 04:12

[url=http://buspar10.com/]buspirone pill[/url]

AmyTieni
8 اسفند 1397 ساعت 11:12

[url=http://buspar10.com/]buy buspar[/url]

AlanTieni
7 اسفند 1397 ساعت 10:12

[url=https://buspar10.com/]buspar 10mg[/url]

MarkTieni
7 اسفند 1397 ساعت 10:12

[url=https://buspar10.com/]buspar[/url]

JudyTieni
7 اسفند 1397 ساعت 05:12

[url=https://buspar10.com/]buspar 10 mg[/url]

LisaTieni
7 اسفند 1397 ساعت 04:12

[url=https://buspar10.com/]buspar[/url]

CarlTieni
6 اسفند 1397 ساعت 02:12

[url=http://buspar10.com/]buspirone 10mg[/url]

AmyTieni
5 اسفند 1397 ساعت 09:12

[url=http://buspar10.com/]buspar[/url]

PaulTieni
5 اسفند 1397 ساعت 09:12

[url=https://buspar10.com/]buspar[/url]

AlanTieni
5 اسفند 1397 ساعت 07:12

[url=https://buspar10.com/]buspar online[/url]

LisaTieni
4 اسفند 1397 ساعت 02:12

[url=https://buspar10.com/]buspar[/url]

Kassie
9 خرداد 1395 ساعت 02:03

Why do I bother cailnlg up people when I can just read this! http://agnawi.com [url=http://ghikfgca.com]ghikfgca[/url] [link=http://lrukrn.com]lrukrn[/link]

Wednesday
8 خرداد 1395 ساعت 07:03

Stands back from the keyboard in ammzaeent! Thanks!

Minerva
8 خرداد 1395 ساعت 07:03

Thanks for writing such an eaauot--ynderstsnd article on this topic.

Tailynn
8 خرداد 1395 ساعت 01:03

The accident of finding this post has breihtgned my day http://ruvjksfce.com [url=http://bkdgzcy.com]bkdgzcy[/url] [link=http://anmyooahcdm.com]anmyooahcdm[/link]

Makaela
7 خرداد 1395 ساعت 06:03

AKAIK yo'uve got the answer in one!

Xaria
7 خرداد 1395 ساعت 06:03

Begun, the great internet ediatcuon has.

Taran
6 خرداد 1395 ساعت 11:03

What a wonderful story and lesson. I cannot begin to tell you, Marc, how much your writings help me. Even if it is only baby steps, I realize that things you say sink in and sometimes talk to me as I am about to binge. Esillpacey, the “slow down” aspect of living. I have begun to notice how I inhale my food! I don’t enjoy it, with pleasure. I desperately use it to soothe my emotional state.Thank you for helping me to heal.

Betsy
6 خرداد 1395 ساعت 11:03

Fleury Medicina e Saúde diz:Andrea, o uso da medicação antes da coleta do exame pode levar a al§aµeÃtÃres na dosagem do T4 livre, por isso é preferível tomar a medicação após a coleta do exame. A dosagem do TSH não é alterada pelo uso da medicação no dia do exame.

security code

محتوا تبلیغات 7

کلیه حقوق این سایت متعلق به ... است.
قدرت گرفته از سیستم مدیریت محتوا بیدسان