طراحی سایت

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

اگر از این تگ استفاده کنید باید از شکل پیش فرض پلیر استفاده کنید و نمیتوانید css های دلخواه خود را اعمال کنید.

برای استفاده از تگ object شما باید در ابتدا یک پلیر فلش داشته باشید.

در سایت خود یک تگ object ایجاد کنید که type آن از نوع application/x-shockwave-flash و data آن آدرس پلیر باشد.

در میان object خود تگی با نام param درج کنید که خصوصیت name آن movie و value آن آدرس پلیر باشد.

یک param دیگر ایجاد کنید که name آن FlashVars باشد و value آن آدرس و پارامترهایی که میخواهید به فلش پلیر بفرستید.

حال میتوانید از پلیر خود استفاده کنید.

کدهای نمونه object :

نکته های پست:

در نکته های پست قبلی صدا یاب را معرفی کردیم.در این نکته های پست به سوالات دوستان پاسخ میدهیم.

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

در جواب باید بگوییم بله.

اگر شما اسکریپت ها و فایل های صدا یاب را در هاست دیگری لود کنید و آدرس ها را به آنجا تغیر بدهید ممکن است.

مشاهده پست مشابه : ساخت پخش کننده دلخواه (مقدمه)

در این قسمت از آموزش های ساخت پخش کننده دلخواه قصد برسسی تگ embed برای درج پخش کننده در سایت را داریم. این تگ از عناصر قدیمی html می باشد و تمام مرورگرها آن را پشتیبانی میکنند. در واقع شما باید چند نوع از صوت خود را برای کار کردن صد درصد این تگ آپلود کنید.برای استفاده از این تگ کافیست در قسمتی که میخواهید نمایش داده شود این تگ را درج کنید.

این تگ خواصی دارد که شامل: autostart ، height ، src ، type ، width ، hidden ، loop .

برای وارد کردن آدرس فایل از src استفاده میشود،برای تعیین ارتفاع محتوا میتوانید از height استفاده کنید، برای تعین نوع فایل میتوانید از type و برای تعین عرض محتوا میتوانید از width استفاده میشود.

از autostart نیز میتوانید برای تعیین نحوه اجرا استفاده کنید(اگر true باشد فایل صوتی به صورت خودکار پخش میشود و اگر false باشد در زمانی که کاربر بر روی دکمه پخش کلیک کند فایل صوتی شروع به پخش میشود ).

از loop نیز میتوانید برای تعین تعداد اجرا استفاده کنید(اگر hidden باشد تکرار میشود و اگر false باشد فقط یک بار اجرا میشود.)

اگر مقدار hidden برابر با true باشد پلیر پنهان میشود.

مرورگرها css پیش فرض outline:none ; را بر این تگ اعمال میکنند.

از این تگ برای ساخت پلیر هایی با استفاده از فلش نیز استفاده میشود.

نکته های پست:

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

در ادامه به برسی درج صدا با استفاده از object میپردازیم.

نمونه ای از تگ embed در ساخت سایت:

مشاهده پست مشابه : لاک طراحی ناخن مایا maya

در این بخش از آموزش قصد بررسی bgsound در ساخت سایت را داریم.

این تگ html از ورژن های 3 و 4 به بعد html را همراهی میکند. برای استفاده از این تگ کافیست آن را در head وب سایت خود جایگذاری کنید. اما فایرفاکس آن را پشتیبانی نمیکند. و در کروم، اوپرا و سافری نیز احتمال اجرا نشدن صدا میباشد.

همانطور که گفته شد برای استفاده از این تگ کافیست در هد وبسایت درج شود

این تگ چهار خصوصیت دارد delay ، volume و src ، balance ، loop ، .

آدرس فایل صوتی خود را در src وارد کنید .

تعداد تکرار موزیک را نیز با استفاده از loop میتوانید تعین کنید.

شما میتوانید نحوه پخش(مقدار صدا در باند سمت چپ و راست) را با نسبت دادن عددی میان -10000 و 10000 به balance تنظیم کنید.

میزان صدا را نیز با استفاده از volume میتوانید تنظیم کنید.

برای تاخیر پخش موزیک بعد از بارگزاری نیز از delay استفاده میکنیم.

مسیر فایل" delay="20" loop="100" volume="50" />

نکته های این پست:

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

در ادامه به برسی درج صدا با استفاده از embed میپردازیم.

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

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

دومین راه درج صوت در طراحی وب سایتاستفاده از تگ embed می باشد.

سومین راه درج صوت در طراحی وب سایتاستفاده از تگ object می باشد.

چهارمین راه درج صوت در طراحی وب سایتبا استفاده از تگ audio می باشد.

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

در مطلب بعدی به نحوه درج صوت با استفاده از bgsound میپردازیم .

نکته های این پست:

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

اهمیت کد نویسی از ابتدا:

در این پست من درنظر گرفته ام که کسانی که این مطلب را میخوانند حداقل با تگ های ساده html آشنا هستند.

امروز میخواهیم با تگ ها و جوانب html5 آشنا شویم. Html5 انقلابی در طراحی سایت ایجاد کرد در واقع این زبان نشانه گذاری نصبت به گذشته کاملاً مفهومی تر و سئو بیس تر میباشد. در html5 شما اجزاء مهم را از اجزاء معمولی جدا میکنید html5 نه تنها سئو سایت بلکه ظاهر و کارایی های سایت شما را نیز بالا می برد به طور مثال در html5 به راحتی میتوان با قابلیت های خود html5 فیلم و صوت درج کرد. انیمیشن ساخت و کلی موارد دیگر که مفصل در مورد آنها صحبت میکنیم.

خوب حال برای کدنویسی با html5 در ابتدا باید قالب سایت طراحی شده باشد .

در بیشتر سایت ها یک هدر، یک ساید بار، یک فوتر و یک بخش اصلی دارد. در گذشته برای طراحی اینگونه سایتی اجزاء تفاوت نداشتند و شما برای طراحی هر کدام می توانستید از اجزاء اصلی html استفاده کنید که بیشتر افراد از div استفاده میکردند اما در html5 اگر بخواهید به صورت استاندارد کد بنویسید باید از تگ های html5 استفاده کنید و اگر نه اجباری به این کار ندارید ولی در هرصورت چند تگ هستند که با آنها میتوانید اجزاء اصلی سایت را از یکدیگر جدا کنید.

1- Header

2- Footer

3- Section

1- هدر: این بخش سرصفحه سایت شما را در بر میگیرد.

2- فوتر: این بخش پا صفحه شما را در بر میگیرد.

3- سکشن: با این تگ میتوانید محتویات میانی سایت را دسته بندی کنید(به طور مثال سایدبار و کانتنت یا رپر سایت)

این اجزاء به شما کمک میکنند تا اجزاء سایت را از یکدیگر تفکیک کنید این تفکیک به شما اجازه میدهد که فضای بیشتری برای کار داشته باشید.

در مطلب بعدی نحوه درج یک player با استایل دلخواه میپردازیم.

مشاهده پست مشابه : فرصت استثنایی دسترسی به 10000 ایمیل کاربران ایرانی

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

ولی در هر صورت بهتر است وب سایت ساخته شده حجم بارگزاری کم و کارایی بالا داشته باشد. این ویژگی هر چه بیشتر احساس شود چیره دستی طراح سایت را میرساند.

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

webGl : webGl یعنی گرافیک سه بعدی در وب.در ساخت سایت برای استفاده از webGl نیاز به بارگزاری پرونده، کتاب خانه و... نداریم در واقع مرورگرهای جدید در خود این کتابخانه را تعبیه کرده اند. و نکته جالب تر این که webGl همان 2 openGl است.

در صفحاتی که از webGl استفاده میشود یک زبان دیگر به مجموعه زبان های طراحی وب با نام GLSL ES اضافه میشود.

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

مشاهده پست مشابه : دانلود فیلم بازی عکس ترول +18

در ابتدا برای طراحی یک وب سایت شما باید از نرم افزارهای ادیتور استفاده کنید که بنده از دو نرم افزار دریم ویور و ویژوال استدیو استفاده میکنم

دریم ویور برای نوشتن کدهای HTMLو PHP

و نرم افزار ویژوال استدیو برای نوشتن کدهای جاوا و CSS

اما شما میتوانید از نرم افزار های دیگر نیز استفاده کنید در واقع نرم افزار مورد استفاده شما مهم نمی باشد این نحوه کد نویسی شماست که به کدهای شما روح میبخشد.

خوب در ابتدا از HTMLشروع میکنیم.

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

استفاده از تگهای منسوخ شده باعث کاهش سئو سایت شما می شود.

تیبل سنگین ترین تگ HTMLاست و بارگزاری سایت شما را طولانی تر میکند.

مشاهده پست مشابه : گروه طراحی وب سایت ارمیکا