قرار دادن ویدئو در صفحه توسط html5 بسیار آسان است و از قرار دادن تصویر در صفحه سخت تر نیست. در این مقاله مزایای استفاده از ابزار اجرا کننده داخلی ویدئو مرورگر بحث خواهد شد. به راحتی می توانیم با استفاده از تگ <video> و بدون استفاده از هیچ پلاگین خارجی ویدئو را اجرا نماییم.
می بایست از Chrome, Safari یا Internet Explorer 9+ استفاده نمایید. در مرورگرهای Firefox و Opera این کد به دلیل تداخل با ابزارهای داخلی مرورگر کار نمی کند. برای انجام این کار می بایست فرمت ویدئو شما .mp4 باشد.
کد زیر برای ایجاد فریم ورک ویدئو پلیر می باشد. این کد یک لایه بندی ساده برای ویدئو می سازد. کد html چیزی است شبیه به این:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Video Player</title>
<style>
body { font-family: sans-serif; border: 0; margin: 0; padding: 0; }
header { text-align: center; }
#player { display: table; width: 100%; padding: 4px; }
#player > div { display: table-cell; vertical-align: top; }
</style>
</head>
<body>
<header>
<h1>HTML5 Video Player</h1>
</header>
<section id="player">
<div> <!-- The video will appear here-->
</div>
</section>
</body>
</html>
هم اکنون کادر ویدئو ایجاد گردید می بایست ویدئو به صفحه اضافه شود.
کد اضافه نمودن ویدئو به صفحه وب سایت کمی پیچیده تر از اضافه کردن تصویر به وب سایت می باشد برای اضافه کردن ویدئو به صفحه سایت می بایست از تگ <video> استفاده نمایید.
<video src="[ YOUR VIDEO ].mp4" controls width="720" height="480"> Your browser does not support the video element, please #D try <a href="videos/VID_20120122_133036.mp4">downloading the video instead</a> </video>
در بخش src می بایست آدرس فایل ویدئو داده شود. بخش controls اعلام می نماید که شما می خواهید ویدئو ابزارهای استاندارد کنترل ویدئو را داشته باشد. width و height نیز طول و عرض ویدئو در صفحه می باشند و در صورتی که مرورگر از المان <video> پشتیبانی ننماید متن داخل المان <video> نمایش داده می شود.
به طوری که می بیند وب در حال تغییر است و به طوری که می بینید قبلا برای نمایش ویدئو در سایت مجبور بودید از پلاگین های مختلف برای انجام این کار استفاده نمایید. ولی هم اکنون این کار توسط خود مرورگر انجام می شود. html5 به شما این قابلیت را می دهد که به آسانی ویدئو خود را در صفحه و توسط خود مرورگر نمایش دهید. البته در طراحی سایت خود در نظر داشته باشد که این کد فقط برای مرورگرهای مدرن سازگاری کامل دارد. برای آنکه ویدئو شما در تمامی مرورگرها اجرا شود می بایست از پلاگین ها به مانند فلش ویدئو پلیر استفاده نمایید.
در سال 2013 ابزارهای جدیدی برای طراحان و توسعه دهندگان وب معرفی شدند که شامل برنامه های جدید وب، منابع jquery، ابزارهای توسعه وب، ابزارهای طراحی سایت موبایل، ابزارهای کد زنی و ابزارهای ساخت فونت های جدید می باشد.
بسیاری از ابزارهای زیر رایگان هستند و بسیاری دیگر را می توانید به مبلغ اندکی خریداری نمایید.
به مانند همیشه در صورتی که موردی از قلم افتاده در بخش نظرات پایین صفحه آن را اعلام نمایید.
قصد ابداع در فونت ها را دارید؟ Typewolf برای شما بهترین سایت می باشد. فقط به شما قابلیت ایجاد فونت مورد نظر را نمی دهد بلکه فونت مناسب شما را می یابد.
Bootstrap, فریم ورک موبایل اول از توئیتر, اما Bootstrap 3 RC1 به وجود آمد. این نسخه تغییرات بسیاری نسبت به نسخه های قبلی نموده است.
iOS7 Wireframe Kit به شما امکان ایجاد وایر فریم را در Illustrator می دهد.
Tiff به شما تفاوت بین دو نوع فونت را نمایش می دهد. این سیستم با فونت های گوگل به مانند فونت های سیستم شما کار می کند.
Bytesize پادکست در مورد طراحی، توسعه وب و تکنولوژی می باشد. شما همچنین می توانید خلاصه مقاله را با لینک به مقاله مطالعه نمایید.
Skeuocard یک فرم پیشرفته کارت اعتباری می باشد و اعتبارسنجی ها و نوع فیلدهای مخصوص به خود را دارد.
WakaTi.me قابلیت حساب کردن زمان را به محیط ویرایشگر شما می آورد.
Responsive Web CSS ساخت وب سایت موبایل را برای انواع مختلف موبایل ها برای شما آسان می سازد.
Colorgorize گالری وب تقسم بندی شده توسط رنگ می باشد. شما می توانید سایت را با رنگ مورد نظر خود مرور و یا جستجو نمایید.
Spectacle برای سیستم مک طراحی شده برای کنترل صفحه با کلیدهای میانبر. این یک سیستم کد باز می باشد و استفاده از آن بسیار آسان می باشد.
Snapnote.io به اشتراک گذاری و استفاده از تصاویر را در صفحه به وسیله دراگ و دراپ آسان می سازد.
Pico سیستم مدیریت محتوای ساده و آسان می باشد که از دیتابیس استفاده نمی نماید. این سیستم کد باز می باشد.
CSS3 Animation Cheat Sheet به شما قابلیت ایجاد انیمیشن های مختلف را توسط css3 نمایش می دهد.
Precomposed Touch Gestures ابزار مناسبی برای ساخت دموی محصول و پرزنتیشن می باشد.
Mailparser یک راه آسان برای اتوماتیک سازی روتین ایمیل شما می باشد.
Progression.js یک پلاگین jquery برای نمایش عملکرد واقعی فرم می باشد.
CSS Zen Garden به شما امکان های ساخت ابزارهای مختلف توسط css را نمایش می دهد که با html5 هماهنگ شده.
NearlyFreeSpeech.NET سرویس هاستینگی است که شما برای آن مقدار که استفاده می نمایید پرداخت می کنید. همچنین یک ابزار محاسبه و پیشبینی قیمت هاست دارید.
Webflow ابزاری برای ساخت وب سایت موبایل به صورت تصویری می باشد. که شامل ابزارهای گرید، فونت های وب و فرم ها و .. می باشد.
Emmet LiveStyle یلاگین برای ویرایش فایل CSS شما می باشد. این ابزار با گوگل کروم و سافاری سازگاری دارد.
TypeWonder به شما امکان بررسی و تست فونت های وب را می دهد. فقط کافی است آدرس سایت مورد نظر را وارد نموده و فونت مورد نظر خود را انتخاب نمایید.
Cloud Cannon به شما امکان ایجاد سیستم مدیریت محتوا از css و html را می دهد.
SVGeneration به شما امکان ایجاد گرافیک های SVG را در سایت می دهد.
HTML زبان برنامه نویسی پایه می باشد و HTML5 آخرین نسخه HTML می باشد. که ابزارها و امکانات بسیاری برای ایجاد وب سایت پویا دارد. HTML5 استاندارهای مدرن وب را برای همگان به ارمغان آورده است.HTML5 قابلیت های فراوانی را به وب اضافه نموده است, که مطالب قابل خواندن توسط انسان را با مطالب قابل خواندن توسط ماشین را با یکدیگر در ارتباط قرار می دهد.
در روزهای پیش, تکنولوژی های جدید نظیر HTML5, CSS3, jQuery و سایر امکانات معرفی شدند. این تکنولوژی های جدید به طراحان امکان ایجاد وب سایت های پویاتر و به روز تر را می دهند. امروزه برخی از طراحان ترجیح می دهند مطالب آموزشی را به صورت آنلاین و از طریق کتاب های الکترونیکی مطالعه نمایند.
امیدوارم طراحان وب بتوانند از این مجموعه رایگان استفاده نمایند. لطفا نظرات خود را در بخش پایین صفحه بگذارید.
Dive Into HTML5 قابلیت های جدید html5 را به کاربر نمایش می دهد. نسخه آخر آن توسط O’Reilly, تحت لیسانس Google چاپ گردید.
دانلود: Dive Into HTML5
یک معرفی اولیه در مورد استانداردهای html5 و css3, که از موارد اولیه تا موارد کاربردی تر را آموزش می دهد.
دانلود : Up to Speed on HTML 5 and CSS 3
یک کتاب آموزشی html5 که آموزش خود را از طریق تشریح مثال های موارد انجام شده انجام می دهد.
دانلود Scribd in HTML5
در این کتاب به تغییرات html5 نسبت به نسخه های قبلی بیشتر اشاره شده
دانلود : HTML5 WTF?
شما دوست دارید مواردی را از وب بدانید ولی از پرسیدن آن می ترسید. دانستن عملکرد مرورگرهای وب در این تجربه ها از زبان Google.
دانلود: 20 Things I learned about Browsers and the Web
این کتای آموزشی المان های اولیه html5 را به شما آموزش می دهد و آن ها را از نظر کاربردی بررسی می کند. این کتاب آموزشی برای آنهایی که می خواهند با امکانات جدید html5 آشنا شوند مناسب است.
دانلود: HTML5 Quick Learning Guide.
Presentate کاربران را قادر می سازد پرزنتیشن های خود را در مرورگر و با قابلیت به اشتراک گذاری در هر وسیله ای بسازد. این برنامه توسط Faruk Ate و Justin Hileman ساخته شده. آنها قصد داشتند سیستم پرزنتیشنی را طراحی نمایند که بهترین در سطح وب باشد, و HTML5 به آنها این اجازه را داد تا این سیستم را راه اندازی نمایند.
File API و History API دو تا از امکانات HTML5 دیده شده در نرم افزار هستند, فول صفحه و امکان انواع مختلف فایل. آنها اعلام می نمایند که مشکلی که آنها با آن در حال حاضر روبرو هستند "پشتیبانی از مرورگرهای مختلف برای نوع داده های مختلف و مقداردهی ها".
نمایش به صورت تمام صفحه همچنین مشکلاتی دارد: آنها همچنین این مورد را اعلام نموده اند. آنها همینطور اعلام نموده اند آنها با استفاده از قابلیت های html5 سعی در کامل تر کردن این نرم افزار ساخت پرزنتیشن دارند.