java :: طراحی سایت

آخرین مطالب

امکانات وب

java

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

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

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

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

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

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

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

مثال:

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

<head>

<title>exampel</title>

</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();

}

طراحی سایت...

ما را در سایت طراحی سایت دنبال می کنید

برچسب : جاوا,آموزش جاوا,آموزش جاوا اسکریپت, نویسنده : علی آخرتی web500 بازدید : 1333 تاريخ : پنجشنبه 24 مهر 1393 ساعت: 13:15

java

آخرین مطالب

امکانات وب

java

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه