html5

آموزش HTML Graphics -Canvas

 

فهرست

۱- HTML Canvas
2- کشیدن نقاشی روی بوم
۳- مختصات بوم در html

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

HTML Canvas

تگ canvas، برای رسم گرافیک در یک صفحه وب استفاده می شود.

گرافیک  زیر که ، با تگ <canvas> ایجاد شده است، نمونه از گرافیک در وب است.

www.w3schools.com

HTML Canvas

یک بوم (Canvas )،  یک ناحیه مستطیلی در یک صفحه HTML است. به طور پیشفرض، یک بوم دارای مرز و محتوایی نیست.

کد html آن، به صورت زیر است:
همیشه  ویژگی  id  که برای اشاره به یک اسکریپت است و ویژگیهای width و height برای تعیین طول عرض بوم را مشخص کنید. برای اضافه کردن یک مرز(border) از ویژگی style استفاده می شود.

در ویرایشگر زیر،  نمونه  ای از یک بوم پایه و خالی با نام آی دی myCanvas، ایجاد شده است. به این صورت که با استفاده از ویژگی style، یک border به دادیم:

همونطور که  می دونید  از بوم برای کشیدن چیزی، استفاده می کنند. در ادامه ما می خواهیم نحوه نقاشی کشیدن روی بوم(canvas)  را در وب  یاد بگیریم.

 

کشیدن نقاشی روی بوم با JavaScript


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

var canvas = document.getElementById(“myCanvas”);

۱) پیدا کردن تگ canvas

در ابتدا باید تگ canvas را پیدا کنیم.این کار توسط متد getElementById از html DOM انجام میگیرد.

۲) ایجاد شی ای برای رسم(قلم)

در مرحله دوم مابه یک قلم جهت رسم بر روی بوم نیاز داریم. شی getContext() دارای ویژگی ها و متدهایی برای رسم میباشد:

var ctx = canvas.getContext(“2d”);

ورودی ۲d و مفهوم آن این است که طرح ما دو بعدی است.

۳) رسم روی بوم

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

ctx.fillStyle = “#FF0000”;

ویژگی fillStyle میتونه یک گرادیانت، پترن و… باشد.

fillRect(x,y,width,height) با این متد هم میتونم داخل بوم یک مستطیل بکشیم و با fillStyle رنگ آن را قرمز کنیم.

  مختصات canvas درhtml

canvas یک سیستم صفحه آرایی دو بعدی است. گوشه سمت چپ و بالا مختصات (۰و۰) را ر این کد شامل میشود. در قسمت قبل با استفاده از متد fillRect(0,0,150,75) یک مستطیل کشیدیم. به این معنا که از مختصات(۰و۰) شروع، و یک مستطیل ۱۵۷×۷۵ پیکسلی کشیدیم.

رسم خط

برای رسم خط از متد های زیر استفاده می کنیم:
moveTo(x,y) – تعریف نقطه شروع از یک خط
lineTo(x,y) – تعریف نقطه پایان از یک خط

از متد stroke() به عوان جوهر جهت رسم خط استفاده میکنیم. برای دسترسی به کد و اجرای آن به
۱ myCanvas مراجعه کنید

رسم دایره

برای رسم یک دایره روی بوم ، باید از متد های زیر استفاه کنیم:
beginPath() – شروع مسیر
arc(x,y,r,startangle,endangle) –

See the Pen bzRvom by m (@intelmahaz1234) on CodePen.0

طراحی سیستم های پیچیده نرم افزاری

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

سیستم های پیچیده نرم افزاری

;

سیستم های پیچیده نرم افزاری از طریق یک فرآیند توسعه که چرخه حیات سیستم نامیده میشود تهیه می شوند که این چرخه شامل مراحل زیر است :

۱- نیازمندی ها : همه پروژه های برنامه نویسی با مجموعه ای از مشخصات که هدف پروژه را مشخص میکند شروع میشوند.

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

۲- تجزیه و تحلیل : ما در این مرحله پس از مشخص شدن نیازمندی ها اقدام به تقسیم کردن مسئله به بخش های کوچکتر که قابلیت حل دارند می نماییم.

دو روش برای این کار وجود دارد یکی زوش بالا به پایین (top down) و دیگری روش پایین به بالا (bottom up). از آنجایی که برنامه نویس ها ای که دید کاملی از پروژه ندارند اغلب از روش پایین به بالا استفاده میکنند و همانند ساختمان سازی که با ایجاد قسمت های مختلف مانند دیوار ها ، سقف و غیره اقدام به ساخت و ساز میکنند در اینجا نیز برنامه ها با استفاده از قطعه های کوچک ساخته میشوند و توجه ای به هدف ایجاد ساختمان نمی شود !

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

۳- طراحی: در این فاز در ادامه کارهایی که در بخش تحلیل انجام دادیم اشیاء داده ای و عملیات هایی که روی آنها انجام خواهد گرفت را بررسی نموده که تحلیل داده ای باعث ایجاد انواع داده های انتزائی (Abstract Data Type) میشود و تحلیل عملیات ها باعث طراحی و پیاده سازی الگوریتم ها و روال های مخصوص آنها میشود.

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

۵- اعتبار سنجی : در این مرحله با استفاده از ورودی های متنوع صحت خروجی و کارکرد برنامه را بررسی نموده و خطا ها را برطرف میکنیم.

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

بیشتر بدانیم

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

کوکی ها و عملکرد آنها

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

Proxyو مفهوم آن

پِراکسی یک سیستم سخت افزاری یا برنامه کاربردی است که در شبکه، به عنوان واسطه ای میان رایانه کاربر و سرور عمل می کند. به عنوان مثال چنان چه کاربر اینترنت بخواهد درخواستی را با هدف مشاهده صفحه وب یا دریافت یک فایل برای سرور وب ارسال نماید، این درخواست ابتدا توسط پراکسی مورد رسیدگی قرار می گیرد و نتیجه حاصل از این رسیدگی برای کاربر فرستاده می شود.انگیزه اولیه از ایجاد پراکسی ها به اشتراک گذاردن اتصال اینترنت در یک شبکه داخلی بوده است به این معنی که مثلاً در شبکه یک شرکت تجاری، به جای آن که تک تک رایانه ها به صورت جداگانه به اینترنت متصل شوند، همگی از طریق یک دروازه متصل به اینترنت یعنی پراکسی با اینترنت ارتباط برقرار کنند.
با گذر زمان قابلیت های جدیدی فراتر از به اشتراک گذاردن ارتباط با اینترنت به پراکسی ها اضافه شد که از آن جمله می توان به موارد زیر اشاره کرد:
نظارت بر کاربران: با استفاده از پراکسی می توان درخواست های ارسال شده توسط کاربران را بررسی نمود و در صورت عدم تطابق آن ها با معیارهای تعیین شده، کاربر را از دسترسی به صفحات ومحتوای درخواست شد منع نمود.
Cacheکردن اطلاعات: با توجه به گران بودن هزینه ارتباط با اینترنت و محدودیت در پهنای باند مورد تقاضای کاربران، پراکسی قادر است صفحات وب و فایل هایی را که بیش ترین درخواست برای آنها وجود دارددر حافظه داخلی خود ذخیره (Cache) نماید. به این ترتیب در درخواست های بعدی، لزومی به دریافت محتوا از اینترنت نیست و پراکسی با مراجعه به حافظه داخلی خود به درخواست کاربران پاسخ می دهد. این قابلیت ضمن افزایش سرعت دسترسی کاربران به مطالب موردنظر، از هدر رفتن پهنای باند برای دریافت اطلاعات تکراری جلوگیری خواهد کرد.
افزایش امنیت شبکه:از آن جا که پراکسی به عنوان درواز های برای ارتباط شبکه داخلی با اینترنت عمل می کند، با ایجاد یک سیستم امنیتی قدرتمند می توان از نفوذ فایل های مخرب نظیرویروس، کرم، تروجان به درون شبکه داخلی پیشگیری نمود و رایانه های موجود در شبکه را از خطرنفوذگری و دسترسی های غیرمجاز در امان نگه داشت.

معرفی افزونه

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

RSS

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

آشنایی با موتورهای جستجو

وب را می توان منبع بزرگی از اطلاعات دانست که برای اکثر پرسش های کاربران پاسخ های قابلقبولی را در خود جای داده است. امروزه با وجود میلیون ها وب سایت و میلیاردها صفحۀ وب و انبوهی از فایل ها و مستندات قابل دسترس، افراد گوناگون برای دریافت پاسخ پرسش های خود راهی بهترو سریع تر از مراجعه به اینترنت سراغ ندارد. اما سؤال اصلی این است که برای رسیدن به اطلاعات موردنظر باید به کدام وب سایت مراجعه نمود تا از میان انبوه اطلاعات موجود در اینترنت به صفحۀمطلوب رسید؟شاید اگر برای حل این معضل راه حل مناسبی ابداع نشده بود، استفاده عمومی از وبتا این حد گسترش پیدا نمی کرد.
تا مدت ها، کار دسته بندی صفحات وب به صورت دستی و بدون استفاده از نرم افزار خاصیانجام می شد تا این که کم کم ایده تولید موتورهای جستجو میان برنامه نویسان شکل گرفت و از سال۱۹۹۳ به تدریج نرم افزارهایی برای جستجو در محتوای صفحات وب تولید شد. در همین زمان بودکه مفهومی به نام Web Robot پا به دنیای فن آوری اطلاعات گذاشت؛ یعنی نر م افزاری که به صورت خودکار صفحات وب را احضار نموده و با بررسی محتوای صفحات، اقدام به نمایه سازی (Indexing) آنها می کند.

امروزه موتور جستجوی گوگل به مدد الگوریتم قدرتمندی که توسط یک دانشجوی جوان به نام لَری پیِج  نوشته شد توانسته در دنیای موتورهای جستجو به رقیب بلامنازع تبدیل شود و تقریباًٌ سایر رقبا را به حاشیه براند. هنگامی که کلید واژه ای را در یکی از موتورهای جستجو مثلyahoo.com ،google.com،bing.com  وارد می کنید، در کمتر از یک ثانیه، لیستی از نشانی وب سایت ها و صفحات حاوی کلیدواژه در اختیار شما قرار میگیرد و تعداد نتایج به دست آمده می تواند بین صفر تا چند میلیون نتیجه متغیر باشد. این سؤال ممکن است برای هر کاربر موتورهای جستجو پیش بیاید که یافتن این تعداد نتیجه در
این زمان کوتاه چگونه امکان پذیر است؟ برای پاسخ به این سؤال باید اجزاء تشکیل دهنده یک موتورجستجو را که در اغلب آنها مشترک است با هم مرور کنیم:

Robot یا Spider:


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

Crawler:

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

Indexer:

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

Database:

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

Ranker:

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

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

SEO

هنگامی که کاربران، کلیدواژ ه های به کار رفته در محتوای وبسایت را از طریق موتورهای جستجو بررسی میکنند، نام وبسایت در رتبۀ بالاتری قرار میگیرد و طبیعتاً مراجعه به آن بیشتر خواهد شد. بهینه سازی و بسایت برای شناسایی توسط موتورهای جستجو که به اختصار (SEO   (Search Engine Optimization  نام دارد یکی از مهار تهایی است که طراحان وب باید بر آن مسلط باشند.

 

 

www

مفاهیم مقدماتی وب

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

مقدمات وب

وب یا World Wide Web که در منابع فارسی از آن با عنوان تار جهان گستر یاد می شود یکی از سرویس هایی است که دسترسی به اسناد متصل به هم را در بستر اینترنت امکان پذیر می سازد.
از آن جا که به جز وب، سرویسهای دیگری نظیر پست الکترونیک، انتقال فایل و … هم بر روی اینترنت به منظور دستیابیکاربران به اطلاعات موردنظر ارائه می شود لذا تصور عمومی در مورد یکسان بودن دو مفهوم وب و اینترنت نادرست است.
در واقع اینترنت سیستمی جهانی از شبکه هایی است که با به کارگیری مجموعه ای از قواعد مشترک که پروتکل نامیده می شوندبه هم مرتبط شده اند و میلیون ها کاربر را در سرتاسر دنیا به یکدیگر متصل نموده اند.در یک تعریف خلاصه می توان اینترنت را شبکه ای دانست که میلیون هاشبکه خصوصی، عمومی، تجاری و … را با استفاده از زیرساخت های مخابراتی و ارتباطی به یکدیگروصل نموده و حاوی مجموعه ای از منابع اطلاعاتی و ارائه دهنده سرویس های متنوع به کاربران است.

CLIENT ,SERVERو نحوه درخواست یک صفحه HTML
اگر در فضای اینترنت یک  سایتی را  درخواست  بدهیم این سایت  که بر روی یک کامپیوتر بسیار قدرتمند (server)قرار دارد پاسخ گوی ما خواهد بود  .
سرورهای وب، رایانه هایی با قدرت پردازش بالا  میزبان  یا  وب هستند که به صورت دائم به اینترنت متصل می باشند و روی آنها نرم افزارهایی خاص برای برقراری ارتباط با اینترنت، ارایه سرویس وب و نیز تأمین امنیت اطلاعات نصب شده است.
وب بر اساس مدل سرویس دهنده –  سرویس گیرنده بنا شده است. یعنی یک درخواست ازسرویس گیرنده (مثلاً رایانه شخصی شما) برای سرویس دهنده ( در این جا سرور وب) ارسال می شود.وقتی درخواستی به سرور بفرستیم به این عمل http request و پاسخ سرور به ما  را http response میگویندکه بعد از آن ما صفحه ای را در مرورگر خود میبینیم.
سرویس دهنده، درخواست رسیده را پردازش نموده و پاسخ مناسب را برای سرویس گیرنده ارسال میکند.در سرویس وب برای ارسال درخواستها و پاسخها، مجموعه ای از قواعد تحت عنوان قرارداد  انتقال ابرمتن یا به اختصار HTTPتعریف شده که قوانین انتقال فایل را در وب مشخص میکند. هنگام فراخوانی یک صفحه وب، درخواست HTTP کاربر در قالب یک درخواست برای سرویس دهنده ارسال  میشود . و در پاسخ به این درخواست یک فایل متنی به زبان HTMLبرای سرویس گیرنده فرستاده می شود.
client  یک کامپیوتر عادی است که ما از طریق ا ن درخواست خود را میفرستیم .
مرورگر وب  (web browser)   نرم افزاری برای دریافت و نمایش اطلاعات از وب است. این نرم افزار به صورت مفسر (interpreter) کار می کند که قابلیت تفسیر تگ ها و همچنین اسکریپت ها را دارد .شاید این سوال در ذهن شما پیش آمده  باشد که interpreter چه فرقی با compiler  دارد؟ پاسخ این است که کامپایلر ابتدا تمام دستورات برنامه را خوانده و در صورت صحیح بودن  همه آنها را اجرا میکند  اما مفسر ها رفتار متفاوتی دارند .مفسر ها هر خط برنامه را اجرا کرده و به خط بعدی میروند،در واقع اجرای هر خط همان لحظه خواندن خط اتفاق می افتد .اگر خطایی در خطی باشد آن را اعلام میکند و به کار خود ادامه میدهد .

بنابراین اگر برای نمایش صفحات وب از کامپایلر استفاده میشد  سرعت اجرا بسیار پایین بودو همچنین اگر کوچکترین خطایی در صفحه بود ،هیچ گاه نمیتوانستیم به آن صفحه  دسترسی داشته باشیم تا همه ایرادهای آن برطرف گردد.
حال می توانیم نحوه عملکرد مرورگر را به صورت کامل بررسی کنیم. هر صفحه وب در اینترنت دارای یک نشانی به صورت
http://www.websitename.com/test.htm است که در آن :
Hyper Text Transfer Protocol : http — قوانین انتقال ابر متن ،پروتکل برقراری ارتباط را تعیین میکند.
www : نشان میدهد که کاربر در حال استفاده از سرور وب است .
websitename.com : نام دامنه سایت است و در واقع نشان میدهد که درخواست باید برای کدام یک از سروهای وب موجود در اینترنت ارسال شود.
test.htm : صفحه وب مورد نظر را در وبسایت مذکور مشخص میکند.
وقتی بعد از وارد کردن آدرس اینتر را میزنیم  صفحه ای برای ما باز میشود که بر  روی یک سرور است . در واقع با وارد کردن آدرس ، آدرس همان کامپیوتر قدرتمند را وارد میکینم. آدرس کامپیوتر ها توسط ip  مشخص و تبدیل  به نام میشود.ip دردنیای اینترنت برای یک  کامپیوتر  منحصر به فرد است.

 

حال سوالی که پیش می آید این است که مرورگر از کجا میفهمد چه چیزی را نمایش دهد ؟ اینجا است که موضوع  html   مطرح میشود.

 

یکصد و ده سوال از استاد مطهری

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

یکصد و ده سوال

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

جناب استاد مطهری ! مهمترین و عمده ترین هدف شما از تالیف کتاب ها و سایر نوشته هایتان چه بوده است و به طور کلی در انتخاب موضوعات موردبحث در کتاب های خود ، چه معیار هایی را مد نظر قرار داده اید ؟

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

این بنده هرگز مدعی نیست موضوعاتی که خودش انتخاب کرده و درباره آنها قلم فرسایی کرده است لازم ترین موضوعات بوده است . تنها چیزی که ادعا دارد این است که بر حسب تشخیص خودش از این اصل تجاوز نکرده است که تا حدی که برایش مقدور است در مسایل اسلامی عقده گشایی کند و حتی الامکان حقایق اسلامی را آنچنان که هست ارایه دهد. فرضا نمی تواند جلوی انحرافات عملی را بگیرد باری حتی الامکان با انحرافات فکری مبارزه نماید و مخصوصا مسایلی را که دست آویز مخالفان اسلام است روشن کند و در این جهت “اَلاهَمُ فَالاهَمّ ” را لااقل به تشخیص خود رعایت کرده است.