آموزش استفاده از فونت فارسی در وب با CSS

یکی از قابلیت های خوب افزوده شده به CSS در نسخه 3، امکان استفاده از فونت هایی است که پیش از این تنها در سیستم عامل کاربران قابل نمایش و استفاده بودند، چرا که در وب به طور معمول تنها فونت های خاصی که در تمام سیستم عامل ها نصب و قابل اجرا هستند، پشتیبانی می شود و بقیه موارد به صورت پیش فرض (به طور مثال با فونت Arial) نمایش داده خواهند شد، از این رو توسعه دهنده گان CSS، به فکر راه حل این مشکل افتادند تا اینکه در نسخه سه خاصیتی با نام font-face@ معرفی شد، البته در ادامه خواهیم دید که استفاده از این خاصیت آنچنان هم به سادگی حالت معمول تعریف یک فونت نیست و به اصطلاح ریزه کاری هایی دارد.

مزایا و معایب استفاده از فونت فارسی در وب

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

آشنایی با خاصیت font-face@ در css3

ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS

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

ایجاد منوهای اینتراکتیو با فتوشاپ و css

ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3

امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف و یا به اصطلاح transparent امری مرسوم است، به طور مثال ممکن است طراحان قالب وبلاگ ها یا سایت ها، در طراحی پس زمینه مطالب، آن را کمی شفاف کنند تا تصویری که در زیر بلاک مطلب قرار دارد به صورت نیمه شفاف دیده شود، استفاده از این تکنیک پیش تر با تصاویر png ممکن بود، اما مشکل همیشگی یعنی مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) قادر به نمایش این تصاویر با زمینه شفاف نبود، لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از جاوا اسکریپت و بعدها css بدین منظور استفاده کردند، در این مطلب قصد داریم نحوه ایجاد تصاویر و بلاک های div شفاف را با css آموزش دهیم.

عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است، البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.

ایجاد بلاک و تصور شفاف با عنصر opacity در css3:

نمایش نتایج پایگاه داده و فایل php با آژاکس (ajax)

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

کد آژاکس و html

نمایش زنده آمار و اطلاعات با آژاکس (Ajax)

یکی از قابلیت های منحصر به فرد برنامه نویسی ترکیبی آژاکس (ترکیبی از جاوا اسکریپت و xml)، امکان پردازش زنده آمار و اطلاعات و ارسال و دریافت آنها در لحظه است، شاید تا به حال نمونه ای از این نوع کدها و برنامه های مبتنی بر آژاکس (Ajax) را دیده باشید، مثلا در برخی سیستم های نمایش آمار بازدیدکنندگان، قسمتی تحت عنوان نمایش زنده آمار وجود دارد که در هر لحظه، اطلاعات خوبی از اینکه کاربرانتان مثلا از چه کشورهایی هستند، به دنبال چه مطالبی می گردند و در حال دیدن کدام صفحه از سایت یا وبلاگ شما هستند را نشان می دهد که می تواند در کمک به شناخت بهتر نیازهای آنها و ایجاد محتوایی مفید تر و خیلی چیزهای دیگر به کار آید، جالب است اگر بدانید این نمایش زنده آمار، معمولا با آژاکس یا فِریم وُرک (Framework) های مبتنی بر آن قابل دست یافتن است، متاسفانه در وب و مخصوصا در وب فارسی، تا به امروز منبع خوبی برای اینگونه مسائل ارائه نشده است، به همین دلیل در این مطلب می خواهیم روش پایه ای انجام این کار را در حد امکان آموزش دهیم.

چگونه با آژاکس (Ajax) آمار و اطلاعات را به طور زنده نمایش دهیم؟

نمایش داینامیک و صفحه به صفحه مطالب با آژاکس

استفاده از آژاکس (ajax) به عنوان فناوری نوین در عرصه وب، خیلی از مواقع گزینه مناسبی است برای نمایش محتوا به صورت حرفه ای تر، صرفه جویی در استفاده از امکانات سرور و همچنین کمک به بارگذاری سریع تر صفحات، مخصوصا برای کاربرانی که از سرعت اینترنت پائینی استفاده می کنند؛ با این وجود اگر بخواهیم از فِریم وُرک های (Framework) آژاکسی که بعضا حجمی فراتر از 75 کیلوبایت دارند، برای پروژه ها و صفحات معمولی خود استفاده کنیم، لااقل با وضعیت کیفیت اینترنت در کشورمان جور در نمی آید، پس بهتر است کدهای سبک و ساده اما با قدرتمندی و کاربری مشابه را جایگزین آنها کنیم، ارزش این کار در استفاده های آموزشی و قابل فهم تر بودن این شیوه است، به همین منظور در این مطلب، اسکریپتی کاربردی را قرار داده ایم که به کمک آن می توانید محتوای html را به صورت صفحه به صفحه و به شکلی حرفه ای بارگذاری کنید و نمایش دهید.

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

لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql

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

از این کد می توانید به فرض در یک دیکشنری آنلاین برای پیشنهاد کلمات به صورت یک لیست بازشونده استفاده کنید، یا وقتی کاربر به دنبال عبارتی است، با این کار او را راهنمایی کنید و خیلی ایده های جالب دیگر که می توان با آن انجام داد، این نوع قابلیت ها به نام ajax auto complete یا ajax auto suggest نیز معروف هستند؛ لازم به ذکر است که این برنامه توسط برنامه نویسان خارجی و متناسب با زبان انگلیسی نوشته شده است، ولی به جهت راحتی کاربران، برای کار با زبان فارسی بهینه و کمی هوشمندتر شده است و تا آنجا که ما بررسی کرده ایم مشکل خاصی با حروف فارسی ندارد.

دانلود لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql:

ساخت قابلیت امتیازدهی با PHP و Ajax

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

کد جاوا اسکریپت سیستم امتیازدهی

آموزش نحوه آپلود فایل با php و آژاکس (ajax)

آپلود فایل در صفحات وب و از طریق فرم های html، یکی از پرکاربردترین شیوه هایی است که برای ارسال فرمت های مختلف به سرور کاربرد دارد، در حالت معمول اگر بخواهیم فایلی را به سرور ارسال کنیم، با اتمام فرایند ارسال، آدرس صفحه مرورگر به طور خودکار تغییر کرده و به فایل مقصد راهنمایی می شود، اما روش هایی وجود دارد که به کمک آنها، بدون اینکه صفحه به اصطلاح رفرش شود، می توانیم فایل را به سرور ارسال کنیم و از آنجایی که بیشتر این روش ها مبتنی بر آژاکس (ajax) یا لااقل شبیه سازی شده از فرایند آژاکسی است، در این آموزش قصد داریم به نحوه آپلود فایل با برنامه نویسی php و آژاکس بپردازیم، به این امید که مفید واقع شود.

فرایند آپلود فایل در وب

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

اعتبار سنجی همزمان فرم با آژاکس (ajax) و php

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

کد آژاکس برای ارسال اطلاعات فرم