معماری
ضعیفبد نیستمتوسطخوبعالی (3 votes, average: 5٫00 out of 5)
Loading...

HTML5 و CSS3 طراحی را لذت بخش میکند

همانطور که از عنوان این مقاله پیداست در اینجا قصد داریم به معرفی ویژگی های HTML5 و CSS3 بپردازیم.

در سال های اخیر زیاد نام اچ تی ام ال 5 و سی اس اس 3 به چشممان خورده، اما چگونه شده که طراحی با این زبان ها لذت بخش شده هم برای ما و هم برای موتور های جستجو !

HTML5
HTML5

در سال 1990 زبان HTML یا Hyper Text Markup Language ایجاد شده و آخرین نخسه آن قبل از HTML5 یعنی HTML4 در سال 1997 استاندارد شده که در سال 2012 html5 ارائه و پس از 15 سال، بلاخره W3C در تاریخ 28 اکتبر 2014، نخسه جدید HTML5 را استاندارد سازی کرد و به مردم بصورت رسمی اعلام شد که این فناوری باعث پیشرفت وب می شود. این زبان توسط World Wide Web Consortium و WHATWG توسعه داده می شود.

html5 و css3 طراحی وب را برای طراحان وب شیرین کردند و برای موتور های جستجو وب سایت ها را خواناتر و روشن تر کردند در واقعی به SEO سایت این زبان ها کمک بسیار می کنند، همچنین از فلش که موتور های جستجو متنفرند این زبان ها دوری کردند و خودشان شدند انیمیشن ساز و گرافیست!

کدنویسی نیز ساده شد! فرضا آن کدهای طولانی برای شروع یک صفحه ی وب خلاصه شد در :  <!DOCTYPE html> که بسیار زیباست !

همچنین نشانه گذاری و رابط برنامه نویسی کاربردی (API) را برای برنامه‌های پیچیده تحت وب معرفی می‌کند.

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

 

صبر کنید اول برایتان بگوییم که چرا موتورهای جستجو این زبان را دوست دارند، پس به تصویر زیر توجه کنید :

 

HTML5 Semantic elements
HTML5 Semantic elements

<header> : هدر مشخص کننده بالا صفحه یک صفحه وب و یا یک پست می باشد.

<nav> : این تگ بطور معمول مشخص کننده محل لینک های می باشد همان navigation links .

<section> : مشخص کننده یک گروه یا بخشی از محتوا می باشد.

<article> : به مطالب اشاره دارد مثل مطالب یک پست .

<aside> : در معنی به کنار مطلب اشاره دارد و کاربردش به اینطور است مطالب مرتبط به پست که از اهمیت کمتری برای موتور های جستجو برخوردارند مثل مشخصات نویسنده پست.

<footer> : به پایین سایت یا پایین یک بخش/section اشاره می کند.

هدف ما از این تصویر و توضیح این تگ های سمانتیک(Semantic) این بود که شما را به این درک برسانیم و متوجه شوید که طراحی هم اکنون برای موتور های جستجو بسیار مفهومی تر شده، بطوری که ربات های موتور های جستجو می توانند متوجه شوند که کدام بخش را بررسی و ایندکس کنند و نسبت به کدام بخش بی توجه باشند بعنوان مثل ربات موتور جستجو وقتی به تگ aside می رسد متوجه می شود که این تگ برای چیست و چرا اهمیتی ندارد و یا برعکس تگ های header و article چرا دارای اهمیت هستند. پس متوجه شدیم که موتور های جستجو این زبان را دوست دارند.

دیگر اینکه یادتان هست قبلا برای شروع یک صفحه اچ تی ام ال چقدر کد باید بالای صفحه می نوشتیم!؟

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

کد بالا، حالا شده : <!DOCTYPE html> و متاتگ ها نیز همینطور :

بجای  <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″> کافیست تنها بنویسید : <meta charset=”utf-8″>

سی اس اس نیز خلاصه تر شد :

div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}

شد این :

header,footer,section,article {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}

 

در HTML5 کار با عناصر گرافیکی راحت تر شده و دستمان بازتر، همانطور که می دانید موتور های جستجو با فایل های فلش میانه خوبی ندارند، از این رو در Html5 و Css3 این امکان برای ما بوجود امده تا بدون استفاده از فلش و از طریق کدنویسی بتوانیم انیمیشن ها و تصاویری زیبا خلق کنیم و همچنین قدرت بیشتری روی بخش فیلم و صدا داشته باشیم که در اینجا تگ هایی مثل : <canvas> , <video> , <audio> , <svg> و.. افزوده شده اند.

 

API های جدید نیز افزوده شده اند به html5 منجمله :

HTML5 API,s

عنصر canvas برای نقاشی 2بعدی

پخش کننده بهنگام رسانه

اپلیکیشن های وب بصورت آفلاین

ویرایش اسناد

درگ کردن و دراپ ( Drag and Drop )

مدیریت تاریخچه مرورگرها

MIME و ثبت کنترل پروتکل ها (XHTML5)

میکرودیتا (Microdata)

ذخیره وب(Web Storage)، مشابه کوکی ها البته با ظرفیت بیشتر و API بهبود یافته

منطقه جغرافیایی(Geolocation)

پایگاه داده محلی(Web SQL Database)، جهت مرتب سازی

کنترل فایل ها، برای آپلود و تغییرات

و…

 

همچنین برخی از تگ های سابق مانند center , font , big , frame , strike , applet و.. در اچ تی ام ال 5 حذف شدند.

البته اینگونه برداشت نکنید که html5 جایگزینی برای نخسه های قبلی می باشد و با آمدن این زبان دیگر نخسه های پیشین کاربردی ندارند و کار نمی کنند، خیر آنها نیز بخوبی و مثل سابق توسط مرورگر های جدید پشتیبانی می شوند و این html five می باشد که هنوز نیاز به حمایت و توسعه دارد.

CSS3
CSS3

در Css3 نیز ویژگی های جدید و جذابی دیده می شود که در زیر به برخی از آنها اشاره می کنیم:

transforms in css3
transforms in css3

– جلوها و تبدیلات دو بعدی و سه بعدی

– امکان ایجاد و استفاده از انیمیشن ها

– بهبود رابط کاربری

– جلوه های متن و امکان استفاده از فونت های دلخواه در صفحات وب

– تسلط بیشتر بر روی تصاویر، پس زمینه و کار با حاشیه ها

– ریسپانسیو بودن سایت ها با مدیا کوئری

و..

 

در پایان نیز یک خبر خوش برای کاربران میهن لرن : فیلم فارسی آموزشی HTML5 و CSS3 بزودی از سایت آموزشی میهن لرن ..

آپدیت : فیلم آموزش فارسی css3 بصورت حرفه ای و کاملا فارسی منتشر شد > دانلود فیلم آموزشی Css3

همچنین ببینید

آموزش طراحی صفحات وب HTML5/CSS3 | قسمت 4

فیلم آموزش پروژه محور طراحی وب با HTML5 و CSS3 – قسمت 4

به نام خالق عشق خوشحالیم که تا به اینجا مجموعه را دنبال کردید و رضایت …

5 دیدگاه

  1. من خیلی خوشحال میشم وقتی میبینم قدم هایی مفید در وب سایت های خوبی همچون شما و با محتوای اختصاصی و مناسب در تلاش برای گسترش هنر برنامه نویسی هستید : )

    همیشه سربلند باشید

  2. مرسی عالی بود.ممنون بخاطر سایت خوبتون

  3. مطالعه بیشتر :
    en.wikipedia.org/wiki/HTML5
    en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_3
    http://www.w3schools.com/html/html5_intro.asp

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *