آموزش طراحی سایت
سلام در این سری آموزشها سعی می کنم مفاهیم HTML 5 ,CSS,JavaScript و... که برای ایجاد یک سایت نیاز هست یاد بدم.
آموزش HTML 5
آموزش طراحی سایت
اچ تی ام ال HTML5 یا زبان نشانه‌گذاری ابرمتنی۵ زبانی برای ساختن و ارائه ی محتوا برای شبکه جهانی وب است، این پنجمین تجدید نظر از استاندارد اچ‌تی‌ام‌ال است (در سال ۱۹۹۰ ایجاد و در سال ۱۹۹۷ به عنوان HTML4 استاندارد شده‌است) و تاکنون همچنان در دست توسعه‌است. اهداف اصلی اچ‌تی‌ام‌ال۵ بهبود این زبان به صورتی است که از جدیدترین فناوری‌های چند رسانه‌ای پشتیبانی کند در حالی که هم به راحتی توسط انسان‌ها قابل خواندن باشد وهم به طور مداوم توسط رایانه‌ها و دستگاه‌ها (مرورگرهای وب، تجزیه کننده‌ها و غیره) قابل درک باشد. اچ‌تی‌ام‌ال۵ در نظر دارد نه تنها HTML4 بلکه XHTML۱ و ۲HTML را نیز پشتیبانی کند. با پیروی از نسخه های قبلی اش HTML4.1 و XHTML1.1 ، اچ‌تی‌ام‌ال۵ یک پاسخ به استفاده مشترک اچ‌تی‌ام‌ال و XHTML بر روی شبکه جهانی وب، ترکیبی از ویژگی‌های معرفی شده توسط مشخصات مختلف و موارد معرفی شده توسط محصولات نرم‌افزاری مانند مرورگرهای وب است. مواردی که توسط کارهای مشترک ایجاد شده‌است. و هم چنین پاسخی به بسیاری ازخطاهای نحوی در مستندات وب موجود است. همچنین در تلاش است یکزبان نشانه گذاری یکتا تعریف کند که بتواند در دو قالب اچ‌تی‌ام‌ال یا XHTML نوشته شود.
احتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد.امروزه بسیاری از مرورگرها به شدت تمایل دارند که از HTML5 پشتیبانی کنند.
آموزش DocType:
اعلام نوع داکیومنت در HTML5 هم ساده و هم جالب می باشد. این کار به سادگی زیر میباشد:
<!DOCTYPE html>
بر خلاف doctype در HTML1 و HTML4 که با آن آشنا هستیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "HTTP>
/www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "HTTP>
/www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "HTTP>
/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP>
/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
برخی از آنها حتی در یک خط نوشته نمی شوند. این اولین دلیلی است که نشان می دهد کار طراحان وب با HTML5 راحت تر شده. یک صفحه ی HTML5 می تواند به سادگی زیر باشد:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 is rocks!</title>
</head>
<body>
<h1>HTML5 Rocks!</h1>
</body>
</html>
آموزش مسائل سربرگ HTML:
اغلب اوقات در تیتر صفحات وب خو، نوع محتوا، جاوااسکریپت و مسیر فایل CSS را مشخص می کنیم، و باز هم زندگی با HTML5 ساده تر شده است.<br /> به جای <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> در HTML5 می توان فقط از دستور زیر استفاده کرد:
<meta charset="UTF-8">
در HTML5 اطلاعات "type=text/javascript"دیگر لازم نیستند، در عمل فقط اسکریپت بخش کاربر روشن می باشد.
<script src="jquery.js">
مشابها CSS هم مانند جاوا اسکریپت، پردازش شهروند درجه ی یک را دریافت می کند. شما از هم اکنون می توانید "type=text/css" را فراموش کنید.
<link rel="stylesheet" href="html-my.css">
اگر روت<html>شما این شکلی است:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
می توانید آن را به شکل زیر ساده کنید:
<html lang="en" ">
آموزش صدا در HTML 5:
اجازه بدهید در شروع یک سرگرمی داشته باشیم. قرار است در مورد مرورگری صحبت کنیم که فایل صدا را در حالت طبیعی خود پشتیبانی می کند، درست همانطور که برچسب<img> از 1994 پشتیبانی می شود. HTML 5 قرار است به صدای پلاگین(plug-in) مانند مدیاپلیر، سیلورلایت، اپل کویک تایم، و Adobe Flash بد نام خاتمه دهد.
اگر در بالا کنترل اجرا کننده ی صدا نمی بینید، احتمالا مرورگر شما برچسب صدا را پشتیبانی نمی کند.
در بالا یک گالری از پخش کننده های صدا را، توسط مرورگرهای مهم می بینید. همانطور که می بینید اندازه کنترل پخش کننده ها با یکدیگر متفاوت هستند. پخش کننده ی IE9 در مقایسه با پخش کننده ی safari بسیار بزرگ می باشد. این مسئله برای طراح وب می تواند یک مشکل بزرگ باشد.
اگر برای ویندوز از safari استفاده می کنید، اما بدون Quick Time، برنامه ی Safari شما قرار نیست از برچسب مدیا (هم در حالت صوتی و هم در حالت تصویری) پشتیبانی کند. تصور می کنم که برنامه ی Safari برای اجرای فایل های مدیا، به کدک Quick Time اتکا دارد.
چگونه؟
برای اینکه صفحه ی وب شما موسیقی اجرا کند، کد html شما می تواند به سادگی زیر باشد:
<audio src="vincent.mp3" controls></audio>
متاسفانه محبوب ترین فرمت صدا MPEG3 (mp3) یک استاندارد باز نیست، بلکه یک اختلال عمومی است، و این بدین معنا که مرورگرها برای رمزگشایی آن باید مقداری پول پرداخت کنند و این ممکن است از لحاظ اقتصادی برای شرکت ها و سازمان های کوچکتر عملی نباشد. همانطور که در جدول زیر مشاهده می کنند تنها سران بزرگ ثروت کافی برای رمزگشایی MP3 را دارند. Opera و firefox تنها فرمت vorbis (ogg) را پشتیبانی می کنند که یک استاندارد باز می باشد.
از طرف دیگر Vorbis توسط Safari و IE9 پشتیبانی نمی شود، در حالیکه همیشه داشتن ogg و MP3 در کنار هم خوب است.امتحان کنید که مرورگر شما تا چه حد صدا را پشتیبانی می کند.
آنچه که می توانید انجام دهید در زیر ارائه شده است:
<audio controls>
<source src="vincent.mp3" type="audio/mpeg" />
<source src="vincent.ogg" type="audio/ogg" />
</audio>
ارائه کردن یا نکردن نوع MIME (type="audio/mpeg")برای مرورگر انتخابی می باشد. مدرنترین مرورگرها به اندازه ی کافی هوشمند هستند تا نوع محتوا را از طریق خود آن مشخص کنند. به هرحال کمک کننده بودن برای مرور گر همیشه خوب است، چرا که باعث می شود مرورگر شما سریعتر و بهتر کار کند.
ویژگی های <audio>
ویژگی Boolean ویژگی می باشد که یا در برچسب نمایش داده می شود یا نه. ویژگی Boolean فقط نام خود را دارد و دارای مقدار نیست. شما می توانید آن را از این طریق نیز به کار ببرید، هر مقداری که شما به ویژگی Boolean اختصاص دادید، فقط یک معنا دارد –TRUE.
<audio src="vincent.mp3" controls="true" loop="true" autoplay="true"></audio>
این ترکیب کاملا غیرضروری است
<audio src="vincent.mp3" controls loop autoplay></audio>
و این آن چیزی است که شما لازم دارید.
HTML 5 در واقع تکاملی از وب می باشد، نه انقلابی که فقط گذشته را نابود می کند. به هرحال اجازه دهید کمی به جلوتر برویم.
برای پشتیبانی مرورگری که اصلا نمی داند <audio> چیست، از قبیل IE8 وپایین تر، با استفاده از برچسب <object> باید اجازه دهیم در همان روزهای قدیمی خود باقی بمانند.
<audio controls>
<source src="vincent.mp3" type="audio/mpeg" />
<source src="vincent.ogg" type="audio/ogg" />
<object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" height="86">
<param name="movie" value="media/OriginalMusicPlayer.swf" />
<param name="FlashVars" value="mediaPath=vincent.mp3" />
</object>
</audio>
من در مثال بالا از یک اجرا کننده ی flash mp3 از PremiumBeat.com استفاده می کنم.
اگر مرورگر شما از HTML5 پشتیبانی نمی کند اما شما فلش پلاگین را دارید، احتمالا چیزی را از دست نداده اید.
اگر HTML5 نه مرورگر و نه فلش را پشتیبانی می کند، ممکن است به یوزر اجازه بدهید فایل صدا را دانلود کند و در گرفتن یک اجرا کننده برای اجرای آن، برای آن ها آرزوی خوش شانسی کنید.
<audio controls>
<source src="vincent.mp3" type="audio/mpeg" />
<source src="vincent.ogg" type="audio/ogg" />
<object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" height="86">
<param name="movie" value="media/OriginalMusicPlayer.swf" />
<param name="FlashVars" value="mediaPath=vincent.mp3" />
</object>
<a href="vincent.mp3">Download this lovely song and wish you all the best!</a>
</audio>
به جای استفاده از مرورگر اجرای صدای استاندارد، با استفاده از خلاقیت خود می توانید برنامه ی خود را بنویسید.
<audio id="player" src="vincent.mp3"></audio>
<div>
<button ="document.getElementById('player').play()">Play</button>
<button ="document.getElementById('player').pause()">Pause</button>
<button ="document.getElementById('player').volume += 0.1">Vol+ </button>
<button ="document.getElementById('player').volume -= 0.1">Vol- </button>
</div>
آموزش Video در HTML 5
جریان ویدئو در اینترنت چیز تازه ای نیست، تلاش برای انجام چنین کاری به نیمه ی قرن بیستم برمی گردد. به خاطر پایین بودن پهنای باند شبکه ها و قدرت پایین CPU، هیچ موفقیتی حاصل نشد، تا اینکه Youtube در سال 2005 آغاز به کار کرد.
اکنون با HTML5، می توانیم ویدئو را مانند یک عنصر داخلی، مانند ، قرار دهیم. طول، عرض و پوستر وجود دارند، طول و عرض سایز صفحه را مشخص می کنند و پوستر تنها یک فایل تصویر ثابت می باشد که قبل از اجرای فیلم روی صفحه قرار گرفته است.
چگونه؟
آموزش طراحی سایت
کد اجرای فیلم از صفحه ی وب شما، می تواند به سادگی خط زیر باشد.
<video src="rain.mp4" controls width="480" height="360"></video>
در واقع زندگی آنطوری نیست که ما فکر می کردیم باید باشد، خط ساده ی کد بالا تنها در google chrome و apple safari کار می کند و حتی برای اجرای فیلم درapple safari باید مطمئن شوید که quick time در کامپیوتر شما نصب شده است.
مشابه گرفتاری صوتی، یک فرمت جهانی برای ویدئو نداریم که همه ی مرورگرهای وب از آن پشتیبانی کنند، حداقل در زمان نگارش آن (13 دسامبر 2010).
در اینجا دوباره بازی پول مطرح می شود. H.264 یک مشکل همگانی است، فایرفاکس و اپرا خرید امتیاز آزاد یک کدک را پذیرفتند که Theora و WebM می باشد (کدکVP8).
گوگل در ژانویه ی 2011 اعلام کرد که در ورژن آینده ی گوگل کروم از H.264 پشتیبانی نمی کند. به طور خلاصه کد تک خطی ساده، همانطور که در بالا توضیح دادم، عملی نمی باشد. شما حداقل باید دو منبع برای یک ویدئو تامین کنید.
<video controls width="480" height="288">
<source src="media/html5iscool.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="media/html5iscool.ogv" type='video/ogg;codecs="theora, vorbis"' />
<source src="media/html5iscool.webm" type='video/webm;codecs="vp8, vorbis"' />
</video>
برای اینکه فایل ویدئوی خود را در H.264 رمزگشایی کنید، ممکن است تمایل داشته باشید HandBrake را امتحان کنید، که یک GPL مناسب ویک ابزار منبع باز می باشد. اگرمی خواهید تنها یک ویدئو را رمزگشایی کنید و تمایلی به نصب برنامه ای دیگر روی OS تقریبا بسته ی خود ندارید، می توانید فیلم خود را روی Youtube آپلود کنید. سپس Youtube برنامه ی شما را به فرمت H.264 آپلود کرده و شما می توانید آن را از Youtube دانلود کنید.
همانطور که برای فرمت های WEBM و Theora ممکن است Firefogg را (یک فایرفاکس پلاگین است که حداقل دانلود را لازم دارد.) امتحان کنید.
مرورگرهایی که در مورد HTML5 دارای معلومات کمتری هستند چطور؟
اگر فکر می کنید که اجرای ویدئو برای سه دفعه سخت است، به مدت کمی طولانی تر نفس خود را نگه دارید، زیرا قرار است برای تامین یوزرهای بیشتر که از مرورگرهای قدیمی تری مانند internet explorer 8 و یا پایین تراستفاده می کنند، بیشتر اذیت شوید.
مایکروسافت internet explorer 9 Beta را در نوامبر 2010 آزاد کرد که HTML5 را نیز پشتیبانی می کند. اما برچسب <video> به عنوان نگارش هنوز پشتیبانی می شود. به هرحال شما مجبورید برای قرار دادن یک فلش پلیر در <object> به جلوتر بروید زیرا بیشتر یوزرها فلش پلاگین را نصب کرده اند. من معتقدم که مایکروسافت در نهایت <video> را پشتیبانی می کند، چرا که همیشه برای اکثر یوزرها رسیدن به آخرین ورژن مرورگر زمان بر است.
<video controls width="320" height="240">
<source src="media/html5iscool.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="media/html5iscool.ogv" type='video/ogg;codecs="theora, vorbis"' />
<source src="media/html5iscool.webm" type='video/webm;codecs="vp8, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash" data="media/flowplayer-3.2.5.swf">
<param name="movie" value="media/flowplayer-3.2.5.swf" />
<param name="allowfullscreen" value="false" />
<param name="flashvars"
value='config={"clip": {"url": "html5iscool.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>
</video>
آموزش ایجاد ویدیو در صفحات وب با HTML5
در گذشته و شماره های قدیم HTML استفاده از ویدیو کار بسیار دشواری بود ولی در HTML5 افزودن یک ویدیو به لطف بروز رسانی از طرف مایکروسافت با سهولت بسیار قابل دسترس است .
به گونه ای که شما می توانید حتی تغییرات مورد دلخواه بر روی ویدیوی مورد نظر را اعمال نمایید .
آموزش نحوه اعمال ویدیو در صفحات وب
برای این کار می توانید از تگ ویدیو < Video > استفاده نمایید و آدرس ویدیوی مورد نظر را در تگ به صورت زیر کپی کنید :
<video controls="controls">
<source src="example address file" type="video mp4/ogg/webm">
</video>
توضیح کد:
در تگ ویدیو خصیصه Controls به شما امکان استفاده از ابزارهای کنترل ویدیو در مرورگر را می دهد ، به گونه ای که بتوانید همانند یک Player در مرورگر خود با ویدیو برخورد نمایید و از امکان هدایت زمانی یا seeking ویدیو را دشته باشید تا بتوانید زمان مورد نظر خود را بیابید و از دیگر امکانات این ویدیو پلیر افزایش و کاهش میزان صدا است و در آخر امکان نمایش به صورت تمام صفحه و یا اندازه ی اصلی ویدیو را دارا می باشید .
در صورت عدم تنظیم ابعاد ویدیو های بارگذاری شده در صفحه HTML5 هر ویدیو با ابعاد پیش فرض خود فایل در صفحه پخش خواهد شد .
برای جلوگیری از این بهم ریختگی در صفحه شما می توانید با تعیین ابعاد به صورت دلخواه ، به مرتب نمودن فایل های ویدیویی خود از نظر ابعاد اقدام نمایید .
شما کافیست از property های height و width را استفاده نمایید .
به کد زیر دقت نمایید :
<video controls="controls" width="360 px" height="480 px">
<source src="example address file" type="video/mp4">
</video>
باید همواره به یاد داشته باشید که فرمت های ویدیویی قابل پشتیبانی در HTML5 سه فرمت Mp4 ، Ogg و Webm می باشد ، در غیر این صورت باید با استفاده از یک Converter به یکی از فرمت یاد شده تغییر داده شود .
آموزش استفاده از پوستر برای پیش نمایش ویدیو در صفحات وب در HTML5
برای استفاده از یک پوستر برای پیش نمایش در فایل ویدیویی کافیست شما از property به نام poster در تگ < video > همانند زیر استفاده نمایید :
<video controls="controls" width="360 px" height="480 px" poster="URL Address">
در زمانی که ویدیوی شما هنوز اجرا نشده است عکس انتخابی شما به عنوان یک پوستر به نمایش گذاشته می شود .
با بخش دوم آموزش HTML 5 همراه ما باشید
آموزش طراحی سایت
