وبگو | آموزش برنامه نویسی و مهارتهای وب

تا این قسمت از آموزش های مقدماتی HTML، آموختیم که این زبان در واقع یک زبان قراردادی (Markup یا نشانه گذاری) با اصول و شیوه مشخص و قانونمند برای شکل دهی بنیان و اسکلت بندی صفحات وب و ارائه محتوا در آن است که از زمان معرفی تا به امروز همواره به فراخور نیاز و بر اساس تکنولوژی های نوین وب روند روبه رشدی را طی کرده و قابلیت ها و مفاهیم جدیدی در خود جای داده است، از این رو به واسطه ارائه ایده ها و استانداردهای جدید در بستر شبکه جهانی وب، صرف آشنایی با تگ ها و نحوه کدنویسی متداول HTML به تنهایی نمی تواند دانش ما را در این زمینه کامل و ما را بی نیاز نماید و ناگزیر باید با یک مفهوم دیگر تحت عنوان HTML معنایی یا Semantic آشنا شویم، اینکه این عبارت چیست و چه معنا و کاربردی دارد موضوعی است که در ادامه در حد مقدور به آن خواهیم پرداخت.

از جمله مباحث پیشرفته در زمینه استایل نویسی وب با زبان CSS، بحث استفاده از ویژگی position و float برای شناور کردن عناصر مختلف در صفحات به نحو دلخواه و مورد انتظار است، آشنایی با این خاصیت ها را می توان نقطه آغاز استایل نویسی حرفه ای برشمرد چرا که معمولا در بسیاری از جلوه های ویژه و امکانات مورد نیاز برای ساخت واسط کاربری (UI یا User Interface) مناسب در صفحات وب این خواص استاندارد استفاده خواهند شد، به طور مثال منوهای طراحی شده با CSS، باکس های شناور و واکنش پذیر (Interactive)، افزونه ها و Widget ها و مواردی از این دست، لذا در ادامه آموزش های مقدماتی این بخش می خواهیم به توضیح در رابطه با کاربرد دو خاصیت position  و float در CSS بپردازیم.

معمولا در زبان های برنامه نویسی مختلف، برخی خاصیت ها و متدها بیشتر از سایر موارد به کار می روند که می توان اصطلاح متدهای پرکاربرد را برای آنها به کار برد، در کدنویسی با جاوا اسکریپت، دو متد پرکاربرد getElementById و innerHTML جزء برجسته ترین این موارد هستند، البته عبارت متد (Method) بیشتر در برنامه نویسی شی گرا (OOP یا Object Oriented Programming) کاربرد دارد و مواردی مانند innerHTML را خاصیت (Property) می نامند، با این وجود و به جهت اینکه این موضوع (OOP) در جاوا اسکریپت چندان مصداق ندارد، به اختصار و در این آموزش به هر دو، متد خواهیم گفت، به هر صورت برای آشنایی بیشتر و جهت تکمیل دانستنی هایی که تا این لحظه آموخته ایم، با ادامه مطلب همراه ما باشید.

اغلب استفاده ما از ای جکس (Ajax) در برنامه نویسی وب به قابلیت های ذاتی و استاندارد آن محدود می شود و شاید خواندن این مطلب برای کاربردهای عمومی چندان هم ضروری نباشد اما اگر بخواهیم تا حد تسلط کامل پیش برویم ناگزیر باید با مبحث فریم ورک های ای جکس حداقل در حد اطلاعات اولیه آشنا باشیم، بعضا ممکن است در پروژه های بزرگ برنامه نویسی برخی کارهای پیچیده با صرف کدنویسی ای جکس و متدهای متداول آن محقق نشود یا در کارهای گروهی به دلیل ایجاد سرعت و هماهنگی بیشتر یا سلیقه اعضاء تیم نیاز به کار با کتابخانه ها، API ها و توابع دیگری باشد که در این آموزش در مجموع به آنها فریم ورک می گوئیم، به همین خاطر در ادامه مباحث مقدماتی ای جکس (Ajax) این مطلب را اختصاص داده ایم به آشنایی با فریم ورک های ای جکس (Ajax Frameworks) تا با نگاهی بازتر بتوانیم از تمام قابلیت های تکنیک غیرهمزمانی در وب استفاده کنیم.

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

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

شاید تا به حال پیش آمده باشد که بخواهید حرف یا کاراکتر خاصی را در صفحات وب و کدهای HTML درج کنید ولی با وجود جستجو و دقت در صفحه کلید یا آزمون و خطای ترکیب کلید های مختلف، به نتیجه مورد نظر نرسیده باشید، به طور مثال علائمی مانند ©، ®، ♥، ♦، ← و... معمولا به صورت عادی در صفحه کلید دیده نمی شوند و برای درج آنها باید از ترفندهایی که در ادامه خواهیم دید استفاده نمائیم، البته این ترفندها نیز خود متکی بر ترکیب کلیدهای مختلف یا بر اساس کدهای عددی و حروفی استاندارد هستند که در ادامه با آنها بیشتر آشنا خواهیم شد.

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

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

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

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

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

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

از زمان معرفی CSS3 (در تاریخ چهاردهم آوریل سال 2000) تا کنون مباحث زیادی در مورد کاربرد قابلیت های این نسخه از CSS در طراحی صفحات وب بین توسعه دهنده گان و علاقمندان به این موضوع رد و بدل شده است، برخی بر این عقیده اند که به کل باید با شیوه سنتی و جلوه های مبتنی بر ابزارهای گرافیکی که با برنامه هایی نظیر فتوشاپ خلق می شوند و عناصر تصویری (فایل های با فرمت png، jpeg و...) و کد نویسی مبتنی بر جاوا اسکریپت (JavaScript) خداحافظی کرد و تمام موارد این چنین را با قابلیت های CSS3 خلق نمود و در مقابل عده ای به دلایل مختلف همچنان روش های سنتی را بهترین و سازگارتر ین شیوه برای طراحی امکانات و جلوه های بصری وب قلمداد می کنند، به هر صورت به نظر می رسد اصرار بر هر دو روش ما را به بیراهه خواهد برد، چرا که نه تکیه صرف بر روش های سنتی کار درستی است و نه استفاده کورکورانه از قابلیت های جدیدی که به تازگی معرفی می شوند، از این رو در این آموزش قصد داریم ضمن آشنایی با پاره ای از قابلیت های کاربردی CSS3 در طراحی جلوه های وب، از معایب و محدودیت های آنها نیز آگاه شویم.

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

شاید برای شما هم اتفاق افتاده باشد وقتی از حساب ایمیل شخصی یا شرکت خود که تحت دامنه ای مستقل است به سایر سرویس های عمومی (مانند Yahoo، Gmail و...) یا حتی سایر سرورهای شخصی یا سازمانی، ایمیلی ارسال کرده باشید و با کمال تعجب مشاهده کنید که ایمیل برگشت داده شده و یا در خوشبینانه ترین حالت به فولدر اسپم ها منتقل و احتمالا توسط مخاطب مد نظر شما خوانده نیز نشود، البته که این حالت به هیچ وجه خوشایند نیست و علاوه بر ارسال نشدن راحت و صحیح پیام شما، به نوعی اعتبار مضاعف و اطمینانی را که می توان از طریق ارسال مستقیم ایمیل به فولدر Inbox مخاطب به دست آورد، از دست می دهیم، از این رو در یادداشت پیش رو مکانیزمی را معرفی خواهیم کرد که شاید یکی از موثرترین روش ها برای خلاص شدن از شر بلاک یا ارسال ایمیل های شما به فولدر اسپم ها باشد، این مکانیزم SPF (مخفف Sender Policy Framework) نام دارد که در ادامه در مورد آن بیشتر خواهیم گفت.