با HTML5 / CSS3 شروع به کار کنید: نکاتی ، ویترین و نمونه های کدگذاری

HTML5 محبوبیت بیشتری کسب می کند و تکامل کل رابط وب را شروع می کند. حتی برخی از توسعه دهندگان وب نقل کردند که عناصر HTM5 و جلوه های بصری با Flash قابل مقایسه هستند. سبک اسکریپت نویسی جدید به راحتی قابل درک است و قابلیت های تقویت رابط وب بی حد و حصر است. به هر حال این HTML5 چقدر جالب است?


این مقاله در نظر دارد تا بینندگان را در مورد آنچه باید در مورد HTML5 بدانید و از همه مهمتر نکاتی بدانید ، در اختیار خوانندگان قرار دهد & ترفندهایی در ایجاد صفحات سبک ، جذاب و تعاملی HTML5.

1. اساسی در HTML5

HTML5

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

در اینجا نکاتی سریع برای بررسی خود آورده شده است سازگاری مرورگر.

برای درک بیشتر محدودیت یک مرورگر خاص ، ممکن است به این موضوع مراجعه کنید اینجا.

2. جلوه های متن – اضافه کردن سایه و جلوه متن پیشرفته در HTML5

جلوه های متنی در HTML5

اثر سایه اساسی بر متن

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

نمونه کدگذاری

#shadow h1
متن-سایه: 0px 1px 1px rgba (0،0،0، .2)؛
}

متن در مورد اثر آتش سوزی پیشرفته

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

نمونه کدگذاری

# آتش h1
متن-تراز: مرکز؛
حاشیه: 200px خودکار؛
خانواده قلم: "لیگ-گوتیک", پیک؛
اندازه قلم: 200px؛ تبدیل متن: حروف بزرگ؛
رنگ: #fff؛
text-shadow: 0 0 20px # fefcc9، 10px -10px 30px # feec85، -20px -20px 40px # ffae34، 20px -40px 50px # ec760c، -20px -60px 60px # cd4606، 0 -80px 70px # 973716، 10pp 80px # 451b0e؛
}

مثال عالی دیگر: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. گوشه گرد در HTML5

گوشه گرد در HTML5

طرح بندی صفحه وب در HTML5 از زمان معرفی CSS هرگز آسان نبوده است. و اکنون شما حتی می توانید گوشه های گرد از عناصر طرح خود داشته باشید! این را تصور کنید؛ نه بیشتر تصویر پس زمینه برش خورده ، نه قطعات تصویری کثیف تر. این باعث تشویق های بسیاری برای طراحان وب در خارج از کشور خواهد شد.

نمونه کدگذاری

div {
مرز: 2px جامد # 434343؛
بالشتک: 10px؛
زمینه: # e3e3e3؛
-moz-border-radius: 10px؛
-webkit-border-radius: 10px؛
عرض: 500px؛
}

توجه: Moz به معنای Mozilla است و webkit مخصوص Safari و Chrome است.

مثال عالی دیگر: http://fjd1.com/roundcorner.html

4. نمودار بردار مقیاس پذیر (SVG) در HTML5

آموزش HTML 5 ، راهنمای و نمونه ها

وکتور مقیاس پذیر مقیاس پذیر یا معمولاً با نام (SVG) یک گرافیک برداری 2 بعدی است که در پرونده های متنی XML تعریف شده است. به عبارت دیگر ، زیرا DNA آنها براساس فایل متنی XML است ، می توانند در بستر وب ایجاد و یا ویرایش شوند. همچنین این بدان معنی است که مقیاس به راحتی امکان پذیر است و موتورهای جستجو قادر به خواندن و درک تصویر هستند.

کد نمونه

مثالهای عالی دیگر:

5. درج فایل فیلم در HTML5

ویدیو در HTML5

در اینجا بخش جالب دیگری برای نمایش قابلیت های HTML5 آورده شده است. بسیاری از ویدیوها بصورت آنلاین معمولاً به صورت Flash به وب ساز ارائه می شوند. تا همین اواخر ، جاسازی ویدیو در HTML5 به آرامی جلب می شود (YouTube مثال خوبی است) و Flash به آرامی جذابیت خود را از دست می دهد. چرا اینطور است؟ کاربران تلفن همراه اگر می خواهید ویدیوی شما در هر دو گوشی آیفون و اندرویدی قادر به پخش باشد ، HTML5 راهی برای حرکت به جلو است.

برای جاسازی ویدیو ، باید 3 فرمت را پشتیبانی کنید که توسط مرورگرهای مختلف پشتیبانی می شوند. .mp4 (H.264 + AAC) ، .ogg (تئورا + ووربیس) ، .webm (VP8 + Vorbis)

کد نمونه

مثال عالی دیگر: https://www.html5rocks.com/fa/tutorials/video/basics/

6. نمایش اسلاید در HTML5

آموزش HTML 5 ، راهنمای و نمونه ها

پاور پوینت یک اسم مترادف با ارائه اسلاید بوده است. اما چرا خود را با ارائه آفلاین محدود می کنید که در آن می توانید اسلایدها را برای مخاطبان وب ایجاد کنید؟ HTML5 در ایجاد اسلایدهای ارائه بسیار قدرتمند ، کامل با منوی انتقال و ناوبری ، نجات پیدا کرده است. بهترین قسمت این است که ، حتی می توانید تبدیل خود را به صورت سه بعدی در ارائه ارائه دهید.

کد نمونه

پیش
انتقال: همه 1s سهولت؛
}

پیش: شناور
پس زمینه-رنگ: # F2F5FE؛
مرز-رنگ: سیاه؛
}

div {
تبدیل: rotate3d (1،1،0 ، 45deg)؛
}

مثالهای عالی دیگر:

7. محتوای قابل ویرایش در HTML5

آموزش HTML 5 ، راهنمای و نمونه ها

متن استاتیک در دوران عصری بسیار قدیمی است و انعطاف پذیری و پویایی بر جهان حاکم است. در HTML5 ، می توانید یک منطقه متنی را ایجاد کنید که توسط کاربر وب بدون ویرایشگر متن قابل ویرایش باشد.

کد نمونه

این محتوا قابل ویرایش است!

مثال عالی دیگر: http://html5demos.com/contentiable

8- بوم تعاملی در HTML5

آموزش HTML 5 ، راهنمای و نمونه ها

علاوه بر SVG در HTML5 ، بوم بهترین چیز دیگری است که تاکنون در وب اتفاق افتاده است. بوم اجازه می دهد تا از 2 شکل ابعادی ارائه شود که تعامل را به یک سطح کامل و بدون کمک فلش می رساند.

با این وجود ، کد نویسی ساده در HTML5 که تعامل شگفت انگیز انیمیشن را ایجاد می کند ، لازم به ذکر است در اینجا.

مثال عالی دیگر: http://www.bestfreewebresource.com/2010/09/10-best-html5-canvas-applications.html

9. در HTML5 بکشید و رها کنید

آموزش HTML 5 ، راهنمای و نمونه ها

کشیدن و رها کردن (گاهی اوقات با عنوان DnD شناخته می شود) یکی دیگر از ویژگیهای جالب در دسترس HTML5 است. مثال عالی اجرای Google در Gmail است. اگر از هر مرورگر پشتیبانی HTML5 استفاده می کنید ، می توانید به سادگی یک پرونده را از رایانه خود بکشید و روی پنجره پیام نوشتن رها کنید. به صورت خودکار به عنوان یک ضمیمه اضافه می شود. چقدر باحاله?

کد نمونه (DnD بومی)

document.addEventListener (“dragstart” ، عملکرد (رویداد) {
event.dataTransfer.setData (“متن” ، “متن سفارشی”)؛
event.dataTransfer.effectAllowed = ‘کپی’؛
} ، نادرست)؛

مثال عالی دیگر: http://www.html5rocks.com/fa/tutorials/dnd/basics/

10. نمودار داده CSS خالص در HTML5

آموزش HTML 5 ، راهنمای و نمونه ها

قبل از HTML5 ، ایجاد نمودار موجود فقط با استفاده از کدگذاری در HTML غیرممکن است. علاوه بر این ، تغییر مقدار داده و انعکاس در نمودار کار ساده ای نیست. دوباره ، HTML5 به نجات. همراه با CSS ، می توانید یک نمودار کاملاً زیبا ایجاد کنید که مایکروسافت اکسل را شرم آور کند. کدها ساده هستند و تنها کاری که باید انجام دهید صرف وقت برای سفارشی کردن رنگ و جلوه مناسب برای نمودار است.

مثال عالی دیگر: http://cssglobe.com/pure-css-data-chart/

به اندازه کافی از HTML 5 نمی توان دریافت کرد?

ما هم همین طور! در اینجا بیشتر در مورد موضوع است ، آنها را بررسی کنید.

* 30 نمونه بسیار جالب از وب سایت های HTML 5
* شروع به کار با HTML 5
* باید آموزش HTML 5 را در سال 2012 بخوانید
* بیاموزید HTML 5: 10 باید درس بخوانید

همچنین ، بررسی کنید  این دوره خرابی HTML 5 توسط رابین نیکسون. رابین نیکسون نویسنده Learning PHP ، MySQL و JavaScript است. این دوره تقریباً همه چیزهایی را که یک شخص تازه کار باید در HTML5 بدانید شامل می شود – از جمله برنامه نویسی اساسی HTML ، بوم HTML5 برای طراحی ، جغرافیایی ، ذخیره سازی محلی و همچنین صوتی و تصویری HTML5.

مقاله اصلی برای اولین بار در تاریخ منتشر می شود وبلاگ WHSR؛ اکنون توسط کارمندان BuildThis.io مدیریت و به روز شده است.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map