آموزش پیشرفت های html5 و ماژول های css3

Printable View

13-05-2014, 18:28
ashkan 261

آموزش پیشرفت های html5 و ماژول های css3
سلام

پس از انتشار نسخه html5 و css3 تمام مرورگر ها و سیستم عامل های موبایل و تبلت به سرعت اعلام سازگاری با این زبان ها را کردند . و تقریبا سیستم تمام کاربران دنیا قابلیت پشتیبانی از این دو زبان را دارند ، لذا طراحان وب برخلاف گذشته می توانند با خیال آسوده از روش های استفاده شده در این دو زبان استفاده کنند .
نکته قابل توجه تطبیق نسخه های قبلی با نسخه های جدید است و این امر موجب شده تا اطلاعات اولیه در مورد نسخه های قدیمی این دو زبان به فراگیری سریع نسخه های جدید کمک کنند .
در این تاپیک قصد دارم که موارد مهم و ویژه ی این دو زبان بخصوص html5 رو خدمت کاربران عنوان کنم .
- موارد جدید در html5 :
1. عناصر ( المنت های ) جدید
2. کاربرد های جدید
3. پشتیبانی کامل از css3
4. قبلیت اجرای مستقل فیلم و موزیک (بدون فلش پلیر یا پلاگین )
5. پرافیک های 3 بعدی و 2 بعدی مستقل ( بدون عکس)
6. پایگاه داده محلی
7. ذخیره سازی محلی
8. اپلیکیشن های تحت وب
- موارد جدید در css3 :
1. selector / سلکتور ها
2. بسته مدل ها
3. بک گراند و حاشیه های جدید و انعطاف پذیر
4. مدیریت جدید بر عکس ها
5. افکت های جالب متن ( سایه و روشن،خمیدگی و .. )
6. تحول سه بعدی و دو بعدی
7. انیمیشن های تحت css
8. چیدمان چند لایه ای ( رسپانسیو یا واکنش گرا بودن )
9. رابط کاربری
در ادامه ویژگی های جدید به عرض خواهد رسید ...
14-05-2014, 15:24
ashkan 261
- عنصر canvas در html5 :
این عنصر که بعنای تابلوی نقاشی است وظیفه ی طراحی های برداری را بر عهده دارد ، شما به وسیله canvas می توانید حتی یک عکس گرافیکی ایجاد نمایید که البته برای کشیدن نقاشی و بردارهای زاویه ای از جاوا اسکریپت کمک بگیرید .

نمونه ای از این المنت :
[HTML]<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

</body>
</html>
[/HTML]
مشاهده نتیجه المنت :

محتوای مخفی: مشاهده کنید

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

مرورگرهایی که ازین المنت پشتیبانی میکنند :
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari

این المنت به تنهایی از فونت پشتیبانی نمیکند و شما باید توسط جاوا اسکریپت فونت ها را به آن بی افزایید :
[HTML]var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
[/HTML]

محتوای مخفی: مشاهده نتیجه کد

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_font

منابع:
w3schools.com
نویسنده و مترجم اشکان مهین فلاح
طراحی سایت: daneshara.net
14-05-2014, 17:53
behnamy01

این HTML5 و ccs3 حدودا از کی معرفی شدن؟ من یک کتاب آموزش html دانلود کردم مال سال 89 هستش، html 4 خواهد بود پس نخونم؟
14-05-2014, 19:40
ashkan 261

از سال 2008 معرفی شده اما 2014 تکمیل نهاییش انجام میشه ، بخاطر اینکه مرورگرهای خیلی از کاربران سازگاری نداشت تا 2011 بیشتر طراحا ازش استفاده نکردن ولی کم کم css3 اومد رو کار ، هنوز که هنوزه بیشتر برنامه نویسای وب نمیتونن با html5 کار کنن و بیشتر سایت های از css3 بهره می برن ، به طور مثال ضعف های زیادی توی المنت های فیس بوک هست که برای یه html کار براحتی مشهوده