فرمت های صوتی در وب سایت ها

استفاده از فایل های صوتی در طراحی وب سایت ها غالبا با دو هدف زیر صورت می گیرد:

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

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

 

wav: این فرمت صوتی که توسط شرکت Microsoft ارائه شده به دلیل پخش در نرم افزار Windows Media Player که همراه با سیستم عامل ویندوز عرضه می شود از محبوبیت بالایی برخوردار است، چرا که به راحتی در مرورگر وب رایانه هایی که ویندوز بر روی آنها نصب شده پخش می گردد، حجم فایل های wav. با مشخصات فنی فایل مانند نرخ بیت و تعداد کانال های پخش، ارتباط مستقیمی دارد اما به دلیل عدم استفاده از الگوریتم های فشرده سازی، نسبتا بالا است
mp3: فرمت mp3 از جمله فرمت های پرطرفدار در وب و تیز سایر رسانه های دیجیتال محسوب می شود که با استفاده از یک الگوریتم قدرتمند برای فشرده سازی فایل های صوتی توانسته نسبت خوبی میان حجم و کیفیت فایل ها ایجاد نماید. این فرمت عمدتا برای پخش موسیقی مورد استفاده قرار می گیرد و توسط اغلب مرورگرها پشتیبانی می شود.
wma: از عبارت Windows Media Audio گرفته شده و فرمتی است که توسط شرکت Microsoft عرضه گردیده اما برخلاف wav. از الگوریتم های فشرده سازی استفاده می کند و لذا حجم پایین تری دارد. برای پخش این فرمت روی مرورگر، باید نرم افزار رمز گشای آن بر روی رایانه موجود باشد.

mid: فرمت mid برای ضبط و پخش فایل های موسیقی که حاوی ریتم هستند (مانند پیانو) مورد استفاده قرار می گیرد و به دلیل استفاده از نت های موسیقی برای ذخیره سازی اطلاعات فایل. حجم فوق العاده پایینی دارد. این فرمت به وسیله اکثر مرورگرها پشتیبانی می شود و به دلیل حجم پایین می تواند به عنوان صدای پس زمینه صفحات وب مورد استفاده قرار گیرد.
ra و rum: این فرمتها که اعضای خانواده فرمت های قابل پخش در نرم افزار RealPlayer محسوب می شوند. برای پخش زنده فایل های صوتی کاربرد دارند اما پخش آنها در مرورگر مشروط به وجود نرم افزار Real Player روی رایانه با نصب افزونه موردنیاز روی مرورگر است.

saif: فرمت AIFF که محصولی از شرکت Apple است برای ذخیره سازی صداهای دیجیتال با کیفیت بالا ایجاد شده و غالبا بر روی سیستم های مکینتاش مورد استفاده قرار می گیرد
au: این فرمت صوتی که توسط شرکت Sun و برای سیستم های یونیکس تولید شده دارای کیفیت و حجم نسبتا پایینی است و کاربرد آن در وب محدودتر از سایر فرمت ها است.

افزودن صوت به صفحه
برای اضافه کردن صدا به صفحه وب روش های متعددی وجود دارد اما متأسفانه همه مرورگرها از آنها پشتیبانی نمی کنند لذا تنها به ذکر مواردی می پردازیم که توسط اغلب مرورگرها قابل اجرا هستند.

استفاده از برچسب <a>

ساده ترین روش برای قرار دادن فایل صوتی در صفحه وب، ایجاد یک پیوند به آن است تا در صورت وجود نرم افزار مرتبط، کاربر با کلیک روی پیوند بتواند قطعه صوتی را بشنود، پیش از این با روش ایجاد یک پیوند با استفاده از برچسب <a> آشنا شدند. اما برای یادآوری، روش استفاده از این برچسب را مجددا مرور خواهیم کرد. این برچسب مشخصه ای با نام herf دارد که به نشانی نسبی یک پیوند اشاره می کند. این پیوند می توان یک صفحه وب در همان سایت، نشانی یک وب سایت دیگر و یا حتی یک فایل باشد.
منظور از نشانی نسبی این است که مشخص شود فایل با صفحه مورد نظر فارغ از محل ذخیره سازی روی رایانه، نسبت به صفحه ای که برچسب <a> در آن وجود دارد در چه محلی قرار گرفته است. برای مثال فرض کنید فایل صوتی همان جایی ذخیره شده که صفحه وب قرار دارد بنابراین مقدار مشخصه href به صورت زیر تنظیم می شود:

<a/برای شنیدن موسیقی کلیک کنید<“a href= ” Song.wav>

طراحی وب سایت جذاب

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

استفاده از خلاقیت و تجربه در زمینه طراحی سایت یکی از مهم ترین عوامل موفقیت شما برای طراحی وب سایتی جذاب خواهد بود.  اگر در زمینه طراحی سایت از اطلاعات زیادی برخوردار نیستید سعی کنید با افراد حرفه ای و متخص در این زمینه مشورت نمایید و از تجربه و قدرت خلاقیت آن ها در این زمینه بهره ببرید. اما به راستی چه عواملی برای طراحی سایتی جذاب بیشترین تاثیر را دارند؟

ویژگی وب سایت های جذاب

• استفاده از تصاویر و فایل های بصری جذاب و کاربر پسند
• برگزاری مسابقات آنلاین
• ایجاد انجمن و فضای مباحثه کاربران و بازدید کنندگان
• طراحی رابط کاربری مناسب
• استفاده از مطالب مرتبط و مربوط به موضوع سایت
• بهره گیری از طراحان حرفه ای و طراحی دیزاین زیبا
• استفاده از طراحی واکنش گرا یا ریسپانسیو در طراحی سایت

10 فناوری مدرن در طراحی وب سایت

در طول سال های گذشته فناوری های مختلفی به بازار عرضه شده است. چشم انداز طراحی وب سایت ها بسیار تغییر کرده است و به سمت طراحی سایت های بسیار ساده تر و فنی تر پیش می رود. در این مقاله قصد داریم به بررسی 10 فناوری مدرن در طراحی وب سایت بپردازیم:

کامپوننت های وب

شما ممکن است این اصطلاح را شنیده باشید اما آیا واقعا به جزئیات توجه کرده اید! کامپوننت های وب سبک جدیدی از عناصر برای HTML5 هستند که تحت حمایت کمیته استاندارد W3C کار می کنند. با استفاده از این کامپوننت ها می توانید عناصر مورد نظر خود را برای قسمت های مختلف صفحات پویا وب سایتتان مانند ویدجت ها، اسلایدر ها و منو های کشویی سفارشی سازی کنید. من فکر می کنم همه توسعه دهندگان وب حداقل باید خود را با اجزای وب آشنا کنند تا بتوانند به خوبی از آن ها استفاده کنند، زیرا این مشخصات به صورت کامل توسط W3C به تصویب رسیده است.

 

پلیمر

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

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

 

AMP

گوگل همواره در تلاش است تا تجربه کاربری بهتری را به وجود بیاورد و کار با وب سایت ها را برای کاربران ساده تر نماید. پروژه AMP به گوگل اجازه می دهد هر صفحه وب را به یک قالب استاندارد در دستگاه های تلفن همراه تبدیل کند که صفحه خاصی را برای خواندن فرآهم می کند. اگر سایت شما با AMP طراحی شده باشد شما فقط کمی کد را در صفحه خود اضافه می کنید و بقیه را به Google خواهید سپرد.

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

 

Gulp

با استفاده از Gulp می توانید بسیاری از کار های آزار دهنده را به صورت خودکار انجام دهید و تا بتوانید بیشتر بر روی طراحی یک وب سایت عالی تمرکز داشته باشید. این ابزار به شما کمک می کند تا به راحتی کد های Sass خود را به css تبدیل نمایید، از قالب های مورد علاقه خود استفاده کنید و به صورت خودکار وب سایت خود را پس از انجام تغییرات در کدهای آن مشاهده نمایید. 

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

 

TypeScript

AngularJS به تازگی TypeScript را به عنوان زبان برنامه نویسی مورد نظر خود به کار برده است. این باعث می شود که TS بیشتر جذابیت داشته باشد ،زیرا می تواند زمان نوشتن اسکریپت های اساسی برای وب و انگولار را کاهش دهد. TypeScript در واقع یک زبان جدید نیست، بلکه یک سوپرست از جاوا اسکریپت است. پس اگر شما قبلا با جاوا اسکریپت کار کرده باشید می توانید به راحتی TS را هم یاد بگیرید. این به شما در نحوه کار با اکما اسکریپت 6 هم کمک خواهد نمود. در واقع اگر شما دنبال مرحله بعدی جاوا اسکریپت هستید، باید به TypeScript بپردازید.

 

Three.js

اگر از گرافیک های WebGL، دو بعدی و سه بعدی  اطلاعاتی داشته باشید باید بیشتر درباره Three.js بدانید. Three.js یک موتور قدرتمند مبتنی بر JS است که شما می توانید برای گرافیک وب سایت های خود استفاده کنید. درست است که وب سایت های بسیار کمی از گرافیک های دو بعدی و سه بعدی استفاده می کنند اما این یک ابزار بسیار خوب و در حال رشد در این زمینه است.

 

Docker

با استفاده از پلتفرم Docker می توانید وب سایت های خود را به راحتی به سرورهای مختلف انتقال دهید. Docker یکی از چندین پلتفرم هایی است که واقعا می تواند کل چرخه توسعه شما را تغییر دهد. Docker یک تکنولوژی در حال رشد در صنعت آی تی است که شما می توانید برای کسب اطلاعات بیشتر درباره آن به مستندات مربوط به آن مراجعه نمایید.

 

فریم ورک Ionic

هدف از طراحی این فریم ورک کمک به توسعه دهندگان وب سایت است که قصد دارند اپلیکیشن های موبایل طراحی کنند تا بتوانند برنامه های بومی با تکنولوژی وب (HTML / CSS / JS) ایجاد کنند. Ionic یک فریم ورک اوپن سورس رایگان برای توسعه برنامه های تلفن همراه بومی برای دستگاه های iOS و اندروید است. تاکنون Ionic حمایت های زیادی را از سوی جامعه وب دریافت کرده است و به نظر می رسد آینده روشنی را در پیش رو خواهد داشت.

 

کتابخانه Zurb 

کتابخانه Zurb به واسطه بهره گیری از فریم ورک قدرتمند فاندیشن طرفداران زیادی پیدا کرده است. این ابزار در حال حاضر دارای اتوماسیون و قالب برای توسعه ایمیل است. همچنین شما می توانید انیمیشن ها زیبایی را با استفاده از ابزار وب آنلاین Zurb بسازید. همه ابزار های اوپن سورس Zurb فوق العاده هستند و تیم آنها دائما در حال پیشرفت است.

 

Google Web Starter Kit

تیم گوگل پر از منابع مفید برای توسعه دهندگان است و یکی از ابزارهای شناخته شده آن Web Starter Kit است. این یک ابزار خاص نیست، بلکه یک کتابخانه از منابع مفید برای طراحی وب سایت های واکنش گرا، Sass / CSS، سرور های HTTP محلی و دارای قابلیت سفارشی کردن کد ها است. web starter kit شامل تمام ابزار هایی است که برای طراحی یک سایت عالی نیاز دارید.