![Page 1: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/1.jpg)
طراحی وب ودرآمدی برنقــش جـی کوئـری در
تحــول آن
مرجع همایش رونمایی از کتاب آموزشی جی کوئری
پیام نور مرکز آران وبیدگل دانشگاه
1391پاییز
![Page 2: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/2.jpg)
می فرمایند:)علیه السالم( امام علی
هرگاه خداوند بخواهد بنده ای را
به رذالت برساند، او را از علم
و دانش و یادگرفتن محروم
می سازد.
![Page 3: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/3.jpg)
فهرست
اهمیت طراحی وب
جایگاه طراحی وب در ایران و جهان
2012نگاهی بر بهترین مشاغل جهان در سال
نگاهی بر بهترین مشاغل حوزه آی تی
ویژگی های شغل طراحی وب و درآمد تقریبی طراحان وب در
ایران
در آمدی بر طراحی وب و تکنولوژی های آن
معرفی جی کوئری، ویژگی ها،برتری ها و دالیل محبوبیت آن
نسبت به سایر تکنولوژی ها
![Page 4: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/4.jpg)
اهمیت طراحی وب
اینترنت؛ ارزان و دردسترس
وب؛ مؤثرترین راه برای برقراری ارتباط در دنیای امروز
مطرح شدن مباحثی همچون:آموزش الکترونیکی–
دولت الکترونیکی–
تجارت الکترونیکی–
همه ما یک طراح وب هستیم.
طراحی وب محدود به دانستن روشهای طراحی کامل یک سایت نمی باشد.
![Page 5: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/5.jpg)
جایگاه طراحی وب
در جهان
![Page 6: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/6.jpg)
جایگاه طراحی وب در جهان
2012بهترین مشاغل جهان در سال
ITبهترین مشاغل حوزه مهندسی و
![Page 7: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/7.jpg)
بهترین شغل های جهان در سال 2012
![Page 8: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/8.jpg)
جایگاه طراحی وب در جهان
2012بهترین مشاغل جهان در سال
ITبهترین مشاغل حوزه مهندسی و
![Page 9: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/9.jpg)
بهترین مشاغل حوزه مهندسی و IT
متوسط درآمد هاشغل انداز استخدامچشم
25.02 $90,000 افزارمهندسی نرم
22.58 $78,000 های کامپیوتریتحلیلگر سیستم
21.49 $75,000 گر وبطراح و توسعه
مهندسی نفت 114,000$ 17.48
مهندسی عمران 77,000$ 18.73
11.78 $71,000 نویس کامپیوتربرنامه
نویسنده فنی 63,000$ 15.93
10.32 $99,000 ایمهندسی هسته
مهندسی هوافضا 97,000$ 4.24
مهندسی مکانیک 78,000$ 9.03
![Page 10: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/10.jpg)
جایگاه طراحی وب
در جهان در ایران
![Page 11: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/11.jpg)
وضعیت طراحی وب در ایران
اطالعات دقیقی از میزان درآمد طراحان وب در ایران در دسترس نیست:
عدم وجود صنف مستقل
عدم وجود نظم و قاعده در بازار این شغل
![Page 12: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/12.jpg)
میزان تقریبی درآمد طراحان وب
در یک شرکت:
میلیون 1.5 هزار تا 600حقوقی معادل تومان ماهانه بابت کار در یک شرکت
به صورت فردی:
هزار تومان 600 تا 400قیمتی معادل برای طراحی هر سایت پویا
![Page 13: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/13.jpg)
ویژگی های شغل طراحی وب
عدم وابستگی جغرافیایی
عدم نیاز به سرمایه اولیه
بازاریابی پویا
![Page 14: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/14.jpg)
قیمت تقریبی طراحی سایت در ایران
رنج تقریبی قیمت طراحی سایت
میلیون 5هزارتومان تا 500 میلیون و 2تومان
روزنامه
میلیون تومان15 تا 5بین خبرگزاری
خبرگزاری های حساس و پربیننده میلیون تومان500 تا 100
میلیون تومان28 تا 2 پورتال های سازمانی و شرکت ها )بدون پشتیبانی(
میلیون تومان5هزارتومان تا 150 سایت های شخصی
هزارتومان30 تا 20صفحه ای سایت های استاتیک
![Page 15: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/15.jpg)
آموزش های موجود در وب
طراحی و توسعه وب
75%
سایر علوم
25%
![Page 16: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/16.jpg)
الیه های تشکیل دهنده یک صفحه وب
![Page 17: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/17.jpg)
الیه های تشکیل دهنده یک صفحه وب
الیه محتواساختار صفحه و هرآنچه به کاربر ارائه –
می شود را مشخص می کند.
![Page 18: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/18.jpg)
یک صفحه وبHTMLساختار
<html><head>
<title>This is a web page<title></head><body>
<div><p>I m a paragraph 1</p> <p>I m a paragraph 2</p> </div><p>I m another paragraph</p> </body>
</html>
![Page 19: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/19.jpg)
الیه های تشکیل دهنده یک صفحه وب
![Page 20: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/20.jpg)
الیه های تشکیل دهنده یک صفحه وب
الیه محتواساختار صفحه و هرآنچه به کاربر ارائه –
می شود را مشخص می کند.
الیه نمایشنحوه ظاهرشدن و نمایش هریک از عناصر –
را مشخص می کند.
![Page 21: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/21.jpg)
یک صفحه وبHTMLساختار
<html><head>
<title>This is a web page<title><style>p{color:red;font-family:tahoma;}</style>
</head><body>
<div><p>I m a paragraph 1</p> <p>I m a paragraph 2</p> </div><p>I m another paragraph</p>
</body>
</html>
![Page 22: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/22.jpg)
الیه های تشکیل دهنده یک صفحه وب
![Page 23: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/23.jpg)
الیه های تشکیل دهنده یک صفحه وب
الیه محتواساختار صفحه و هرآنچه به کاربر ارائه –
می شود را مشخص می کند.
الیه نمایشنحوه ظاهرشدن و نمایش هریک از عناصر –
را مشخص می کند.
الیه رفتارامکان تعامل کاربران را با صفحه فراهم –
می کند.
![Page 24: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/24.jpg)
کتابخانه چیست؟
مجموعه ای از کدهای با قابلیت استفاده مجدد که برای انجام کارهای متداول از
آنها استفاده می شود.
![Page 25: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/25.jpg)
کتابخانه های رایج جاوااسکریپت
![Page 26: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/26.jpg)
میزان کاربرد کتابخانه های جاوااسکریپت
jQuery
MooTools
Proto
type
ASP.N
ET Ajax
Scirp
t.acu
lo.us
YUI Librar
ySp
ryDojo
Ext JS
0
10
20
30
40
5052.5
5 3.8 3 2.9 1.5 0.6 0.2 0.1
![Page 27: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/27.jpg)
های جی کوئریویژگی
کم حجمی نسبت به سایر کتابخانه ها
![Page 28: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/28.jpg)
های جی کوئریویژگی
سازگاری با تمامی مرورگرها
![Page 29: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/29.jpg)
های جی کوئریویژگی
سادگی سینتکس و یادگیری
![Page 30: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/30.jpg)
های جی کوئریویژگی
YUIfunction handleClick)e( {Y.log)e(;}YUI)(.use)‘node-base’, function)Y( {Y.on)“click”, handleClick, “#foo”(;}(;
Prototype$)“foo”(.observe)“click”, function)( {alert)‘Clicked!’(;}(;
MooTools$)‘foo’(.addEvent)‘click’, function)( {}((;
DojofooNode = dojo.byId)“foo”(;fooConnections = [];fooConnections.push)dojo.connect)fooNode, ‘onclick’, foo((;
jQuery$)‘#foo’(.click)function)( {}(;
![Page 31: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/31.jpg)
های جی کوئریویژگی
کوتاه بودن دستورات نسبت به جاوااسکریپت
خط کد جاوااسکریپت را 20عموما می توان با یک خط کد جی کوئری پیاده
کرد.
![Page 32: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/32.jpg)
مقایسه یک قطعه کد جاوااسکریپت با جی کوئری
Javascriptvar p=
document.getElementByTagName)‘p’(;
for )i = 0; i < p.length; i++( {
p[i].style.display = ‘none’;}
jQuery$)‘p’(.hide)(;
![Page 33: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/33.jpg)
یک نمونه دیگرif (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1;
document.ATTRIBUTE_NODE = 2; document.TEXT_NODE = 3;
document.CDATA_SECTION_NODE = 4; document.ENTITY_REFERENCE_NODE = 5;
document.ENTITY_NODE = 6; document.PROCESSING_INSTRUCTION_NODE = 7;
document.COMMENT_NODE = 8; document.DOCUMENT_NODE = 9;
document.DOCUMENT_TYPE_NODE = 10; document.DOCUMENT_FRAGMENT_NODE = 11;
document.NOTATION_NODE = 12; } document._importNode = function(node,
allChildren) { switch (node.nodeType) { case document.ELEMENT_NODE: var
newNode = document.createElement(node » .nodeName); /* does the node have
any attributes to add? */ if (node.attributes && node.attributes » .length >
0) for (var i = 0; il = node.attributes.length; » i < il)
newNode.setAttribute(node.attributes » .nodeName,
node.getAttribute(node.attributes[i++] » .nodeName)); /* are we going after
children too, and does » the node have any? */ if (allChildren &&
node.childNodes && » node.childNodes.length > 0) for (var i = 0; il =
node.childNodes.length; » i < il) newNode.appendChild(document._importNode »
(node.childNodes[i++], allChildren)); return newNode; break; case
document.TEXT_NODE: case document.CDATA_SECTION_NODE: case
document.COMMENT_NODE: return document.createTextNode(node.nodeValue);
break; } };
$)“#content”(.load)“page.html #content”(;
![Page 34: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/34.jpg)
شعار رسمی جی کوئری
![Page 35: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/35.jpg)
ویژگی های جی کوئری
شرکت های بزرگ از جی کوئری استفاده می کنند.
http://docs.jquery.com/Sites_Using_jQuery
![Page 36: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/36.jpg)
ویژگی های جی کوئری
جامعه گسترده آموزشی و متن باز بودن
![Page 37: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/37.jpg)
میزان محبوبیت جی کوئری در جهان
http://www.google.com/trends/explore#q=jquery,mootools,dojo,yui,prototype
![Page 38: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/38.jpg)
میزان محبوبیت جی کوئری در ایران
http://www.google.com/trends/explore#q=jquery,mootools,dojo,yui,prototype&geo=IR
![Page 39: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/39.jpg)
میزان محبوبیت جی کوئری در استان اصفهان
http://www.google.com/trends/explore#geo=IR-04&q=jquery,mootools,dojo,yui,prototype
![Page 40: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/40.jpg)
ویژگی های جی کوئری
پالگین ها
![Page 41: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/41.jpg)
سؤال؟؟
![Page 42: web design and jQuery introduction in persian](https://reader038.vdocument.in/reader038/viewer/2022102717/558a68f2d8b42a5a7a8b4669/html5/thumbnails/42.jpg)
www.1stwebdesigner.ir
www.learningjquery.ir
https://plus.google.com/106253854893238129636
تماس با من