طراحی سایت

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

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

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

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

مشخصه دیگر این تگ preload میباشد که مشخص میکند زمانی که سایت لود میشود فایل های شما نیز لود شوند یا زمانی که کاربر کلیک میکند فایل های شما لود شود. برای لود شدن در زمان لود سایت از مقدار auto و برای لود شدن در زمان کلیک کاربر برای پخش مقدار none را به preload نسبت بدهید.

<audio src="1202.mp3" preload="auto"></audio>

نکته های پست:

برای اینکه چند فایل را در صفحه خود آپلود کنید نمیتوانید تگ audio را به صورت معمولی استفاده کنید. از تگ audio به نحو دیگری نیز میتوان استفاده کرد. برای بارگذاری چند فایل در ابتدا باید تگ audio را نوشته و بعد از آن مشخصهcontrols نیز به صورت تنها استفاده کنیم.

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

برای اینکار کافیست مشخصه type آن را با مقادیر audio/mpeg برای mp3 ، audio/ogg برای Ogg  و audio/wav برایWav.

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

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

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

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

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

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

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

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

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

data="http://ww2.aftab.cc/player/player.swf" width="290" height="24" >

نکته های پست:

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

در پست های گذشته انواع راه های درج صوت  را معرفی کردیم و معایب و نحوه استفاده از bgsound را نیز بررسی کرده ایم.

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

این تگ چهار خاصیت دارد که عبارتند از: height، src، type، width، autostart ، hidden، loop.

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

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

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

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

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

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

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

نکته های پست:

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

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

در پست گذشته به معرفی انواع راه های درج صوت در وب سایت پرداختیم

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=10,1,1,0" width="32" height="32">

  <param name="src" value="file:///C|/xampp/htdocs/fa/wp-content/themes/6goshe/jsser/1525.png" />

  <embed src="file:///C|/xampp/htdocs/fa/wp-content/themes/6goshe/jsser/1525.png" pluginspage="http://www.adobe.com/shockwave/download/" width="32" height="32"></embed>

</object>

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

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

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

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

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

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

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

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

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

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

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

1. Header
2. Footer
3. Section
4. هدر: این بخش سرصفحه سایت شما را در بر میگیرد.
5. فوتر: این بخش پا صفحه شما را در بر میگیرد.
6. سکشن: با این تگ میتوانید محتویات میانی سایت را دسته بندی کنید(به طور مثال سایدبار و کانتنت یا رپر سایت)

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>اچ تی ام ال 5</title>

</head>

<body>

<header><h1>اچ تی ام ال 5</h1></header>

<section class="content">ساخت سایت به سادگی امکان پذیر نیست مگر با تمرین و تکرار</section>

<section class="sidebar"></section>

<footer><blockquote>ساخت سایت به سادگی امکان پذیر نیست مگر با تمرین و تکرار</blockquote></footer>

</body>

</html>

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

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

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

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

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

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

تا اینجا هنوز شما یک سایت با ظاهر نسبتاً زیبا و سئو تقریباً مناسب طراحی کرده اید برای اینکه بتوانید از ربودن اطلاعات سایت جلوگیری کنید باید از کتابخانه ای به عنوان COWL استفاده کنید.

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

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

مثال:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>exampel</title>

<script src="مسیر فایل"></script>

</head>

<body>

</body>

</html>

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

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

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

var main=function() {

  var CANVAS=document.getElementById("your_canvas");

  CANVAS.width=window.innerWidth;

  CANVAS.height=window.innerHeight;

  /*========================= GET WEBGL CONTEXT ========================= */

  try {

    var GL = CANVAS.getContext("experimental-webgl", {antialias: true});

  } catch (e) {

    alert("You are not webgl compatible :(") ;

    retu false;

  } ;

  /*========================= SHADERS ========================= */

  var shader_vertex_source="\n\

attribute vec2 position; //the position of the point\n\

attribute vec3 color; //the color of the point\n\

varying vec3 vColor;\n\

void main(void) { //pre-built function\n\

gl_Position = vec4(position, 0., 1.); //0. is the z, and 1 is w\n\

vColor=color;\n\

}";

  var shader_fragment_source="\n\

precision mediump float;\n\

varying vec3 vColor;\n\

void main(void) {\n\

gl_FragColor = vec4(vColor, 1.);\n\

}";

  var get_shader=function(source, type, typeString) {

    var shader = GL.createShader(type);

    GL.shaderSource(shader, source);

    GL.compileShader(shader);

    if (!GL.getShaderParameter(shader, GL.COMPILE_STATUS)) {

      alert("ERROR IN "+typeString+ " SHADER : " + GL.getShaderInfoLog(shader));

      retu false;

    }

    retu shader;

  };

  var shader_vertex=get_shader(shader_vertex_source, GL.VERTEX_SHADER, "VERTEX");

  var shader_fragment=get_shader(shader_fragment_source, GL.FRAGMENT_SHADER, "FRAGMENT");

  var SHADER_PROGRAM=GL.createProgram();

  GL.attachShader(SHADER_PROGRAM, shader_vertex);

  GL.attachShader(SHADER_PROGRAM, shader_fragment);

  GL.linkProgram(SHADER_PROGRAM);

  var _color = GL.getAttribLocation(SHADER_PROGRAM, "color");

  var _position = GL.getAttribLocation(SHADER_PROGRAM, "position");

  GL.enableVertexAttribArray(_color);

  GL.enableVertexAttribArray(_position);

  GL.useProgram(SHADER_PROGRAM);

  /*========================= THE TRIANGLE ========================= */

  //POINTS :

  var triangle_vertex=[

    -1,-1, //first summit -> bottom left of the viewport

    0,0,1,

    1,-1, //bottom right of the viewport

    1,1,0,

    1,1,  //top right of the viewport

    1,0,0

  ];

  var TRIANGLE_VERTEX= GL.createBuffer ();

  GL.bindBuffer(GL.ARRAY_BUFFER, TRIANGLE_VERTEX);

  GL.bufferData(GL.ARRAY_BUFFER,

                new Float32Array(triangle_vertex),

    GL.STATIC_DRAW);

  //FACES :

  var triangle_faces = [0,1,2];

  var TRIANGLE_FACES= GL.createBuffer ();

  GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, TRIANGLE_FACES);

  GL.bufferData(GL.ELEMENT_ARRAY_BUFFER,

                new Uint16Array(triangle_faces),

    GL.STATIC_DRAW);

  /*========================= DRAWING ========================= */

  GL.clearColor(0.0, 0.0, 0.0, 0.0);

  var animate=function() {

    GL.viewport(0.0, 0.0, CANVAS.width, CANVAS.height);

    GL.clear(GL.COLOR_BUFFER_BIT);

    GL.vertexAttribPointer(_position, 2, GL.FLOAT, false,4*(2+3),0) ;

    GL.vertexAttribPointer(_color, 3, GL.FLOAT, false,4*(2+3),2*4) ;

    GL.bindBuffer(GL.ARRAY_BUFFER, TRIANGLE_VERTEX);

    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, TRIANGLE_FACES);

    GL.drawElements(GL.TRIANGLES, 3, GL.UNSIGNED_SHORT, 0);

    GL.flush();

    window.requestAnimationFrame(animate);

  }

  animate();

}

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

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

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

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

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

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

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

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

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