22 پست در این موضوع

html5 دارای قابلیت ها و امکانات جدیدی است که کار را برای طراحان وب بسیار ساده می کند . از جمله این امکانات می توان به پخش فایل های صوتی و تصویری بدون نیاز به نرم افزار جانبی خاص و یا طراحی اشیا به صورت 2 بعدی اشاره کرد . در اين بخش سعی میشه ، تا با ارائه مثال های عملی همراه با کد اصلی برنامه و خروجی واقعی ، نحوه ايجاد يک وب سايت را تشريح کنیم .

Share this post


Link to post
Share on other sites

معرفی زبان HTML 5 :

HTML 5 ، ورژن جدید زبان طراحی صفحات وب یعنی HTML است . این زبان به عنوان جدیدترین استاندارد طراحی صفحات وب معرفی شده است .

HTML 4 در سال 99 میلادی به دنیای وب معرفی شد ، ولی از آن زمان تاکنون دنیای وب و نیازهای اینترنتی تغییر زیادی کرده است . بنابراین این نیاز وجود داشت تا یک استاندارد جدید معرفی شود تا بتواند نیاز های جدید کاربران را بهتر پوشش دهد .

HTML 5 هنوز در حال بروز رسانی و ویرایش است و مرورگرهای مطرح در تلاشند تا نسخه های جدید آنها ، سازگاری بهتری با این زبان جدید داشته باشد .

در HTML 5 ، قابلیت ها و امکانات جدیدی قرار داده شده است که تا قبل از این برای انجام آنها نیاز به نرم افزارهای جانبی در مرورگر ها داشتیم .

HTML 5 ، چگونه متولد شد :

HTML 5 ، حاصل همکاری و مشارکت دو نهاد اصلی استاندارد سازی وب یعنی W3C و the Web Hypertext Application Technology Working Group (WHATWG) است .

این دو نهاد به صورت مستقل در حال طراحی یک استاندارد برای وب بودند ، ولی در سال 2006 توافق کردند تا با همکاری هم HTML 5 را ایجاد نمایند .

در طراحی HTML 5 قوانین و راهکارهای زیر به صورت اجباری تعیین شد تا رعایت شوند :

  • تمام قابلیت های جدید باید بر پایه HTML , CSS و جاوا اسکریپت باشند .
  • باید نیاز به plugin ها و نرم افزارهای جانبی مثل فلش کاهش یابد .
  • سیستم عیب یابی و رفع نقص عیب HTML بهبود یابد .
  • سعی شود در طراحی صفحات وب نیاز کمتری به اسکریپت ها باشد .
  • HTML 5 باید در اجرا مستقل از سیستم و کامپیوتر باشد .

معرفی ویژگی های جدید در HTML 5 :

در HTML 5 ، ویژگی ها و قابلیت های فراوان جدیدی قرار داده شد است که کار را برای طراحان وب بسیار ساده می کند . تا پیش از این طراحان وب برای انجام این امور نیازمند استفاده از plugin ها و نرم افزارهای جانبی مختلفی بودند .

در لیست زیر برخی از این ویژگی های جدید را به صورت مختصر معرفی کرده ایم . سپس در هر بخش جدا به آموزش نحوه کارکرد و استفاده از آنها می پردازیم :

  • اضافه شدن تگ < canvas > ، برای طراحی اشیا و اشکال به صورت 2 بعدی .
  • اصافه شدن تگ < video > و < audio > برای اجرای فایل های صوتی و تصویری بدون نیاز به یک نرم افزار جانبی مثل Flash Player .
  • کنترل های جدید فرم مثل calendar , email , date و time اضافه شده اند ، که طراحی و برنامه نویسی فرم ها را بسیار ساده می کند .
  • امکان ذخیره اطلاعات بر روی مرورگر کاربر - این قابیلت تقریبا کار کوکی ها cookie را در صفحات HTML انجام می دهند .

نکاتی راجع به نحوه آموزش HTML 5 :

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

تمامی مثال ها و مطاب این بخش بر اساس استاندارهای مرجع های آموزشی رسمی این زبان طراحی شده و با مرورگر های مطرح IE , Opera , FireFox و Chrome تست شده اند .

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

نمایش ویدیو در صفحات HTML :

بسیاری از صفحات وب به پخش و اجرای فایل های ویدیویی و فلش می پردازند . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های ویدویی در صفحات وب وجود نداشت و طراحان وب برای نمایش اینگونه فایل ها از ابزارهای جانبی مثل falsh player استفاده می کردند .

این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل ویدویی را نمایش دهد .

اما HTML 5 ، یک استاندارد برای نمایش فایل های ویدویی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .

تگ جدید < video > ، برای نمایش فایل های ویدویی در صفحات وب به کار می رود .

در زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :

شکل کلی استفاده از تگ < video > :

<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.ogg" type="video/ogg" />

Your browser does not support the video tag.

</video>

در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

  • خواص width و height : این خواص ابعاد فریم نمایش ویدیو را تعیین می کنند . تعیین این پارامترها اجباری نیست ، اما تعیین آنها از قبل ، این امکان را به مرورگر و طراح صفحه می دهد تا قبل از اجرای صفحه میزان فضای لازم برای این تگ را در نظر گرفته و طرح صفحه به هم نریزد . اگر مقدار این خواص تعیین نشوند ، فریم پخش ویدیو به اندازه سایز فایل ویدویی در خواهد آمد .
  • خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .
  • تعیین چند فرمت برای فایل ویدویی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < video > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص ویدویی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :

eb44ab48501.jpg

تگ های مربوط به پخش ویدیو در صفحات وب ":

در لیست زیر تگ های اصلی و مهم مرتبط با پخش ویدیو در HTML 5 را به همراه توضیحات مختصری راجع به هر کدام ، قرار داده ایم :

< video > : این تگ تگ اصلی پخش ویدیو در HTML 5 است ، که به وسیله آن کد لازم برای نمایش ویدیو را قرار می دهیم .

< source > : این تگ آدرس و نوع فایل ویدیویی که می خواهیم نمایش دهیم را تعیین می کند .

پخش صوت و آهنگ در صفحات HTML :

ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و طراحان وب برای پخش اینگونه فایل ها از ابزارهای جانبی مثلreal palyer و falsh player استفاده می کردند .

این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی را پخش کند .

اما HTML 5 ، یک استاندارد برای پخش فایل های صوتی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .

تگ جدید < audio > ، برای پخش فایل های صوتی در صفحات وب به کار می رود .

در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :

شکل کلی استفاده از تگ < audio > :

<audio controls="controls">

<source src="song.mp3" type="audio/mp3" />

<source src="song.ogg" type="audio/ogg" />

Your browser does not support the audio elemet.

</audio>

در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

  • خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .
  • تعیین چند فرمت برای فایل صوتی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < audio > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص صوتی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :

8b933349c71.jpg

تگ های مربوط به پخش صوت و آهنگ در صفحات وب :

< audio > : این تگ ، تگ اصلی پخش صوت در HTML 5 است ، که به وسیله آن کد لازم برای نمایش صوت را قرار می دهیم .

< source > : این تگ آدرس و نوع فایل صوتی که می خواهیم پخش کنیم را تعیین می کند .

ویرایش شده در توسط BKM_BASIR

Share this post


Link to post
Share on other sites

ورودتون را به انجمن تبریک می گم

در صورتی که مطلبی را از جایی دیگه می نویسید منبع ان را ذکر کنید.

با تشکر

Share this post


Link to post
Share on other sites

خسته نباشید خدمت همه ی دوستان

چند وقت پیش همایشی با موضوع وب و بستر باز وب برگزار شد.

قسمت اول پاور پوینت با موضوع مروری بر HTML از آغاز تا امروز (پیشنهاد می کنم از دست ندید) را می توانید از اینجا دانلود کنید. ارائه توسط امیر عباس عبدالعلی

در صورت استقبال شما دوستان قسمت های بعدی این همایش در اختیار شما عزیزان قرار خواهم داد.

Share this post


Link to post
Share on other sites

با توجه به رویکرد آموزشی انجمن تاپیک مهم شد

لطفا آموزشها را جامع تر ادامه بدهید تا کاربران استفاده مناسب کنند .. ترجیحا منابع ترجمه شده از سایتهای انگلیسی زبان و یا منابع دست اول باشه

خود من هم تا جایی که فرصت باشه به رشد این تاپیک کمک میکنم

Share this post


Link to post
Share on other sites

اول بگم که جای دوستانی که تو همایش شرکت نکردند خیلی خالی بود واقعا همایش مفیدی بود

منم تا جایی که بتونم و سوادم بکشه اموزش هایی در مرد Html5 میزارم براتون

Share this post


Link to post
Share on other sites

سلام ممنونم از دوستان اگه وقت کردم منم کمک می کنم تا اموزش های بهتر وقوی تر بشه

Share this post


Link to post
Share on other sites

html5نمایش ویدئو در

Example code

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

می بینید که از ویدئو هایی با پسوند

mp4 و ogg و webm

پشتیبانی میکند

(Flash is dead)

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

از اونجایی که مرورگرهای قدیمی از قابلیت های جدید Html5 پشتیبانی نمیکنند با این آموزش می توانید Html5 رو به مرورگرهای قدیمی معرفی کنید تا مشکلی در نمایش سایتتون به وجود نیاد.

<!DOCTYPE HTML>
<html>

<head>

<title>Html 5</title>

<!--[if It IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![if It IE 9]-->

</head>

<body>

</body>

</html>

ویرایش شده در توسط AHK95

Share this post


Link to post
Share on other sites

عنصر های جدید Html5

عنصر header : این عنصر شامل اطلاعاتی مانند عنوان،لوگو و ... می باشد.

عنصر nav : یکی از پر کاربرد ترین برچسب هاست که در تمامی پروژه ها استفاده می شود.این برچسب شامل لینک های مهم و پر کاربرد سایت می باشد.از این پس برای ایجاد منو های سایت،از این برچسب استفاده کنید.

عنصر section : این عنصر برای گروه بندی عمومی بخش های مختلف استفاده می شود. مثال زیر رو می زنم تا بهتر متوجه بشید

مثلا برای یک سایت خبری میتونید مقالات بخش های ورزشی،اقتصادی و ... رو section های خودشون قرار بدید.

عنصر article : این عنصر کاملا مثل section است با این تفاوت که برای برای گروه بندی های خصوصی تراست مانند آخرین ارسال ها ، نظرات کابران و ....

نکته : عناصر article و section را میتوان در داخل یکدیگر قرار داد.

عنصر aside : این عنصر برای مواردی استفاده میشود که تصمیم دارید یک قسمت را از بقیه قسمت ها جدا کنید.کاربرد این عنصر را می توانید در مثال زیر ببینید

- یک بخش خاص از محتوای صفحه که کاملا مستقل است(مانند محتوای برچسب های article و section)

- بلوک های تبلیغاتی

عنصر footer : این بخش یا پاورقی سایت که شامل اطلاعات مربوط به حق نشر،نام نویسنده،لینک و هر محتوایی مشابه دیگری است.این عنصر معادل <div id=”footer”> است.

این عناصر از نظر نمایش با div تفاوتی ندارند و فقط بخاطر مفهومی تر کردن این زبان اضافه شده اند.

=====================================================================================================================

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

Share this post


Link to post
Share on other sites
html5نمایش ویدئو در

Example code

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

می بینید که از ویدئو هایی با پسوند

mp4 و ogg و webm

پشتیبانی میکند

(Flash is dead)

در ادامه آموزش radman عزیز برای کاملتر کردن بحث برچسب video برخی از خصیصه های دیگر را قرار می هم و بابت این که چند روز نبودم معذرت خواهی می کنم

  • loop با افزودن این عبارت کلیپ ما پس از اتمام به طور خودکار دوباره شروع به پخش می کند.
  • autoplay با افزودن این عبارت کلیپ ما به محض این که صفحه لود شود شروع به پخش می کند.
  • muted با این عبارت در ویندوز و پلیر ها نیز آشنا می باشید کار آن قطع کردن صدای کلیپ می باشد.
  • poster به کمک این عبارت می توانید عکسی را به عنوان موضوعی از کلیپ قبل از پخش ویدیو نمایش دهید.

Share this post


Link to post
Share on other sites

سلام دوستان این جدول تگهای html5 هست که منبع ایرانی نداره توسط خودم از سایتهای مرجع برنامه نویسی خارجی تهیه و عکسبرداری شده

d2af725d3e1.png

d2af725d3e2.png

d2af725d3e3.png

d2af725d3e4.png

d2af725d3e5.png

Share this post


Link to post
Share on other sites
این مطالب برای یادگیری html5 و css3 خیلی مفید هستش ، پیشنهاد میکنم 4 تاش رو دانلود کنید حجمش هم کمه:

توضیحاتش هم که این ها چه مقالاتی هستند:

دوست عزیز لطفا قوانین انجمن رو رعایت بفرمایید و از ارسالهای تکراری خودداری کنید الان در سه تاپیک مختلف شما این ارسال رو انجام دادید

تا لحظات دیگه پستهای اضافی شما حذف خواهند شد...

Share this post


Link to post
Share on other sites
html5نمایش ویدئو در

Example code

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

می بینید که از ویدئو هایی با پسوند

mp4 و ogg و webm

پشتیبانی میکند

(Flash is dead)

من تگ ویدئو رو گذاشتم یه تیکه مختص نمایش ویدئو ایجاد شد ولی پخش نمیکنه

Share this post


Link to post
Share on other sites

سلام من برای قسمت ورود میخوام از یه منوی dropdown استفاده کنم ولی نمیدونم به چه صورت هست تازه کار رو شروع کردم

مبشه راهنمایی کنید

Share this post


Link to post
Share on other sites

سلام

برای ایجاد یه playlist از فایلهای ویدئویی باید چطور کدش رو با html5 نوشت؟

ممنون

Share this post


Link to post
Share on other sites

دوستانی که قصد بهره گیری از html5 رو دارند بهتره از کروم استفاده کنند. طبق تجربیات من از فایرفاکس سازگار تره..

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری