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

آیا می دانید شما می توانید آموزش ، اسکریپت و یا مقاله مورد نظرتان را از ما کاملا رایگان درخواست کنید ؟
        برای درخواست اینجا کلیک کنید
مقالات کلوب

۶ مطلب با موضوع «طراحی وب سایت» ثبت شده است

انتشار کد - ایده جذاب فروش بلیط سینما

سید فرزاد سید عربی نژاد | سه شنبه, ۱۳ بهمن ۱۳۹۴، ۰۷:۰۹ ب.ظ | ۱ نظر

پیش نمایش فروش بلیط ۳ بعدی


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

این قالب تنها در مرورگر هایی که transform-style: preserve-3d رو پشتیبانی میکنند قابل مشاهده است.

برای مشاهده دمو روی لینک زیر کلیک کنید:

http://tympanus.net/Development/SeatPreview/

برای دریافت کد به لینک زیر مراجعه کنید:

http://bayanbox.ir/info/7745913068288609470/SeatPreview

منبع: tympanus

  • سید فرزاد سید عربی نژاد

انتشار قالب رایگان BuuRTL

سید فرزاد سید عربی نژاد | پنجشنبه, ۳ بهمن ۱۳۹۲، ۱۰:۱۹ ق.ظ | ۰ نظر

قالب وب سایت به صورت HTML به همراه سورس های مورد نیاز آماده دانلود می باشد. این نسخه سازگاری نمایش در موبایل را نیز دارد

پیش نمایش :

قالب buuRTL

buuRTL
mobile buuRTL

لینک دانلود :
دریافت
  • سید فرزاد سید عربی نژاد

نگاهی جزئی به آنچه یک طراح وب باید امروز رعایت کند

سید فرزاد سید عربی نژاد | سه شنبه, ۱۹ آذر ۱۳۹۲، ۰۲:۵۴ ب.ظ | ۰ نظر

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

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

برای مثال شرکت های بزرگ برای وب سایت های خود دستگاه های زیر را مد نظر قرار میدهند :

1- PC and Laptop Screen

2- Touch Screen , Tablet

3- Mobile Screen

4- SMART TV Browser

(توجه به این نکته هم مهم است که تمام دسته بندی های بالا تقسیم بندی و سایز های متفاوتی را درون خود دارند)

حال برای اینکه یک وبسایت با الگویی یکسان و قابل اجرا بر روی تمام دستگاه ها داشته باشند باید چه کنند ؟

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

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

 • در هنگام کوچک تر شدن سایز نمایشگر (برای موبایل) صفحات سایت اسکرول نخورد

 • امکان تاچ کردن بر روی صفحه وجود داشته باشد 


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


و در نهایت مهمترین نکته ساختار و قالب وب سایت است که با استفاده از تکنلوژی های به روز بتواند نظر مشتری را در یک نگاه به خود جلب کند ! 

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

"هر کاربر که وارد صفحه اصلی سایت شد ، او را وادار کنیم بدون آنکه از صفحه خارج شود محصول ما را بپسندد و در مورد ما اطلاعات کسب کند"

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

برای مثال به گوگل برای معرفی محصولات خود وب سایت های خود را به این شیوه طراحی کرده است :

http://www.google.com/nexus/7/

برای هر اندازه نمایشگر این وب سایت قابل نمایش است و استفاده از افکت های زیبا در هدر بکگراند های ثابت زیبایی خاصی را به وب سایت اضافه می نماید. 


  • سید فرزاد سید عربی نژاد

Jabber/Xmpp چیست ؟

سید فرزاد سید عربی نژاد | جمعه, ۱ شهریور ۱۳۹۲، ۰۵:۲۹ ب.ظ | ۰ نظر

جبر

Jabber در واقع یک نوع پروتکل متن بازه که بر مبنای ارسال و دریافت داده با XML ساخت شده است . که البته الان با نام پرتکل XMPP شناخته میشود !

اکثر نرم افزار های پیام رسان از این پروتکل استفاده میکنن (کلوب هم یکی از اونهاس).

شیوه کار این پروتکل بسیار ساده و استاندارد هست ، همون طور که قبلا هم گفتم این پرتوکل بر مبنای XML کار میکنه یعنی تمام پیام ها ، عملکرد ها و ... به XML تبدیل میشن و به سرور یا کلاینت ارسال میشن.

برای مثال یک همچین کدی ساخته میشه برای ارسال یک پیام با استفاده از پروتکل جبر:

<message from="frd_ir@server.com" to="Cloob@server.com" type="group_chat">
 
    <body>Hello All</body>
 
</message> 

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

به طور کلی میشه گفت جبر بهترین پروتکل برای راه اندازی یک سرور چت هستش ! و چون متن باز هست تا الان نسخه های متنوع و با زبان های مختلفی این پروتکل پیاده سازی شده که برنامه های بزرگی مثل nimbuzz ، مسنجر های مختلف و ... هم از این استفاده میکنن.

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

http://jabber.org


  • سید فرزاد سید عربی نژاد

یک پیشنهاد : اجرای آنلاین کد های Javascript , Jquery , HTML , CSS

سید فرزاد سید عربی نژاد | يكشنبه, ۲۰ مرداد ۱۳۹۲، ۰۲:۲۷ ب.ظ | ۰ نظر

شاید برای شما هم پیش آومده باشه که بخواهید یک سری کد های جاوااسکریپت ، html  و CSS خود را سریع تست کنید و خروجی آن را ببینید.

من برای این کار سایت jsfiddle رو معرفی میکنم ، این وب سایت یک ابزار آنلاین قدرتمند است که امکانات زیر رو در اختیار کاربران خودش قرار میده :

1- اجرای آنلاین کد های html , css , javascript

2- قالبیت استفاده از فریمورک های آماده مثل جیکیوری  (کافیه سمت چپ فریم ورک  خودتون رو انتخاب کنید)

3- قابلیت ذخیره کد ها و دسترسی به اونها در هر کجا که هستید 

4- با ذخیره کردن تغییرات جدیدکد های قبلی که ذخیره شدن پاک نمیشن و یه ورژن به آخر لینک اضافه میشه (مثلا اگه 5 بار تغییر بدین آخر url رو 1 تا 5 بزنین همه تغییرات رو میبینید)

و یه سری امکانات جانبی دیگه


لینک سایت :

http://jsfiddle.net/

عکس محیط کار :


jsfiddle



  • سید فرزاد سید عربی نژاد

XSS چیست ؟ (حملات تزریق کد)

سید فرزاد سید عربی نژاد | چهارشنبه, ۱۶ مرداد ۱۳۹۲، ۱۰:۳۷ ق.ظ | ۰ نظر

تزریق کد (انگلیسی:XSS: Cross site scripting) از روش‌های نفوذ و گرفتن دسترسی غیر مجاز از یک وب‌گاه است که توسط یک هکر به کار می‌رود.


تاریخچه : 

تاریخچه حفره‌های امنیتی در معرض حملات XSS به سال ۱۹۹۶ و سالهای اولیه صفحات وب باز می‌گردد. نفوذگران در آن زمان که پروتکل HTTP جا افتاده بود و طراحان وب‌گاه‌ها از زبانهای پردازه‌نویسی مانند جاوا اسکریپت سود می‌بردند، دریافتند وقتی کاربران معمولی وارد سایتی می‌شود می‌توان به کمک کدنویسی در حفره‌های امنیتی وب‌گاه، صفحه دیگری را در همان صفحه بارگذاری کرد سپس با سود بردن از جاوا اسکریپت داده‌های کاربر مانند نام کاربری، گذرواژه و یا کوکی(Cookie)ها را دزدید.

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


انواع حملات :

سناریوهای مختلفی برای قرار دادن کد مخرب در سایتها به عنوان حمله وجود دارد:

  • طراح سایت، خود کد مخرب را در صفحه قرار داده باشد.
  • حفره سایت ممکن است در سطح سیستم‌عامل یا شبکه ایجاد شده باشد.
  • یک حفره دائمی در یکی از مکان‌های عمومی وب‌گاه قرار گرفته باشد.
  • قربانی بر روی یک لینک حاوی XSS مدل non-persistent یا DOM-based کلیک کند.



به طور کل میشه گفت XSS به تزریق کد های جاوا اسکریپت در کد های یک وب سایت گفته میشه !
کسی که کمی جاوا اسکریپت بلد باشه و بسترش (وب سایت باگ دار) به راحتی میتونه XSS کنه ، 
برای مثال اگه شما کد زیر رو بتونید به سمت قربانی بفرستید و اون رو برگردونید تمام کوکی های صفحه جاری کاربر رو میدزدید ! این به چه کاری میاد ؟  خیلی از وب سایت ها ! اطلاعات اکانت و کد های هش شده رو تویه کوکی های مرورگر نگه میدارن و اگه کسی بتونه اون هارو از شما بگیره میتونه با جایگزینی کوکی های شما ، با اکانت جعلی شما وارد وب سایتی که هستید بشه !

document.cookie
امثال این کد و راه های نفوذ زیادن ! که پیشنهاد میکنیم اگه علاقه به این موضوع دارین در مورد جاوااسکریپت و مقالات XSS که کم هم نیستن مطالعه کنید !

روش‌های خنثی کردن که پیشنهاد میشه :
  • سود بردن از مرورگر مناسب.
  • سود بردن از ابزارهای محدودکننده اجرای کد مانند NoScript (اگه اطلاعات کافی در این خصوص ندارین ، پیشنهاد میشه استفاده نکنید ! )
  • کلیک نکردن بر روی لینک و آدرسهای ناشناس.
  • لاگ گرفتن از کنسول مرورگرتون (بعدا در این مورد توضیح داده میشه)
  • سید فرزاد سید عربی نژاد