آشنا با CSS3 و HTML5

[mehdi_pro2]

CSS3 و HTML5 آخرین نسخه از محدوده‌های طراحی وب سایت هستند که توانسته‌اند بهترین قابلیت ها را همراه با سادگی بیشتر و در دسترس بودن بیشتر برای طراحان وب عرضه کنند. آنچه که ما در اینجا مورد بررسی قرار می‌دهیم نگاهی کوتاه به این دو رویداد مهم در عرصه طراحی وب است و دید تخصصی نسبت به آنها را به مطالب دیگر موکول می‌نماییم، با اینکه می‌دانیم این موضوع زمان طولانی‌ای از ایجادش نمی‌گذرد اما طراحان وب را درگیر خود کرده است و مقالات و آموزش های بسیاری در این بخش بیان شده است.










Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کرده‎اند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفته‎اند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیت‎ها و توانایی‎های دو نسخه قبل را پوشش می‎دهد و رویه‎ای جدید در طراحی سایت بوجود می‎آورد. CSS3Stylesheet محسوب می‌شود. امکانات جدید و هیجان انگیزی ارائه می‌دهد، روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد. نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است. فرزندی جدید در خانواده


این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگ‌ها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل می‌شود. برای دیدن کاربرد هر کدام می‌توانید به یکی از مراجع اصلی CSS3 یعنی اینجا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.


CSS3 امکاناتی را به شما می‌دهد که بوسیله آن می‌توانید صرفه جوبی قابل توجهی در زمان داشته باشید. این امکانات در حدی است که شما می‌توانید توانایی‌های (هرچند کوچک باشد!) پلتفرهای مبتنی بر جاوااسکریپت مانند جی کوئری ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])، موتولز ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) و .. را در صفحات بدون استفاده از آنها پیاده سازی کنید. در این میان، حالات و توانایی‌های جی کوئری بیشتر به چشم میخورد. اما با این حال اینجا تنها به صورت کلی بیان شده است. پیشنهاد می‌کنم برای دیدن توانایی‌های بیشتر آن به یکی دیگر از مراجع اصلی آن یعنی css3.com ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) و همچنین 33 مقاله ای که حتما در مورد ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])CSS3 ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) باید بخوانید ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مراجعه کنید.









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





این مقدمه را چیدم تا بهتر به اهمیت نسخه‌های زبان‌های تحت وب توجه کنید. با این حال از توضیح بیشتر آن می‌گذریم و به اصل موضوع یعنی HTML5 میپردازیم. HTML از دسته زبان های نشانه گذاری محسوب می‌شود که می‌تواند از طریق یکسری برچسب معین، صفحات استاندارد وب را ایجاد کند. حال که این برچسب‌ها در کدام نسخه به چه نحو کار می‌کنند خود بحث جدایی را می‌طلبد، اما این نکته قابل ذکر است که نسخه 5 رویدادهای مهمی را وارد این عرصه نمود. نسخه ای که از اکثر برندهای نرم افزاری دنیا که اصول طراحی وب را تایید می‌کنند، پشتیبانی می‌شود ( بجز اینترنت اکسپلورر که تنها بعضی از این امکانات را پشتیبانی می‌کند ). برای دیدن اینکه چه رویدادهایی در HTML5 وارد شده است به این سایت ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مراجعه کنید تا پیش نمایشی از هر قابلیت را ملاحظه کنید.




باید بدانید که مرورگرهای تحت وب تا سال 2022 مجبور به پشتیبانی کامل از HTML5 می‌شوند و تقریبا تمام اصول نمایش را بر اساس آن بنا می‌گذارند. در حال حاضر این نسخه، نسخه نهایی می‌باشد که تقریبا هیچ اشکالی بر آن وارد نشده است و زبانیست به شکل نهایی. در همین راستا Lachlan Hunt ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) گسترش دهنده مرورگر اپرا برای HTML5 گفته است: “ما می‌خواهیم با این روش، کار را برای طراحان وب آسان تر کنیم به طوری که آنها مجبور به دوباره نویسی هر قسمت نشوند” دقیق ترین مفهومی که از این جمله می‌توان برداشت کرد همین است و بس که “HTML5 روش طراحی وب را کاملا تغییر می‌دهد.”[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]




چنانچه توضیحی در مورد هر کدام از امکانات HTML5 که در پیش نمایش‌ها اشاره شد دارید، می‌توانید به این مطالب ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مراجعه کنید. در این مطلب به بررسی دقیق هر یک از این امکانات پرداخته شده است که دیدن آن را اکیدا توصیه می‌کنم!




در پایان اجازه دهید فریم ورکی را معرفی کنیم که به طور اختصاصی برای CSS3 و HTML5 ساخته شده است. این فریم ورک که 52framework ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) نام دارد ادعا دارد که در کمترین زمان شما را به مقصود می‌رساند. نکته ای که بخواهیم درباره آن بگوییم وجود ندارد چون کاملا در وب سایتش مورد بررسی قرار گرفته است و حتی پیش نمایشی نیز برای کاربران قرار داده شده است.




با این حال چنانچه مرجع یا مقاله‌ای مفید حتی به زبان فارسی که می‌توانند علاوه بر مراجع فوق، کاربران را بیشتر با این دو موضوع آشنا نمایند می‌شناسید، خواهشمندم تا در بخش نظرات ذکر کنید تا هرچه بهتر علاقه مندان به این حوزه را راهنمایی کرده باشیم.




موفق باشید/.


دهکده آی تی













---------- Post added at 09:32 AM ---------- Previous post was at 09:29 AM ----------


بررسی چند Demo از امکانات جدید Html



در وبسایت [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) مثالهایی از امکانات Html5 برای نمایش در مرورگرهای Internet Explorer, Firefox, Safari, Opera و Chrome جمع آوری و به نمایش گذاشته شده است.


برخی از این Demo ها که به نظر بنده جالب‌تر هستند:





1. Interactive canvas gradients ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
استفاده از Canvas برای تغییر رنگ صفحه وب با توجه به موقعیت موشواره در صفحه.




2. Content Editable ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
استفاده از خصیصه contenteditable که با استفاده از آن می‌توان به صورت پویا، محتوای بخش مورد نظر از صفحه را ویرایش نمود. پس از عبور موشواره از روی بخشهایی از صفحه وب که دارای این خصیصه باشند، کادر خاکستری رنگی دور آن نمایش داده می‌شود.






3. drag and drop ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
کشیدن و رها کردن عناصر یک لیست.




4. drag anything ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
تشخیص کشیدن و رها نمودن تمام اجزای صفحه، مانند متن‌ها، تصاویر، لینک‌ها، فایل‌ها و غیره.




5. navigator.onLine tests ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
تشخیص online یا offline بودن مرورگر وب.




6. Web Workers ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
استفاده از worker ها در یک صفحه وب برای جستجوی اعداد اول.

---------- Post added at 09:36 AM ---------- Previous post was at 09:32 AM ----------

از محدودیت های پی سی ورد همینه که تایپیک قشنگ نمیشه!!! من نمی تونم لینک url قرار بدم تا تایپیک اینطوری بهم نریزه!(فقط مدیر ها می توننند!):41: متاسفم برای کسانی که این ابزار رو برداشتن :27:

[neopersia]

از محدودیت های پی سی ورد همینه که تایپیک قشنگ نمیشه!!! من نمی تونم لینک url قرار بدم تا تایپیک اینطوری بهم نریزه!(فقط مدیر ها می توننند!):41: متاسفم برای کسانی که این ابزار رو برداشتن :27:
آره خوب این ابزار خیلی وقته که برداشته شده شما با این همه پست که باید میدونستی :دی
البته جدای از لینکها سایر مشخصات پست هم شبیه پستهای کپی و پیستی شده. اگر یه کم توی نوشتنشون بیشتر دقت کنید موضوع HTML 5 و CSS 3 موضوع جالبی هست

[Aref_2008]

مایکروسافت: اینترنت اکسپلورر ۹ سازگارترین مرورگر با HTML5 است

مایکروسافت با تلاش فراوان در حال توسعه نسخه آتی مرورگر صفحات وب خود یعنی اینترنت اکسپلورر ۹ است، زیرا اینبار قصد دارد در جنگ مرورگرها رتبه اول را کسب کند.
نسخه های اولیه (Preview) ساخته شده از اینترنت اکسپلورر ۹ امیدوار کننده ظاهر شده اند زیرا آزمایش های صورت گرفته نشان می دهد کاملاً با فرمت های HTML5 و CSS3 سازگار می باشد.


اخیراً تیم توسعه دهنده اینترنت اکسپلورر ۹ در وب سایت خود با به نمایش گذاشتن لیست کاملی از انواع تست ها، این مرورگر را سازگار با تمام استاندارهای W3C معرفی کرده است.


در این آزمایش ها نه تنها IE9 مورد بررسی قرار گرفته است بلکه مرورگرهای دیگری مانند فایرفاکس ۳٫۶٫۳اپرا ۱۰٫۵۲، اپل سافاری ۴٫۰۵ و گوگل کروم ۴٫۱ نیز وجود دارند. تمامی این تست ها بر روی سیستم عامل ویندوز صوت گرفته است.



لازم به ذکر است تست استاندارد W3C شامل این موارد می شود؛ HTML5, SVG 1.1 2nd edition, CSS3 media queries, CSS3 borders & backgrounds, CSS3 selectors, DOM level 3 core, DOM level 3 events و DOM level 2 style.



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


مایکروسافت با کمک W3C تعداد ۱۹۲ آزمایش را بر روی تمام این مرورگرها انجام داد و در ۸ آزمایش مرورگر صفحات وب مایکروسافت توانست امتیاز %۱۰۰ را کسب کند در حالیکه مرورگرهای دیگر هیچکدام چنین نتایجی را بدست نیاوردند.
از هم اکنون و با احتساب این نتایج، اینترنت اکسپلورر ۹ خشم رقبای خود را بر انگیخته است و تا آماده شدن نسخه اصلی باید منتظر بسیاری از تغییرات بود.

امکان دانلود اینترنت اکسپلورر ۹ از این سایت وجود دارد. سایت:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[Aref_2008]

HTML 5 چشم انداز وب


Html همواره زبان اصلی نشانه گذاری در وب بوده. این زبان هرچند در ابتدا بعنوان زبانی برای شرح معنایی اسناد علمی طراحی شده بود ، اما با گذشت زمان، طراحی آن بگونه ای پیش رفت که آنرا قادر ساخت تا انواع دیگر اسناد را نیز پوشش دهد.
در این مبان محدوده ای که هچنان بطور مناسب مورد توجه قرار نگرفته است محدوده سربسته برنامه های کاربری تحت وب (web applications) می باشد.Html 5 علاوه بر اینکه بعنوان نسخه بعدی Html 4.0.1 و همچنین XHTML 1.0 پیشنهاد شده است، تلاشی است برای تصحیح این موضوع با توجه به فعالیت ها و موضوعاتی که در چند سال اخیر مطرح شده اند.



تاریخچه

فعالیت HTML 5 در اواخر سال 2003 میلادی بعنوان اثباتی برای این مدعا آغاز شد که :" امکان توسعه فرمها در HTML 4 بگونه ای موجود است که بسیاری از ویژگیهای معرفی شده در xforms 1.0 را شامل شود، بدون اینکه پویشگرها نیازمند پیاده سازی موتورهای پرداخت، ناسازگار با صفحات html موجود باشند".
در سال 2004 میلادی Apple ، Mozilla و Opera همکاری خود را برای پیشبرد این هدف اعلام کردند و فعالیت خود را تحت گروه WHATWG آغاز کردند. در سال 2006 ، W3C علاقه خود را در این زمینه اعلام کرد و اقدام به ایجاد گروهی بمنظور همکاری با WHATWG و با هدف توسعه HTML5 نمود. گروه مذکور در سال 2007 آغاز به کار کرد و Apple ، Mozilla و Opera نیز به W3C این اجازه را دادند تا مشخه های جدید را تحت کپی رایت W3C منتشر کند.
بدین ترتیب در اوایل سال 2008 ، HTML 5 به عنوان جهت دهنده جدیدی برای توسعه وب معرفی شد. مشخصه های جدید HTML5 بیشتر بر روی Web Application ها و معرفی صدا و تصویر بعنوان رسانه سطح اول در وب متمرکز شده است که با استاندارد سازی این قابلیت ها توسط W3C بالتبع فراگیری و کاربرد آنها هموار تر خواهد شد.
از دیگر قابلیت های پیش بینی شده در HTML 5 ، ارایه مشخصه هایی برای نمایش دادن عناصر آشنای صفحات مانند سرصفحه (Header)، راهبری(Navigation) و پاورقی(Footer) می باشد.
مدیریت ذخیره اطلاعات در سمت کاربر (Client) نیز یکی دیگر از نکات برجسته HTML 5 است.


تعریف سند HTML 5

نسخه های قدیمی HTML و XHTML براساس گرامرشان (Syntax) تعریف می شدند در حالیکه HTML 5 برحسب DOM‌ تعریف مشود(ساختاری درختی که بصورت داخلی توسط پویشگر برای نمایش سند استفاده می شود) .
مزیت تعریف HTML 5 بر اساس DOM این است که زبان می تواند بطور مستقل از گرامرش تعریف شود. اصولا دو نوع گرامر برای نمایش اسناد HTML وجود دارد. یکی ترتیب HTML (که بعنوان HTML 5 شناخته می شود) که اشاره به گرامر برگرفته شده از SGML در نسخه های اولیه HTML دارد و بگونه ای تعریف شده که با نحوه برخورد پویشگرها با HTML سازگار باشد.

<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>

دیگری ترتیب XML (که بعنوان XHTML 5 شناخته می شود) که اشاره به گرامر XML 1.0 دارد و با فضای نام مشابه XHTML 1.0 تعریف میشود.



<html xmlns="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">


<head>


<title>An HTML Document</title>


</head>


<body>


<h1>Example</h1>


<p>This is an example HTML document.</p>


</body>


</html>



پویشگر ها از MIME type برای تفاوت قایل شدن میان این دو نوع گرامر استفاده می کنند و دیگر تشخیص این تفاوت بر اساس DOCTYPE نمی یاشد و لذا استفاده از DOCTYPE در گرامر XML ضرورتی ندارد (مگر در موارد خاص) .
هر سندی که با نوع html/text مشخص شده باشد باید نیازهای مربوط به ترتیب HTML را برآورده کند و هر سندی که با XML MIME مانند application/xhtml+xml مشخص شده باشد نیز باید شرایط ترتیب XML را برآورده کند.
نکته دیگری که در این میان قابل توجه است مشخص کردن character encoding می باشد . که توصیه می شود بکمک HTTP Content-Type header تعریف شود و اگر دسترسی به تنظیمات سرور ندارید در حالت HTML از عنصر <meta> در header و در حالت XHTML مطابق تعریف XML از خاصیت encoding در تعریف سند استفاده شود.





html serialization: <meta charset="UTF-8">xml serialization : <?xml version="1.0" encoding="UTF-8">



نگاهی به عناصر جدید

عناصر ساختاری و توصیفی:
هرچند طراحان معمولا با حفظ اصول اولیه سعی در ساختار شکنی برپایه خلاقیت های گرافیکی در صفحه آرایی و ارایه جلوه های بصری سازگار با محتویات وب سایت ها دارند لکن در هر حال اغلب صفحات مشخصه های مشترکی در بر دارند.
معمولا این ویژگی های مشترک مانند header ، footer و غیره را بکمک تگ div و با id‌ ها و یا class های مشخصی پیاده سازی می کنیم. تجربه شخصی من کم کم به این سو متمایل شده که همواره در layout های مختلف این ساختار را با اسامی توصیفی یکسانی بکار ببرم تا درنهایت نشانه گذاری شفاف تر و خوانا تری بدست بیارم که حداقل در مراجعات بعدی بسهولت قابل بررسی باشد.
حال در HTML 5 با در نظر گرفتن این نکته و همچنین کمک به ساختار معنایی HTML ، عناصر جدیدی معرفی شده اند که علاوه بر این به نرم افزارهای شناسایی کننده و پویشگر ها نیز کمک می کند تا فهرست مناسب تری از محتویات صفحه ایجاد کرده و به کاربر در پیمایش صفحات کمک کنند. این عناصر عبارتند از:


<header> این عنصر شمال اطلاعاتی مقدماتی برای یک بخش از صفحه و یا کل صفحه می شود که می تواند همان سربرگ معمولی با اطلاعات برند و یا فهرست کامل محتویات باشد.
<nav>این عنصر برای بخشی از سند که شامل لینک هایی به دیگر صفحات و یا لینکهای داخلی صفحه می شود درنظر گرفته شده است. البته لزومی ندارد که تمام لینک ها در این عنصر قرار گیرند ، صرفا لینک های اصلی.
<section>این عنصر بیشتر شبیه به همان تگ div می باشد که به منظور جداکردن قسمت های مختلف سند تعریف به کار می رود و درواقع تعریف کننده عمومی بخش های صفحه می باشد.
<article>معرف بخشی از صفحه است که به ماهیتی مستقل دارد مانند یک پیام وبلاگ یا محتویات یک بحث در انجمن.
<aside> بیانگر محتویات در ارتباط با بخش اصلی سند می باشد که معمولا در یک نوار کناری به نمایش در می آید مانند پیام های مرتبط در یک وبلاگ و غیره.نکته ای که باید به آن توجه داشت این است که این عنصر لزوما مفهموم نوار کناری (side bar) را ندارد و بیشتر شبیه به سوتیتر می باشد.
<footer> همانطور که از نامش پیداست برای نمایش اطلاعات پایانی یک بخش و یا کل صفحه استفاده می شود.





صدا ، تصویر و پویانمایی :

صدا و تصویر یکی از مهم ترین رسانه های اطلاع رسانی می باشند اما HTML فاقد عناصری برای پشتیبانی این رسانه ها است. به همین دلیل سازندگان وب سایت ها عمدتا به ملحقاتی چون Flash روی آورده اند.
HTML 5 با معرفی audio و video سعی در برطرف کردن این کاستی دارد. علاوه بر این عناصر دیگری مانند <canvas> که به منظور خلق تصاویر دوبعدی و پویانمایی با کمک DOM و JavaScript معرفی شده است، نیاز به ملحقاتی چون Flash و Silverlight را به حداقل می رساند.


قابلیت های دیگر : از دیگر قابلیت های HTML 5 می توان به گستره API های معرفی شده و مزایای که برای آینده برنامه های کاربردی در وب خواهند داشت اشاره کرد مانند


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

چه زمان HTML 5 به اتمام می رسد

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

[Aref_2008]

چه چیزهایی را میتوان از Html5 انتظار داشت؟

فضای آفلاین: Google Gears را میشناسید؟ HTML5 قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک “ابًر کوکی”.:21:

اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.

پخش صوت و ویدیو به صورت مستقل: این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی میتوان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید.

مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های توییتر شما را برچسب گذاری کند.

فرم‌های هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.

تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون درد و خون ریزی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت, انجمن, سایتهای drag-and-drop نوشت.

[Aref_2008]

آیا با وجود JavaScript و Flash نیازی به استفاده از HTML5 هست؟



بسیاری فکر میکنند که HTML5 قرار است جای جاوا اسکریپت را بگیرد و این تصوری کاملا غلط است. برعکس HTML5 سعی بر این دارد کارآیی جاوا اسکریپت را بهبود بخشد. در حقیقت HTML5 کنترل بسیار بیشتری به JavaScript خواهد داد. اما در مورد فلش قضیه برعکس است.
Flash همیشه انتخاب خوبی نیست. مشکلات زیادی دارد. برای مثال استفاده زیاد از منابع سیستم مانند CPU و اینکه همیشه باید برای استفاده از آن نرم افزارش را نصب کرد.
و در آخر اینکه HTML5 آمده تا وب را تکان دهد. منتظر یک زلزله ۱۰ ریشتری باشید.:27:

[mehdi_pro2]

لیست تگ های جدید در html5



article> tag
The tag defines external content. The external content could be a news-article from an external provider, or a text from a web log (blog}, or a text from a forum, or any other content from an external source.


<aside> Tag
The tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.


<audio> Tag
The tag defines sound, such as music or other audio streams.


<canvas> Tag
The <canvas> tag is used to display graphics. The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.


<command> Tag
The <command> tag defines a command button, like a radiobutton, a checkbox, or a button. The command element must be inside a menu element. If not, it will not be displayed.


<datalist> Tag
The <datalist> tag defines a list of options. Use this element together with the input element, to define which values the input element can have. The datalist and its options will not be displayed, it is only a list of legal input values. Use the input element’s list attribute to bind it together with a datalist.


<details> Tag
The <details> tag is used to describe details about a document, or parts of a document.


<embed> Tag
The <embed> tag defines embedded content, such as a plug-in.


<figcaption> Tag
The <figcaption> tag contains a caption for the “figure” element. The “figcaption” element should be placed as the first or the last child of the “figure” element.


<figure> Tag
The <figure> tag is used to group some elements. The content inside a figure element is stand-alone content, typically used to explain parts of a document, but also able to move from the document and put somewhere else.


<footer> Tag
The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information.


<header> Tag
The <header> tag defines an introduction to the document.


<hgroup> Tag
The <hgroup> tag defines the heading of a section or a document. The hgroup element is used to group headers, <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings.


<keygen> Tag
The <keygen> tag defines a generated key.


<mark> Tag
The <mark> tag defines marked text. Use the <mark> tag if you want to highlight parts of your text.


<meter> Tag
The <meter> tag defines a measurement. Used only for measurements with a known minimum and maximum value.


<nav> Tag
The <nav> tag defines a section of navigation.


<output> Tag
The <output> tag defines different types of output, such as output written by a script.


<progress> Tag
The <progress> tag defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript.


<rp> Tag
The <rp> tag is used in ruby annotations, to define what to show browsers that do not support the ruby element. A ruby annotation is Chinese notes or characters. Used in East Asia, to show the pronunciation of East Asian characters.


<rt> Tag
The <rt> tag defines an explanation or pronunciation of characters (Chinese notes or characters). Used in East Asia, to show the pronunciation of East Asian characters.


<ruby> Tag
The <ruby> tag defines a ruby annotation (Chinese notes or characters). Used in East Asia, to show the pronunciation of East Asian characters. Use together with the <rt> and/or the <rp> tags:
The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the “ruby” tag.


<section> Tag
The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.


<source> Tag
The <source> tag defines media resources for media elements, such as <video> and <audio>.


<summary> Tag
The <summary> tag contains a header for the “details” element, which is used to describe details about a document, or parts of a document.


<time> Tag
The <time> tag defines a time or a date, or both.


<video> Tag
The <video> tag defines/video, such as a movie clip or other video streams.
I would like to hear from you all, How do you think these latest Tags and Web-development and Designing practices are going to change the People who Design Web Pages?